available

Interested in working together? Let’s chat.

Let’s chat.

contact
contact
about
about

Design systems for product designers: Building better components

Design systems for product designers: Building better components

in this article

what is a design system

Design systems are collections of colours, typography, icons, styles, components, and guidelines that are used to create consistent and cohesive visual experiences across a range of products and platforms.

Design systems can improve collaboration and communication among designers, developers, and other stakeholders, while also making it easier to maintain and update design assets over time.

do you need one

If you’re working on a small project, or are the sole designer, a design system may not be necessary. However, if you’re working in a large team, or you’re designing for a company or brand and a consistent visual identity is essential, a design system can be a great benefit. 

Ultimately, the decision to use a design system should be weighed up based on the additional scope needed to build out and maintain the system.

bottom-sheet
settings
profile
onboarding
login
splash

methodologies

There are lots of methodologies to choose from when building a design system, each with their own benefits and drawbacks. 

I tend to opt for Atomic design by Brad Frost. Inspired by chemistry it treats elements that cannot be broken down further, think buttons or icons, as atoms. The thinking is, combining these elements together creates larger components, like atoms forming molecules in nature.

By breaking down components into their basic elements you can increase workflow and gain greater flexibility, scalability, and consistency from your design system.

Read more about Brad Frost’s Atomic design here. 

creating a design system

best practices

  • Follow the Atomic design methodology and break components into atoms.
  • Organise components with / naming.
  • Consider and organise component variables at the appropriate atomic level.
  • Make components responsive with auto-layout and ensure layout consistency.
  • Keep layers simple to make components more flexible and reusable.

You can build out and store your design system in one central Figma file and include this document in any subsequent file.

file setup

  1. Start by creating a new Figma file ⌘N and name it “Design system”
  2. Create a new frame F and rename it “atoms”

colours

  1. On the atoms frame create a new frame F and rename it swatch
  2. In Figma’s right sidebar, find Fill properties and press the ＋
  3. Figma will add a colour fill to the frame
  4. In the Fill properties click the ❏
  5. Change the colour’s hex to #000000
  6. Click the ∷ at the top right of the Fill properties
  7. Click the ＋ and add in [name field] “monos/black 100”
  8. Click Create style

Build out the rest of your design systems colours by repeating the steps above.

Tip: You can organise styles and components using the / when naming

typography

  1. Add a new text box T and type “large title”
  2. In Figma’s right sidebar find Text properties 
  3. Update the size to 34px
  4. Update the line height to 41px
  5. Click the ∷ at the top right of the Text properties
  6. Click the ＋ and add in [name field] “iOS/large title”
  7. Click Create style
  8. Delete the text element

Great we’ve just defined a large title with a size and line height. Now whenever we create a new text element we can link it with this style.

Note: Not all properties are saved to text styles like colour for instance, you can find all the properties Figma saves when creating text styles here.

Note: The font size and line height we defined is from Apples Human Design Language. You can continue adding styles to match these by finding all their typography values here.

linking styles

  1. Add a new text box T and type “colour”
  2. Click the ∷ at the top right of the Text properties
  3. Select the iOS/large title from the list
  4. Click the ∷ at the top right of the Fill properties
  5. Select the monos/black 100 style

Defining styles and associating them  elements allows you to have consistency across designs as well as being super quick to update from a central location.

components

Let’s create a simple title atom.

  1. Select the “colour” text element
  2. Rename the layer to “title”
  3. In Figma’s right sidebar find Text properties and click the …
  4. Change Resizing to Auto height ≡
  5. Resize the width to 295px
  6. Click create component ❖ or ⌥⌘K
  7. In Figma’s right sidebar find Fill properties
  8. Click － to delete the fill Figma adds by default
Sweet, we’ve just made our first styled and responsive atom in the design system. If you clicks Assets in Figma’s left sidebar you should see under Local Components a folder called Atoms, expanding the folder should show our title atom with the title “label”.

Let’s make another atom this time a radio button.

  1. Create a new frame F and rename it “radio”
  2. In Figma’s right sidebar constrain proportions by clicking the broken link
  3. Resize the frame’s width to 24px
  4.  In the frame add a new circle O constrain proportions and resize it to 24px
  5.  Double click the circle and delete the fill
  6. In Stroke click ∷ and select black 100
  7. Increase the stroke width to “2”
  8. Click create component ❖ or ⌥⌘K

We’ll enhance this later on for now let’s combine these two atoms into a row molecule.

  1. Create a new frame F and rename it “molecules”
  2. From your Assets drag onto the frame an instance of your title and radio atoms
  3. Select both and align along the vertical centre
  4. In Figma’s right panel find Auto Layout and click ＋ 
  5. Adjust the Horizontal space between items to 16px 
  6. Rename the Auto layout frame to “row/title“
  7. Select the radio and click ❖ to create a new component
  8. Rename the new component “row/leading”
  9. In the layers panel, select “row/title”
  10. Click create component ❖ or ⌥⌘K
  11. Double click the title and change horizontal resizing to “Fill container”

Amazing, now in our Asset panel we should have a new dropdown called “molecules/row” and a new molecule called “row/title”.

Note: The leading component we made gives our components extra flexibility which we’ll look more at next with variables. As it’s not a component we want users of the design system to freely use we can hide it from them by right clicking it in the Assets panel and selecting “Hide when publishing”.

variables

Variables …

  1. Back on the atoms frame select the radio
  2. In Figma’s right panel find Properties and click ＋
  3. From the dropdown select variant
  4.  Under the row/title click the new  ＋
  5. In the right panel and under Current variant is a focused input field
  6. Type “Selected” and press enter
  7. Double click the “Property 1” field and change to “state”
  8. Double click the circle and hit ⌘D to duplicate
  9. Delete the new circles stroke and click ∷ under Fill and select black 100
  10. Resize the new circle to 14px
  11. Centre align the circle both horizontally and vertically 

Great we’ve just created two states for our radio button. 

using your design system

  1. Deselect everything and click ⌵ next to the files name
  2. Click Publish library…
  3. You can enter version history here
  4. Click Publish
  5. In any other file click Assets in Figma’s left sidebar
  6. Click the book icon
  7. Toggle on the “Design system” file

Once you’ve turned on your design system in a new file you’ll gain access to any styles and components saved within the design system.

Note: Any updates you make to the design system will need to be re-published using steps 1-4. Notifying any files that use the design system of changes made.

conclusion

Start with the foundations your product needs, then build reusable components from those shared styles. Keep the structure simple, test components in real layouts, and publish updates as the system develops. A useful design system should make everyday design work clearer, more consistent and easier to maintain.