Designs systems the 2021 edition
Two years older and ever so wiser. Two years ago we (Inktrap) undertook the task of creating a design system from one of our longest-standing clients, an outdated design system that needed a pinch of TLC (not the girl group).
Undertaking this project was no small feat, migrating a whole product into new software whilst still iterating and refactoring the designs. This effort took months of work and thought power to achieve. You can read this article below about how we tackled that and created the design system here:
inktrap.co.uk/insights/design-file-to-design-system-a-practical-guide
Since that article was composed, how we create design systems has evolved. Our entire process has been redefined and refined, providing us with the capability to design, and manage more extensive projects with ease.
Figma
Figma has been a blessing for the world of design, since investing time learning how to use the symbols in Sketch in an inventive way the switch didn't come easy. The promise of quicker updates, community involvement, and greater speeds tipped us over the edge. Figma has its moments but what app doesn't.
Now fast forward to two years later and we have a whole library of design systems under our belt, some built from nothing, a few created after a project was completed and others started halfway through a project, here is our wisdom to give you an insight to our way of working and maybe even inspire you.
The power of components, variants, and auto-layout
Everything should be a component.
Yes, everything, a bold statement but listen to our experience before taking judgement.
Working on more complex digital products that successfully reached Figma's memory limit (yes that is a thing) made us realise that everything can and should be a component or variant of a component, not just the elements on a page but the pages themselves. Once we started to do this, we saw the impact this has straight away.
Creating complex flows of 30+ pages, no longer required days to create and manage, no more tedious, time-consuming work updating those same page layouts manually.
How we manage those screens is as follows:
Create the main screen → Content on this screen is a component → Turn this into a component → duplicate this page and update the content component for each screen.
Now when it comes to editing, you just need to change that initial component screen and the rest follows suit.
To organise or not to organise
Spend that time organising. Organisation is key if you want to grow a digital product effectively, whilst maintaining high design standards. The ability to quickly find components and styles, then iterate and evolve is a key part of any system.
File organisation
We start by setting up the files based on the type of project.
At a minimum this will consist of:
- Design file + component library file
Other variations of this are:
- Design file + component library + brand file
- WIP design file + build ready design file + component library + brand file
You get the point, we structure our project based on the projects objectives and it's potential to grow, this way we mitigate the amount of risk taken by doing more or less setup work than is necessary. Doing it this way also makes it extremely easy to scale your digital project if the scope changes partway through.
Component organisation
The components side panel in Figma isn't the friendliest place to be, always check to see if your current file is using any components outside of the projects library, there's a high chance it is. Using a stray component is an easy and common mistake, as it's hard to differentiate which component belongs to which library (especially if you are searching for something) and easy to drag a component from another sidebar into your file.
Having a separate component file open makes it easy for you to go through and find what you need and copy and paste it into your design file. It also makes it so much easier to see what already exists and if you need to create a new variant.
Library = High Maintenance
No one said this was easy, but it gets easier. At the start of your brand-new design system, it looks as if everything you do ends up spawning a new component for the grand library. This becomes easier as time goes on as you have a larger repository of components to reach from.
At the start, it can feel like a slog - but it pays off.
Maintenance of this system will comfort your OCD side. A thankless task, but here are a few ways you can speed up this process.
Style Organiser
Style Organiser is a great plugin to find those pesky unlinked styles, it scans your page and finds anything that isn't linked to a style.
Style Lens
Style Lens is another plugin for finding styles that shouldn't be there, I'll let the plugin speak for itself.
Clean Document
Clean Document, the name says it all. Find those hidden unused components, remove single folders, and rename layers this plugin does it all.
Instance Finder
Not sure where a rogue component is used? Instance finder is the one for you.
Swapping Libraries
A feature that deserves to be in the spotlight evermore. The idea is a simple one, library A swaps with library B. What we also found is this can be used to completely change a product.
Consider this, your client has a digital product that is planned to be white-labelled and would like to see what the product looks like using their client's branding (colours, font, imagery) you can use swap libraries to do this. Set up a brand library that feeds your components, duplicates the library, changes the styling and then you can swap between them at will. Just remember any updates in one library would need to be reflected in the other.
Swap style and component libraries
Need a helping hand?
Would you like help creating or organising your digital product’s design system? Book a call with James to talk through your current challenged and learn more about how we can help.
Let's get started
Chat with James
Book a free discovery call with our co-founder to see if we’re a good match for your requirements.