Figma tips for developers

Around May 2020 I decided I was going to take one of the bigger jumps in my life and start building my own app — JiffyCV.

I had built a number of apps for others in the past, mostly as a means of making money, giving back to communities I care about or just as a means to learn something new but I’d never put any faith in my own ideas.

With being cooped up indoors it made sense to actually give it a shot, I have nothing to lose and potentially loads to gain so I asked a few colleagues and a neighbour for help and started fleshing out the idea.

Unfortunately, the person who was helping with the UI & design side of things had to drop out early on which meant I had to take on the design responsibilities.

Design was something I used to enjoy when I first started out as a developer but over the years become less comfortable doing it as my ‘developer brain’ took the centre stage in my career.

Finding Figma

I’ve used Sketch in the past and found it far superior to any of the Adobe tools I had come across previously, it was cheap, lightweight and had a really useful component system that allowed you to update properties of a component instance while inheriting structural changes when the master component was updated.

I had a new constraint for this project however and that was the fact that I’ve recently ditched using an Apple Mac and Sketch is only available for OS X so I had to find an alternative.

I had heard about Figma for a while so decided to have a look at that and found it shared similar properties with Sketch such as component instances and most importantly it was web based meaning I could use it on any OS.

Figma also integrates well with Storybook, a framework for building UI component libraries, something that will be important later on once development starts as we can then have the designs and final components side by side for comparison.

Here’s one I prepared earlier

Aside from the cross-platform support, another benefit that Figma has over Sketch is how easy it is to take a publicly available project that someones posted online, duplicate it into your workspace and then start using the entities in that project in your work.

I then found that there were entire design systems available for Figma at what I consider a reasonable cost, I was able to buy around 1,500 different UI components for $64 (£50-ish) which was more than enough to get me started.

This pre-made design system allowed me to copy over any of the colours, fonts and components I needed in my designs and build my own design system for my app with ease, which is important when you’re also wearing multiple hats in a project.

Tips for Developers

Here are a few things that I’ve learned since I’ve started using Figma.

Separation of concerns

When working on designs it can be tempting to create new components and leave the master component (this is the original version) in that page.

However, if you add a separate page just for components you can create a space that not only holds all your master components but allows you to group them for ease of finding and you can iterate over a number of ideas easier as they’re all in one place.

Additionally, if you move items in a group under a frame you can then use the URL of this frame for us with integrations such as the Storybook Figma Addon which shows the group of components inside Storybook.

Composition over Inheritance

Figma has a very robust component system; the colours, fonts and component instances can all be swapped for their siblings in the component hierarchy.

You create this component hierarchy by adding forward slashes to the names of your entities, so Buttons/Filled/Hover and Buttons/Filled/Pressed both sit under the same Buttons/Filled grouping and you can then use the ‘Swap Instance’ option to change the component instance, while still keeping the overridden properties.

If you follow atomic design principles and create objects of the following concerns:

• Atom — The smallest UI element such as an input
• Molecule — A collection of Atoms such as a form input (input, label, error message)
• Organism — A collection of Molecules and Atoms such as a form (form inputs, button etc)

Then this hierarchy becomes easier to create as you have a clear scope of what is considered a meaningful change at each level of concerns.

Instance swapping speeds up your workflow immensely and if you follow the atomic design principles when designing your UI you can easily create a number of molecule and organism permutations just by copying an instance, detaching it, changing the composition of the components and creating a new component.

Don’t Repeat Yourself

One of the harder things to keep under control as you’re iterating organically over different designs is the number of colour, effect and text styles that are being created.

By consolidating your styles using Figma’s style library tooling you can make sure that every definition of that colour, text or effect are linked to a single pointer for that style, which means any changes to that pointer updates every reference instantaneously.

This is very useful if you find that there’s not enough contrast in your choice of colour or font size in order to meet WCAG accessibility guidelines and these styles can also be grouped making it easier to document their intent.

Naming things

It’s normally hard to name things in programming but in Figma it’s relatively straight forward, as previously mentioned you can use the name to build hierarchies but naming things correctly can also save you time.

When building prototypes if you prefix your frame names with a letter for the order they would appear in the flow then when you go to find that frame in order to link to it you’ll find your job is far easier.

The prototyping frame list is alphabetically ordered which means that prefixing with a number is less ideal (as 11 will follow 1).

Summary

Figma, much like any tool, will only allow you to get the most out of it when you learn the patterns to follow to make your life easier.

Since using Figma to build my app’s prototype and using that to carry out User Testing I feel more confident in my design skills, it’s breaking down a lot of the mental barriers that I had previously around doing design as I had always felt I didn’t have the knack for it.

If there are any patterns you’ve come across while using Figma please leave a comment as I’d be really learning those.