If you're new to Figma, then you're probably discovering all the amazing things it can do. It's super powerful and combines design, prototyping and collaboration in one package. Perfect for the chaotic world of UX and product design.  

One of my favourite features is Figma's ability to create a design system that can power all of your designs going forward.

Figma design system benefits

The old way of working went something like this. You have a blue button that you use on 30 pages in one of your prototypes. Suddenly the boss says, "I don't like the colour, can we change it to purple?". You would have to go in to each one of your pages and update the colour... At least 30 times. Painful. I've been there.

With a Figma design system you can centralise things like colours so you have one master style. That style can then be used in all of your designs. If the boss wants to change the colour, you only have to update that one master style, and like magic all linked styles will update too!

A design system isn't limited to only colours though. You can add all sorts of cool things in there like typography,  iconography, grid layouts, drop shadows and user interface components. All controlled from one central location.  

Atomic design

As you go deeper down the design system rabbit hole you can start leveraging the Atomic Design methodology with components. This methodology was put together by a guy named Brad Frost and basically uses chemistry terminology to categorise user interface elements. Sounds complicated doesn't it. But it's not. Brad breaks down user interfaces into atoms, molecules and organisms, each building on the previous.

I'd highly recommend checking out Brad's book, Atomic Design, (which you can read for free!).

Setting up your first Figma design system