Designs systems the 2021 edition - Inktrap

Designs systems the 2021 edition

Adam Ascroft
  • Nov 03, 2021
  • 6 min read
  • The power of components and variants
  • Organisation/How I work
  • The struggles of library maintenance
  • Plug-ins are a necessary evil
  • Swap libraries

Introduction

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:

https://medium.com/inktrap/metamorphosis-converting-your-design-files-into-a-design-system-63172f8c71f

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.

Figma - Style Organizer | Text Styles Added! Merge and link all color & text styles in the page: - Overall usage assessmen...

Style Lens

Style Lens is another plugin for finding styles that shouldn't be there, I'll let the plugin speak for itself.

Figma - Style Lens | Style lens surfaces all the fills, fonts, strokes, shadows, blurs, radii, and text you're using a...

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.

Figma - Clean Document | Automagically organize and clean up your Figma document. Fund my work on Figma plugins → Delete...

Instance Finder

Not sure where a rogue component is used? Instance finder is the one for you.

Figma - Instance Finder | Find all Instances of a Component used in your file. Select a single Instance or Component, and ...

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? View out contact page, email us at mailbox@inktrap.co.uk , call us at 020 3322 8774 or book a call direct with one of our founding partners James


More like this