- The power of components and variants
- Organisation/How I work
- The struggles of library maintenance
- Plug-ins are a necessary evil
- Swap libraries
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:
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 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.
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 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 is another plugin for finding styles that shouldn't be there, I'll let the plugin speak for itself.
Clean Document, the name says it all. Find those hidden unused components, remove single folders, and rename layers this plugin does it all.
Not sure where a rogue component is used? Instance finder is the one for you.
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.
Need a helping hand?
Would you like help creating or organising your digital product’s design system? View out contact page, email us at firstname.lastname@example.org , call us at 020 3322 8774 or book a call direct with one of our founding partners James
More like this
9 lessons learnt designing products for bigger clients
Inktrap designs products for organisations ranging from early stage startups through to some of the biggest companies in the world. We can't tell you who they are (see #3 "Serious security") but we can share some of the lessons we've learned along the way.
Wireframes: How to review and use them
Why is your design team sharing wireframes with you, and how do you review them?