Getting into design systems

Ask the community
1

I have some questions for the Figma pros:

  1. What do I have to think of, befor I start creating the design system?
  2. What are the best components to start with, based on atomic design?
  3. What are best solution for multi brands? Token or using master components?
  4. Working with master components, because Ive got 4 brands, Is it right, that I create the master component, copy the child from this component, change color, font from it and create out of this component a new component for brand?
  5. How to add and use a icon font in Figma?
2

Hey Frederick,

  1. This might help because there are a lot of things that you could think of, even things that are not directly design related:
    Build a Design System Collection - Playbook

  2. Start with creating overall styles, e.g. the color palette, typography (headlines, paragraph text), spacing (recurring values, maybe spacer components), grid / layout styles, shadows / elevation styles and iconography (icon set).
    As your project grows you’ll always improve the basic styles. Don’t expect to nail all of that on first try before you start creating components.

Components you’ll need almost in every project:
Buttons, Links, Logo, Header, Footer, Cards, Images (pro tip: define image variants recurring aspect ratios), Input, Select, Checkbox, Radio Button, Switch Toggles etc.

  1. Not sure… maybe work with different files that are connected libraries? Tokens sound like a good solution though.

  2. Its quite work intensive if you create a lot of instances you have to maintain. You could work out your basic component structures, variants and component properties (such as states, sizes, icon yes/no, icon position etc.) and create new components based on that and adapt them to your brand style. But keep in mind they no longer have any interconnection and are separate components. So if you want to change things you’ll have to change multiple components instead of just one.

  3. Maybe this helps: https://help.figma.com/hc/en-us/articles/360040449513-Add-icons-to-text-layers-with-icon-fonts
    However I recommend using icons as vector images / svg and using Icon components.
    Due to bugs its quite tricky though because there are certain things to keep in mind.
    To keep it short: if you want interactive color changes in prototypes with icons (e.g. link hover) every icon you use there has to follow these rules:
    same exact layer structure, same layer naming (except component name), don’t mix fill and stroke icons (outline strokes to have fills only).

Many public design systems exist that you can study and learn from. Some even have public figma files:

Those are good resources as well:

1 Like