Project
001
Meta Design System
In 2019, this company began crafting a distinct brand to clarify the origin of products under the Facebook umbrella. With a new name, they aptly embody their identity as a multi-product entity, actively realizing the metaverse experience.
When I joined Codazen in August of 2022, their client’s Figma files left a lot to be desired. This was due to rushed rapid prototypes requests and more than one internal brand team digging through their libraries for resources.
Overview
002
Problem
Following a comprehensive audit, we discovered the following problems: conflicting guidelines and instructions, repetitive development of common components, disparities across market websites and microsites, urgency for quick agile fixes without initial exploration, and teams functioning in isolation with fragmented communication.
Create a single source of truth with one Figma library in hopes of optimizing the design and development process, ensuring that projects are executed efficiently, with high quality, and in alignment with a unified vision and strategy.
Goals
Info
003
Figma
Photoshop
Roles
UI/UX Design
System Management
System Documentation
Prototyping
Tools
004
Design Process
01
Defining project goals along with prioritizing features while considering constraints will be vital when we share all of this with the stakeholders. The design will meet its goals and user needs, while staying within the project's constraints.
Specify scope
02
Obviously, we need to create a way to keep these assets consistent. In the likely event that there will be component updates we need to implement an approval process.
Identify the problems
03
After meeting with several different internal teams who utilize these files daily, we got a clearer idea of which teams frequent which libraries. Understanding how everyone interacts with the final files will be important.
Analyze the findings
04
Brainstorm solutions
During this step it’s important to encourage free thinking, use techniques like mind mapping, prioritize and refine ideas. These steps will help generate creative solutions to user problems and create a design solution that meets user needs.
05
In UX design, a prototype should include functionality, reflect the design and user flow and, contain appropriate content. These will be perfect for testing scenarios to refine the design solution with user feedback.
Prototype
06
Continuing to work with internal design teams within the company, we were able to receive direct feedback and implement solutions rapidly. After including a system where users could submit feedback and request new assets, components, features we really had our work cut out for us.
Deploy, test, improve
Atomic design
005
01
Atoms
At the foundational level, atoms are the basic building blocks of design, such as buttons, icons, input fields, and typography. These are the smallest, indivisible components that form the basis of the interface.
02
Molecules are combinations of atoms that work together to create simple UI components with a more specific function. For example, a search form composed of an input field (atom) and a search button (atom) is a molecule.
Molecules
03
Organisms
Organisms are more complex UI components made up of molecules and atoms. They represent sections of the interface that are more self-contained and serve a distinct purpose, like a header with a logo, navigation menu (molecules), and a search bar (atom).
04
Templates provide a framework for organizing organisms into a layout. They represent higher-level structures that guide the placement and alignment of various organisms on a page. Templates define the overall composition of a page without delving into specific content.
Templates
05
Pages
Pages are instances of templates filled with actual content. This is where the design comes to life with real images, text, and data. Pages showcase how the template's structure accommodates different types of content.
06
Summary
By following the five steps we can systematically create a design system that is both modular and scalable. We’ll be able to ensure consistency, reusability, and efficiency across projects while allowing for flexibility in customization and adaptation to different contexts.
004
Atoms
These are the basic building blocks, such as buttons, input fields, and icons – indivisible elements that establish the foundation of the design system.
We created a typescale based on different headings and paragraph styles. Our color palette supported brand-specific variations in light and dark shades, while also ensuring consistency in colors across brands for better accessibility.
Molecules
005
Combinations of atoms form molecules, creating simple UI components like a search bar (input field atom + search button atom).
Organisms
006
Components are carefully adjusted for various screen sizes and content ranges. This informs content creators about the limits – both the maximum and minimum – of content that each component can accommodate effectively.
Templates + Pages
006
Templates provide a framework that arranges organisms into a layout, guiding their placement and alignment on a page.
009
Retrospective
Detailed changelogs
It’s a never ending learning process. Brands will continue to grow naturally and eventually need to be refreshed and updated. Our work is never really done, it’s just on pause for now.
01
We have meticulously structured the repository of tools, resources, governance, and documentation. This ensures that any future team can seamlessly adopt this system with ease.
Improved handoff
02
Building out detailed documentation and toolkits was extremely helpful during the final handoff. We were able to demo Figma’s branching system and provide guidance for future updates.