Mastering Design System from scratch in Figma.
A design system is a consistent set of guidelines, principles, and design components used to develop and maintain a product or service. Design systems ensure that all design elements in a project are aligned, facilitate collaboration between design and development teams, and provide a consistent and unified user experience. If you want to learn how to create an effective design system, here are some steps you can learn:
1. Understand the Basic Principles of Design
Before you start building a design system, it’s important to understand the basic principles of design, including typography, color, layout, and the use of other design elements. Learn about color theory, harmony, and contrast. Understand how choosing the right typography can impact brand image and user experience.
For the initial stages of creating text, you can fill in a few words with several font-size options. example of making a heading with the Medium font, divided by 3 sizes. There is size L with size 36, size M with size 26, and size S with size 20. Then you can choose one of the heading text sizes, starting with size L. Then you can see the right panel of Figma Text like the example image below:
Then we can create a color style, and choose a primary, secondary, warning, info color (this is just an example) for the needs of the website/mobile app that you are going to make. for the primary color example here I will use #4C4DDC by creating a rectangle, then you can use the Tints and Shades plugin figma then enter. Select the rectangle box with color #4C4DDC then enter and click generate, then 11 new rectangles will appear that you can choose for the primary color starting from the main color, surface, border, hover, pressed, and focus (can be adjusted as needed)
To save the color style that you created before, you can do it in the same way as creating a text style, or you can see an example in the image below:
2. Research and Analysis
Do research on the product or service you want to build a design system. Get to know the target audience, their needs, and competitors in the market. Investigate existing system designs and learn how they address similar challenges. Analyze their strengths and weaknesses to find inspiration and avoid making the same mistakes.
As an example to do research on creating a design system, I will create an e-commerce page, product details, login page and account creation page.
3. Define the Scope of the Design System
Define the scope and design goals of your system. Consider how the design system will be implemented across different platforms or products. Make a list of the design elements you need to customize, such as icons, buttons, layout types, form elements, and more.
After knowing the scope of the system design that will be made from hotel detail pages and e-commerce pages, I will make several element components starting from text styles, colors, buttons, icon sets, cards and others.
4. Building Design Components
Get started by designing and building the basic design components, such as color palettes, typography styles, and icons. Make sure that these components reflect your brand identity and meet your product design needs. I use the design tool Figma to make this process easier.
5. Trials and Iterations
After you design the basic components, test your design system by implementing it on several small projects or prototypes. Gather feedback from team members or users to see how effective it is and identify areas for improvement or change. Perform iterative iterations until you achieve a stable and reliable design system.
6. Design System Documentation
Comprehensively document all the components, rules, and guidelines in your design system. Create guidelines that are clear and easily accessible to the entire team. Good documentation will help ensure design alignment and consistency across all the products or services you develop.
The following is a design system documentation that I created covering typography, colors, shadows, grids and spacing, icons, accordions, tags, buttons, modals, and cards.
7. Continue to Improve the Design System
A design system is not a one-time project, but an entity that evolves over time. Always update and improve your design system according to changing product requirements, technological developments, and feedback from users.
Conclusion
Creating a design system is a process that requires dedication and good planning. By understanding the basic principles of design, doing the right research, and following the steps above, you can build an effective system design and deliver a consistent, unified user experience across a wide range of products and services. Keep learning and growing with an eye on developments in the design industry to keep your design system relevant and efficient.
