The Media Component System is a flexible design system that allows designers to be creative and developers to understand the design.
🎯Target users: Designers and Developers
Product & Tech Team needs an effective design system to improve the workflow. Because the Media Component System is not meeting the needs of designers and developers, and it is not flexible enough to grow over time.
Use Figma's Component Library to create an efficient design experience.
Customize annotations to help designers and developers communicate effectively.
Implement Atomic Design method to make the system easier to manage and update. Additionally, it encourages collaboration within the team.
Duration & Deliverable
Components & Annotations
Browser Inspect Too
Design systems can have a positive impact on the lives of designers and developers by improving their workflow and productivity. This, in turn, can lead to better user experiences.
“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.”
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.”
Risk of misinterpretation
Why Is Design System Important?
Increased consistency to make the product more user-friendly and easier to navigate.
Increased flexibility that can be customized to meet the specific needs of a product and ensure it is adaptable to change.
Reduced development time by providing developers with a set of pre-built components that they can reuse.
Improved collaboration by providing a common vocabulary ensure everyone is on the same page.
To be flexible but still maintain control, I allowed designers to swap components in the property panel. Built-in properties such as spacing helped to prevent inconsistencies.
I organized the components by their properties and use cases, making it easier for designers to find the desired component.
The components were built, structured, and organized using the Atomic Design method. This method is flexible and scalable, making it a good choice for design systems that need to grow and evolve over time.
Using Atomic Designallowed me to collaborate with other designers who were working on different parts of the design system, such as typography and buttons.
Breaking down the design into smaller components makes it easier for developers to understand and work with.
By making components responsive, I was able to ensure that all users could access the content and features of the product.
Analyzing the current product's HTML and CSS with the Browser Inspect Tool helped me to categorize and name the components in the design system. It also allowed me to gain a deeper understanding of how the product is built and how the different components interact with each other.
Used the appropriate colors, fonts, and imagery, as well as ensuring that the overall design was consistent with our brand guidelines.
I conducted a usability test on the Media Component System to assess its overall effectiveness.
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 annotation used technical terms that developers may not be familiar with.
The component was causing excessive scrolling and physical interaction on mobile devices.
How usable was the design system for designers and developers?
Using the new Media Component system in a page design project. The developers will implement it in our product. I observed and documented the process to understand the usability of the system.
I adapted the component annotation to use common terminology so that developers could understand it.
To improve the mobile experience, I decreased the component sizing on the continuous scroll page with plenty of content. This reduced the amount of scrolling required to find desired content.
A more effective way to build future project.
The new Media Component System saved designers time and effort by providing them with a consistent set of components to use.
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 find it in the Figma component library.
The new Media Component System also improved communication between designers and developers by standardizing technical terms used during the hand-off stage.
Developer’s feedback: Component annotations were really helpful when implementing a page. They allowed me to quickly and easily understand the purpose and behavior of each component, without having to check each one individually.
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.
Use Headless Design System bridge design and 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.