What are design systems?
Essentially a design system is a library of elements, each of which is designed for a particular website. These elements are used often across multiple pages.
For each of our clients, we maintain a separate design system, which contains assets such as:
- Fonts
- Colours
- Styles
- Buttons,form elements
- Icons
- Tags
- Banners
- Tables
- Sidebars
- Tool tips
- Pop-ups
- Many other custom elements!
While some of our clients maintain their own Figma Design System, for others we create this when we start working with them.
Why do we use a design system?
Put simply, the two main advantages are speed and consistency.
Gone are the days of copying the hex code from the original site for a colour, or searching through multiple previous designs to find the style used for a particular icon or button style! There’s no need to recreate elements each time.
Now we simply add the design system library for a client to a new design file and all of the elements we may need are there ready to use.
This has been a game changer for how quickly we can create a new design. It also means that we ensure we are using exactly the same size, padding, style etc for each element, ensuring consistency across all designs.
Are there any drawbacks?
Initially creating a design system takes us time upfront, before we start to see benefits. However once it is in place, the time saved outweighs this.
It also takes time to maintain the design system as a site evolves – which is essential. When we declare a winning test which has a re-usable element, we ensure this is updated in the design system.
How can I learn more about Figma design systems?
Figma have some excellent YouTube tutorials.
If you are getting started in creating a Figma Design System, we’d recommend these videos:
Figma design system course – written version
Figma design system course – videos
Components are an important part of design systems as they are re-usable elements:
Creating components intro
Component properties
If you’re not using it already, the Auto-layout feature in Figma is essential too when adding in the elements – these tutorials covers everything you’ll need to know: