24 Questions to start a Design System in Figma.
2021. June 29(Korean)
Book mark this(Notion)
Okay, you have awarded the importance of the design system. But, haven’t you found the answers to where to start, how to manage the resource of the team, how to apply Auto Layout and Variant of Figma properly, how to work less by working efficiently? Have you found practical solutions for the details? Even though we say that there is no answer for the design, it is good to start with a baseline. Those are the question that 200$ of lectures and articles didn’t answer. I am going to share the answers I defined through the past six months while creating a design system for two services consequently.
- At the moment I translate this article into English, It has been almost 10 months since the release of Autolayout, so it can be an old story. But I am sure that you can see the big picture here.
1 designer, 2 months, 101 screens, 605 components, All made in Auto layout, 149 colours, 17 text styles, Monorepo
Background & Overview
In 2020 Nov, I joined the team, and the challenges were
1. Migrate components from Sketch to Figma; Reconnect the broken links.
2. Creating a naming convention system while eliminating legacies like ‘rectangular copy34.’
3. Keep the screens responsive.
In 2021. Feb, a new business has been created while the design system of the main service has not been established! Creating a new online education platform from a blank page. Can I load and use an existing service file that is not organized? If you make a new one, where and how do you make it?
I read 20–30 design system posts and compared the design systems in Figma from Microsoft Fluent Web/Android/iOS, Shopify Polaris for Admin, Asana, Slack, Pegasus Design System, and Ant Design System. As a result, our team could create all the screens of the new service without difficulty while advancing the leading service.
Find the part you were curious about in the list of questions below.
Questions
- Should designers create a design system even if they work alone?
- What will the process of liquidating legacy and creating a design system be like?
- How do I liquidate the design file legacy?
Top-Down or Bottom-up? - Naming Convention: Should I Use the ‘/’ Dash?
Can I use it in the Frame, master component layer names?
How to create a folder system? - How should we indicate Variant and Property?
Right, Left, Active, Inactive… On? Off? - How to define text style?
- How to name text style?
H1,H2,H3.. Title, Subtitle../48 Bold, 24 Bold, 18 Medium... - How to make English and Korean compatible?
- Should the line height of the text be a multiple of 4?
- Can UI styles be experimented with by text styles?
- What is the best practice of a colour guide?
- What is the best practice of colour name?
- How many shadow styles are enough?
- Can I set the Line to Shadow?
- What is the best practice of the tree structure of Page?
- What kind of component do you need to create?
Icon, Form, Check box, Radio, Input, Option, Select, Card, Modal, button... - Atom? Token? Definition?
- What is the standard size of PC and Mobile?
- 8px? Why work in multiples of 4?
- Plugin recommendation.
- How do I design a master page, a master component that changes all screens when I change one?
- Should we use Zeplin?
- How to use the style guide in Zeplin?
- Naming system in Zeplin.
Term
- Artboard=Frame: The Artboard used by Adobe is called Frame in Figma.
- Text Styles: It means Text Styles of Figma that manages the style of Text.
1. Should designers create a design system even if they work alone?
Painpoints
- ‘What was the spacing px here? font size? colour value?…’
- ‘After importing Sketch to Figma, components are all broken... If the text has two colours applied, all the letters are blown out and can’t be seen.’
- ‘It seems to be named for each layer, but if you look at it, it’s all copy copy copy..’
- ‘If there is no UI system for the main service, can I create a UI system for a new service within 2 months? Where should I start…’
- ‘If you go to every page and edit every single component every time you edit it, you will not be able to avoid overtime work.’
What if we can do more User Research by reducing inefficiency? Make a memorable spacing system, avoid repetitive work, and change the UI style easy.
You won’t be able to design by yourself forever. There will be a team. How can we create a component structure that others can understand? I kept it in mind while building the Design System.
2. What will the process of liquidating legacy and creating a design system be like?
Process
Understand the business direction and project goals → Interview stakeholders, planners, and developers. Empathize with the need for the system → Check the UI work system, style, and work method now for AS-IS — TO BE establishment → Collect and analyze third-party cases for benchmark → Create a design system. (A phase where a lot of thought arises) → Creat UI → Design Hand-off: Transfers style guide and component to create a file tree structure in Zeplin→ Collaborate using design system → Improve.
3. How do I liquidate the design file legacy?
Top-Down or Bottom-up?
Layout and component names are a feast of copy and group. Moreover, none of the components is made with Auto Layout and Variant. 12 kinds of button height. (Oh no!!!) Where can I start?
- Top-Down: Create rules and apply them in bulk. Exceptions found in the middle are forcibly included in the rule.
- Bottom-Up: List all font sizes, button styles, shadows, colours, etc. in use, and change little by tying commonalities. Finally, the rules are derived.
The answer is to use both. If you try to choose one of the two, you will have a lot of trouble and be slow. Don’t be afraid of wasting time, follow the Bottom-Up method to figure out the overall volume first. Create a ‘check legacy’ section on Page and collect the components you want to unify. Find the rules. If there are no rules, try creating and applying good rules in the Top-Down method.
Don’t know what good rules are? Please find below for each item you are concerned about. Consider what is right for you through various trials and failures.
4. Naming Convention: Should I Use the ‘/’ Dash?
Can I use it in the Frame, master component layer names?
How to create a folder system?
Did you know that if you use ‘/’ in the layer name of Figma, it will folder the extracted files? By using this feature, you can make all the components organized in one folder when extracting batches! Let go of the burden of making best practices at once by utilizing this system from the beginning. You can easily rename the layer by Command(Ctrl)+R.
I recommend not to overuse dashes ‘/’ in layer names If you want to avoid clicking on a folder inside a folder to send the developer one specific svg file.
There is no need to separate hierarchies with dashes ‘/’ even in master components. If you need to download all components in bulk without using Zeplin, try creating a foldering system using ‘/’ and renaming functions according to the situation.
Foldering methods include 1. Divide by PC/Mobile/iPad device, 2. Divide by page, and 3. Divide by component.
If you use foldering with ‘/’ in Color styles and Text styles to separate sub-colour values, it will be well organized. If you create and manage many colours at once, try Styler and Design System Organizer.
Naming Convention Reference: Best Practices for design system naming conventions.
I read it last November when I just joined the team. I wanted to migrate the Sketch file with a good naming convention. In retrospect, the naming convention I made after reading this article had a lot of problems. The general taxonomy in this article is helpful, but I’ll mention a method I don’t recommend.
- Don’t abbreviate Button to btn. It is better not to use an abbreviation for something that can cause errors in code because it is confused with other abbreviations. Even if it gets long, write all the letters.
- Do not include any dashes in the naming as indicated by ‘/’. will be foldered. Besides, you have to keep using duplicate values you don’t need. Do not use duplicate values. It’s like writing all your code as divs in development. Just as you write li, oi, article, p, etc. in code, so do it here. Briefly specify only the Frame name and the name that the component refers to.
- Do not use Right and Left in naming. Use it as a property of a component whose position does not change once it is named like an arrow or button.
*Please do not use excessive ‘/’ dashes to follow all the instructions in the link above. You don’t need to define all the names in one layer by following these guideposts. Just give each layer a short name or two. Give each name inside the frame, group, or auto layout, and give it a different name for the whole.
5. How should we indicate Variant and Property?
Right, Left, Active, Inactive.. On? Off?
By utilizing Figma’s Variant and Property functions, you can save many times more time than creating and managing UIs with Sketches. If you make the Property with On/Off system, you can manage each component with a toggle.
If you make the menu of the Property drop-down, you have to remember what the items are and how the naming convention is. We can’t remember all of that. Let’s take an example with a button.
- Type: Active, inactive, Enable, Disable.
- Active: On/Off
Disable: On/Off
It is much faster to create two Property values and use them on/off. If it takes 3 seconds to open the hidden state value from the drop-down, check and select it, it takes only 1 second to read and toggle the property value already exposed on the screen.
So, what are bad and good names?
Setting up Property rules with style properties is really inefficient. For example, there is no need to indicate something like a Radius value.
Use Activation, Disabled, Hover, Pressed, Focused, Direction, Icon, etc. Even if the property list becomes long, it is highly scalable to write this way. Accommodating the complexity to keep the rules simple is efficient.
*Tip: on/off, Yes/No, True/False, All can be toggled.
6. How to define text style?
We discussed it three times in weekly retrospectives. Siwoo(Team Lead) advised that a 7–8 size variant is enough. However, there was more than 20 kinds of font styles! 8,9,10,11,12,13,14,15,16,17,18,19,20..px! Plus, count Bold, Medium, Regular for each! Wow...
In this case, set the appropriate sizes and make batch edits by using the plugins Similayer and Typesacles. (*Refer to #20 for the plug-in.) How do you choose the right size? List multiple scales on the screen. And choose the right size and combine them. Try subtracting the style to see how the proportions change while changing the location with the Auto layout function.
The larger the font size, the better the font for the title. The typeface for the title shows the shape of the characters well, and even if there is a defect, it is not very noticeable. You can also use the characterised typeface. And the thickness determines the atmosphere of the service.
As a font for body text, 14px is often used. Although iOS devices use 13px as the default size. In order to reduce the fatigue of reading the information, 16px is used as the default size. As the number of users over 50 increases, the trend of increasing the overall font size and utilizing Bold has emerged since 2019. You can see the navigation in bold and large letters in many services such as Twitch, Watcha, KakaoTalk, Salad Bank, Chai Card, and Naver.
Take a base font and place smaller and larger fonts below it.
7. How to name text style?
H1,H2,H3.. Title, Subtitle../48 Bold, 24 Bold, 18 Medium...
This is the really difficult part. The references that come up when you search for a design system are all ideal. Would it be more like a style guide? What rules should we have for the services we operate and not our portfolios? We should consider the numerous edge cases and scalability.
H1,H2,H3.. Body, footer...Pros and Cons
Pros
It’s easy to understand even for people who don’t know the typography of UI. If you apply from h1 to h6, communication with developers might be easier.
Cons
However, there is a disadvantage that exceptions cannot be covered. How can we distinguish the difference between Body1 and Body2 in their name? For that, We must remember the px size of each property. How about using bold in Body1? How will the design system manage it? What if the h1 size is used outside the headline? Also, we can’t know which page or which component it was used in.
48 Bold, 24 Bold, 18 Medium...Pros and Cons * Recommended
Pros
What are the two most important things when designers choose a text style? Size and thickness. Mark the font size and thickness on the name. Designers create UI, so we should set the name for their convenience in Figma.
Cons
The limitation is that I don’t know whether the style is used for Header or Navigation.
However, you don’t need to track every single time. Especially if you don’t want to change the text style after setting it for the first time. And it’s good for your mental health keeping the initial settings.
If you use a different typeface for each OS environment, prefix the environment name and use ‘/’ to group them.
PC / 48 Bold,
PC /24 Bold,
iOS/ 48 Bold,
iOS/24 Bold,
Android / 48 Bold,
Android/24 Bold...
8. How to make English and Korean compatible?
FAST ONE has two user groups: Teacher(English speaker) and Student(Korean speaker). A multilingual environment should be considered.
- Does the Font-family support multilingual?
- Does the user group of the service use both English and Korean?
- Is there a large percentage of English speaking in the service?
If the proportion of using English is low, choose a font for Korean. However, if you want to use English and Korean separately, try using the below rule in the design system.
Add language + font name to the rule font size + thickness (ex. 24 Bold) introduced in step 7.
9. Should the line-height of the text be a multiple of 4?
Microsoft’s Fluent has different text styles for iOS, Web, and Android. line-height is even or a multiple of 4 on the Web but includes odd numbers on iOS.
If components such as input fields or icons that are used alongside text are made in multiples of 4px, it is recommended to set the height of the text to be multiples of 4 as well. It doesn’t break the margin rules in Auto layout.
At this time, you should be aware that the x-height is different for each font, so the line height may be an odd number. Discuss this issue with the developer and come up with a solution.
10. Can UI styles be experimented with by text styles?
By changing the font family of a Text Style, you can manage all typefaces. You can use the SF Pro Display and batch edit with Noto Sans.
There are some caveats when using text styles to experiment with UI styles. For example, let’s say you create a new Card. You named the text styles Title, Subtitle, Button. And I made three drafts. You can also experiment by assigning a different Font family to each Text Style. Do not try this experimental method on Figma files with a regular and organized design system. Experiment by adding it to a new Draft file or pages named [Playground].
11. What is the best practice of a colour guide?
Should I write the name of the colour? Should I give it a new name? Should I write a colour value? Do I have to write all the codes such as Hex, RGB, etc.? Should I differentiate by Opacity or Tint? How should I layout the colour guide? Should I put a description for each colour?
Colour guides vary from company to company and from project to project. How much scalability should be considered for operating services? Is it difficult to manage if there is a lot of information that needs to be filled in for each colour? Would it be easier to communicate with the contents designers and the editorial designers if you take the time to create it in the first place?
The Lemonade team uses Hex codes. So there was no need to name RGB as well. If a colour is not selected at the initial stage of building the design system, the colour may change, so it is not necessary to write down the colour name and colour value information in advance.
*You can create a master component or create a field in a batch later with Similayer.
Shopify and Microsoft’s approach to Color styles is impressive. Shopify focused on the function of colour even if it overlaps, rather than having to use the same colour in multiple situations. Default colour #202223 of Text and Default colour #202223 of Icon are the same code value but are defined in different styles.
If you create a Surface, Background, Primary, Secondary, Border, etc. like this, there are a lot of colours. (We put all 149 colours in the code!) While FAST ONE used multiple definitions of colours according to functions, the MY LIGHT defined colours only once and used them in various environments. Text and Icon colours are defined in the same style. Defining colours by function, I thought about whether it would be inefficient and make things more cumbersome.
In conclusion, the function-oriented Color Style was efficient to unify the design style. Text colour is limited and only a certain colour is applied to icons. In addition, if a colour other than the text name was applied to the text, the developer could fix it after checking it. You will have a lot of support to correct the wrong colour assignments.
12. What is the best practice of colour name?
Let’s take grey as an example.
If you could make three grey colours, what would you name them?
- Color + Number : Grey1, Gery2, Grey3
- Color + Opacity : Grey 100, Grey 90, Grey 80
If grey is used for the background, you can try making it like this. Add a feature!
- Function+State : Background/Default, Background/Pressed, Background/Disable
Try foldering using dash ‘/’. It makes it easier to remember the position and order of the colour palette.
Open a well-crafted design system file in Figma Community. And by copying and modifying those colour guides and templates, you can save time and create a starting point.
13. How many shadow styles are enough?
Over 13 shadow styles for MY LIGHT! It wasn’t regular as I used it while changing it according to the situation. Reflecting on it, I referenced Shopify’s Polaris for admin: Shadow. Defines the shadow to use for the context. If you want to write more styles, hold on!
I created 6 shadow styles and added 2 more. Those two are for the button when the light comes from left to right. But I don’t use it often. We are trying to solve it with as many as possible 6 shades.
14. Can I set the Line to Shadow?
If you set the Shadow’s Blur to 0, you can use it as a line. You can create a line inside or outside the container by setting in the grouped Auto layout or Frame. Use it to divide a Card, Input box, List, and etc.
Then you won’t see a layer named vector 1 or a layer like Rectangle 55! Furthermore, you don’t have to name your layers, and it’s easy to manage. You can also set and use the same in development. The downside is that whether the Spread is 1px or 2px, the shadow’s height cannot be taken as a guide. This part requires consensus within the team.
15. What is the best practice of the tree structure of the Page?
I don’t want to manage multiple files. It causes stress and makes us slower. Also, our service volume doesn’t require Library for each file at this moment.
If one person is responsible for creating and servicing 2–3 or more features, it is recommended that everything is located in one file. How about dividing Figma’s Page naming by page, by function, by project name, and by component? Well, I found a good practice. That’s splitting it up into a master page, a work page and, most importantly, a ‘Playground’ page.
- PC up to date, Mobile up to date, Master components, +01. Master pages, +02. Playground, + 03.Image guideline, +03. (Feature prototype), +04.History
- Member up to date, Teacher up to date, Master components, +01.Master Pages, +02. Playground: style, +03. Service team communication
We have divided the pages by function. ‘Service team communication’ and ‘Image guideline’ pages for marketing and design teams are all managed in one file.
Master pages have both PC and Mobile. If there are more than two user groups, the service screens for all user groups are together. Edit the file here. This makes it easier to maintain unity.
Componentizes the created screen. Based on the componentized screen, you can put a modal on it, or you can design a blank screen. If you change the very first master page, everything changes. It’s like a Master page in Adobe InDesign.
However, the master componentized Frames cannot be extracted to Zeplin. Everything can be extracted only when the frame is not master-componentized. Because of that, there are [Up to date pages]. Frame the copy of the master component again and set it to the same name. Renaming shortcuts are a quick way to do it. Doing this allows you to view all the screens together and use it as a page to share the latest screens. You can set interaction here.
16. What kind of component do you need to create?
Icon, Form, Check box, Radio, Input, Option, Select, Card, Modal, button...
Necessary components.
- Button: Primary, Secondary, etc
- Form: Input, Option, Select / Check box, Radio, Label.
- Table: Header, List, Controller, Pagination.
- Navigation: Global Navigation Bar, Right and Left Navigation Bar, Footer, etc.
- Icon, Card, Filter, Avatar.
- Modal
- Notification: Guide message, Index, Flag.
- Skeleton, Empty page.
- Text style, Color style, Spacing, Shadow, Grid.
This includes the minimum required to operate the service. Due to the diverse user group, you can find more items in service with high complexity.
I recommend making those components responsive using Auto layout. Determining, managing, and remembering pixel spacing can be difficult, but it will help expand UI.
17. Atom? Token? Definition?
What are Atoms and Tokens? In the book <Design FM>, Toss’s designer introduced “Token” in the design system.
https://piccalil.li/tutorial/what-are-design-tokens/
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
Token means a design component or code that can be used without referring to a style guideline.
So, what is Atomic Design? A development concept that refers to Atoms > Molecules > Organisms > Templates >Pages.
The downside is that many steps have to be named and managed separately. How do you differentiate between a template and a page? How to overcome the problem of not being able to override the template when using it as a variant?
Because of this complexity, Lemonade Team has decided to only differentiate between Atom and Token. From Molecules to Templates, it is a Token.
Later, in March 2021, while building a new design system for FAST ONE, I realized that distinguishing between Atom and Token and naming conventions were useless and even harmful.
The important thing is that it is easy to find. If not, you may be better off not using it at all. The essence is to create a structure that can be understood among the team. Systems that produce ambiguous standards are inefficient.
18. What is the standard size of PC and Mobile?
Desktop(PC) : 1920, 1440(px)? To the default screen size of LG Gram and Samsung, we put components inner 1200px and set the Frame size as 1920px.
Mobile: 360, 375, 414(px)? Some recommend 414px because it is wide. But in this case, it isn't easy to include an iPhone mini SE like 320px. Rather, it is better to work based on the narrowest width size and stretch it. The lemonade team sets the breakpoint at 600px, and the default size of Figma is 360px. Because it’s Android standard, and it’s neat when you divide by 4px.
19. 8px? Why work in multiples of 4?
The original file was working on a 5px system. If we subtract 15px of the side margins from 360, we get a variable width of 330px. 5px is convenient for 375px screens, but it has its problems.
The 5px system generates odd numbers because it can’t afford smaller sizes. As a result, even numbers were used, and the rules were lost. I also can’t bring this issue to the new service, so I investigated an alternative unit. Some posts say that you have to work in multiples of 8px.
Why should 8px be the unit of the grid?
When extracting components, they are extracted at 0.75x, 1x, and 2x sizes. For Android screens, when extracted with 0.75x or 1.5x, components made with 5px create a problem in that the size changes in decimal units.
Also, if you set Spacing to a multiple of 8, you get a decent size contrast. The spacing of 5px will be rather wide.
After checking several issues, FastOne maintains the 4px unit system. This was simple and clear, making it convenient to correct errors.
20. Plugin recommendation.
Paid Plugin
- Design System Organizer
This is convenient for organizing the initial Styles structure. One month's trial version is enough.
Subscription Plugin
- Icon8
Put the icon in your prototype. Save an hour or more for $13/month.
Free Plugins
- Styler : You can create 100 styles at once. If you name the layouts according to the rules using “ / “ and use this plugin, you can update 100 at once. If it weren’t for Styler, I’d be fixing, contrasting, and reddening my eyes all night long.
- Similayer : Gathers the same Radius, Color, Master Component, Stroke, Font Family, and more! Try this plugin to find rules in your messy files! It will be a reliable assistant.
Note: It slows down as the file gets bigger. - Typescales : Use them to find the most beautiful size variations. From body to the header, you can set it up as your desired ratio.
- Zeplin : A must-have plugin for communicating with developers!
- Breakpoints : From PC to tablet and to mobile. Would you like to test a responsive screen? Check it out with this plugin!
- Find and Replace: This is useful when you need to replace all specific words according to your service policy. For example, I decided to change all ‘Classes’ to ‘Lessons’. If you find and replace all of them one by one, errors are unavoidable! However, you can change the characters of the text at once. Anyway, check it out again :)
21. How do I design a master page, a master component that changes all screens when I change one?
The structure of Figma was designed based on the following requirements.
- All master components should be located on the “Master component page”.
- Do not copy and paste common changes in each Child, but do it in Parents(Master).
- Sending easily with Zeplin: Create a page that collects extractable frame types.
- Make the library easy to use. Separate brand guidelines and master components.
- Don’t get bogged down in organizing when generating ideas: Create and use a Playground page.
- Rejected proposals should be able to be viewed without recovery: they are stored as a Backlog on the History page.
- Guidelines for using images should be convenient to share with other teams: Collect them on the Image Guidelines page.
22. Should we use Zeplin?
You can see the code in Figma's Inspect. You can see the designer’s work in real-time, and you can share your opinion in the comments. Should I still choose Zeplin?
Disadvantages of Figma for a hand-off
- Developers need to learn how to use Figma. How to view pages, how to find connected master components.
- Incomplete pages and even screens in the ideation stage are all exposed to developers.
- Each time you add Edit permission, you are charged per developer account.
Advantages of Zeplin for a hand-off
- Page search is easy.
- The completed page and the in-progress page are divided.
- Only the version per page can be checked.
- You can check the pages where the master component is used.
- Style guides are available for colours, text styles, spacing, and components.
- Comments can be used as screen feature specification documents.
Figma uses design + planning as a space to ideate, communicate, and design. In Zeplin, we hand off the information we need to implement. Avoid chaos when planning, design, and development come together.
Separate communication spaces as needed.
23. How to use the style guide in Zeplin?
You can select a component and send it to the Styleguide in Figma. You can manage Color, Text Style, Spacing, and Components in the style guide of Zeplin.
How about applying the hover color of User Type A’s Primary to the button?
Remembering all colour values or text attributes is difficult, so you can refer to the style guide and collaborate with your team.
In Figma, it is not possible to check which page a component is connected to. In Zeplin, you can collectively see which page each master component is connected to.
It is also useful for changing the entire user interface style.
24. Naming system in Zeplin.
Our team uses 0.0.0+pagename as the default system.
The meaning of the first, second, and third digits is as follows.
- First : The navigation pages are different.
- Second : When a feature change occurs within one page and the screens look different but are still in the same place.
- Third : When text,image changes.
Divide the screen like this. The default screen, PC screen, does not add anything in front of the 0.0.0 number. Append m_ to the Mobile screen. The tablet screen is marked with t_.
Epilogue
People easily get caught up in the mold. This is true for designers, art directors, copywriters, and entrepreneurs alike. Your field of vision narrows and you lock yourself up in something reasonable or seemingly reasonable. When you hear that you have to ‘must’ do this, you will eventually come to realize that you didn’t have to ‘must’ do it.
What a designer must do is to be as free as possible from the prejudices and stereotypes that many designers fall into. And that is also the role of the designer. Clear your mind, never settle for the mundane, and always be ready to play, experiment, change and transform. — Alvin Lustig, 1954 <What is a Designer>
24 answers were a hidden secret 1 year ago. However, many of them are known now. While translating the article, I was reminded of the better solutions that I have found since the 2021 summer.
References
- Lyft Design System :
Why use a design system? Documentation, Design Consistency, Sketch, Github.
I learned how to label the master component through the images in the post.
Writer :
박상은 Sang-eun Park (Sanni)
A designer who hates repetitive work. I want to secure as much creative time as possible for ideas. Until the day AI appears, let’s use all the good features to save time.
