Dive into the making of media component system in Figma
Design System for Designer and Developer: Media Component
How can I facilitate a flexible, consistent, and efficient system?
Company: National Democratic Training Committee
OVERVIEW
Summary
I worked on the media component portion of our design system with atomic design, responsive design, and testing.
The goal was to make the library flexible, consistent, and efficient.
🎯 Target users: Designers and Developers
OVERVIEW
Problems We Wanted to Solve with the Component Library….
Product & Tech Team needed an effective design system to improve the workflow. Because the previous Media Component Library was:
❕
Lack of flexibility to grow over time
•
Flexibility: Implement Atomic Design method to make the system easier to manage and update.
❕
Unorganized and incomplete UI Components
•
Consistency: Provide a well-structured Component Library to help designers create consistent work.
❕
Difficult to align with developers
•
Efficiency: Standardize communication with effective annotation for developers.
Flexibility:Implement Atomic Design method to make the system easier to manage and update
Consistency: Provide a well-structured Component Library to help designers create consistent work
Efficient collaboration: Standardize communication with effective annotation for developers
Efficient technical solution: provide a set of pre-built components that team can reuse
OVERVIEW
Solution For….
•
Flexibility: Implement Atomic Design method to make the system easier to manage and update.
•
Consistency: Provide a well-structured Component Library to help designers creating consistent work.
•
Efficiency: Standardize communicate with effective annotation for developers.
OVERVIEW
Project Scope
My Role
•
Main contributor
•
Project owner
Helpers
•
2 Designers
•
1 Developer
~2
Months
9+
Components
90+
Variants
2
Prototypes
Figma
Browser Inspector
Abstract
Monday
DISCOVERY
Insights from Designers and Developers...
I generated insights from observations and casual conversations with designers and developers.
Designer:
"No carousel component? Gotta design from scratch"
-
Time consuming
"This component doesn't not match our brand"
-
Inconsistent design
"I need to update this components in all wireframes..."
-
Not flexible when there’s a change
“I have to create a component from scratch for a wireframe design project, So that I can ensure that the component meets the specific needs of the project.”
Pain Points
•
Time consuming
•
Inconsistent design
•
Not flexible when there’s a change
Developer:
“I have to click on the individual component on the wireframe to understand the design, So that I can implement the component correctly.”
Pain Points
•
Risk of misinterpretation
•
Information overload
“As a designer, I want to create a component from scratch for a wireframe design project, So that I can ensure that the component meets the specific needs of the project.”
Pain Points
•
Time consuming
•
Inconsistent design
•
Not flexible when there’s a change
“As a developer, I want to click on the individual component on the wireframe to understand the design, So that I can implement the component correctly.”
Pain Points
•
Risk of misinterpretation
•
Information overload
DISCOVERY
Assess Existing UI Component to Understand How Product is Built
I conducted a component audit and analyze HTML & CSS through browser inspector. It helped with component organization.
DISCOVERY
Opportunities That Will Bring Positivity Impact...
Increase consistency to make the product more user-friendly and easier to navigate.
Reduce development time by providing developers with a set of pre-built components that they can reuse.
Increase flexibility that can be customized to meet the specific needs of a product and ensure it is adaptable to change.
Improve collaboration by providing a common vocabulary ensure everyone is on the same page.
Opportunity
Adaptable to Grow Overtime
How might we make the library flexible?
Atomic Design Method
An update in the "atom" will affect the whole"molecules", making it a good choice for design systems that need to grow and evolve over time.
Facilitate Design Collaboration
It ishard to maintain the whole Design Systemby ONE person.Below is an example of how I collaborated with other designers who were working on different parts of the design system.
Opportunity
Organize & Define UI Components
How might we keep the design consistent?
Identify Patterns then Organize
I gave each component an identification. They were categorized by properties and use cases, making it easier for designers to find the desired component.
Built-in properties such as spacing helped to prevent inconsistencies. To be flexible but still maintain control, I allowed designers to swap components in the property panel.
Opportunity
Communicate with Developers
How might we implement the design efficiently?
Simplified & Annotate Components
Breaking down the design into smaller components made it easier for developers to understand and work with.
Opportunity
Align with Company's Value
How could we satisfy the business goal?
Reflect Brand Identity
Used the appropriate colors, fonts, and imagery, as well as ensured that the overall design was cohesive with our brand guidelines.
Integrate Inclusiveness
Bymaking components responsive and accessible, I was able to provide a consistent experience for all users.
VALIDATION
Validate the Solution
How usable was the Media Component Library for designers and developers?
I observed and documented the process from design to implementation. We eventually launched a new feature using the Media Component Library.
What Worked...
✅
The design system was functional and can be used to create high-quality wireframe with consistency.
✅
The components were flexible and can be updated if needed.
What Did Not Work...
❌
The Library had too many components. It was difficult for designers to navigate.
❌
The annotation used non-standard technical terms the developer could not understand.
How I Validated...
I observed and documented the process from design to implementation. We eventually launched a new feature using the Media Component Library.
iteration
Simplified Library = Convenience
Too Many Components are Difficult to Navigate
Less is more. I removed the “Nice-to-Have” components and kept the “Must-Have” components. So designers can find the desired component with ease.
iteration
Standardized Terms = Mutual Alignment
Technical Terms are Not Aligned Across Teams
We agreed to use XYZ term to describe XYZ properties. I adapted the component annotation to use common terminology so that developers could understand it.
reflection
Impact I made...
I received positive feedbacks from our designers and developers.
Designer’s Feedback:
"While working on a page design project, I needed the XYZ component. Instead of creating it from scratch, I was able to grab the component directly from Figma."
- Fellow Designer
The new Media Component System saved designers time and effort by providing them with a consistent set of components to use.
This ensured that the components were consistent with the rest of the design system, which made it easier for designers to create and maintain a cohesive user experience.
Developer’s Feedback:
"The annotations were helpful when implementing a feature. I could grasp each component's purpose and behavior. No more excessive clicking and zooming in."
- Fellow Developer
The new Media Component System also improved communication between designers and developers by standardizing technical terms used during the hand-off stage.
This made it easier for designers and developers to understand each other, which led to fewer misunderstandings and errors.
reflection
Perfect Design System does not exist
I found myself falling into the hole of making the system perfect. It's an ever evolving organism. A "perfect" design system is not adaptable to changes.
reflection
Headless Design System: Opportunity to Bridge Design & Engineering
Using design tokens could keep the design consistent and simplify the development process. Design token is similar to the class concept in CSS. Figma Token plugin even has an auto-annotation feature.
