Using Figma to rapidly refine your ideas

No, you don’t need to make changes in a million places

Photo by Alvaro Reyes on Unsplash

Imagine this. You’re starting a new project and your file is a mess as you try to keep up with the ideas that are spawning in your brain. It’s chaos and you don’t even try to contain it. Eventually, the chaos starts to coalesce into some semblance of a final design.

You’re thinking about empty states, you’re thinking about user flows, you’re laying out how each of your screens will behave at different resolutions. You’re mostly happy with it. Suddenly, your colleague suggests a change you think might make it even better.

You groan internally as you realise that you now need to make that change in over a dozen different places. Or do you? Well, yeah you do. But the next time you start a new project, you can prevent this from happening by creating throwaway components to rapidly refine your ideas.

Can you change things and keep them the same?

I love components. There’s something so satisfying about making a change and seeing it propagate everywhere it needs to go. There’s no messing around with copying and pasting, and then checking to make sure it’s in the right place, only to realise that half of the elements are two pixels off where they’re meant to be.

I also love iterating on my designs. It’s incredibly freeing to open your mind and see what possibilities fall into place as your brain rapid-fires ideas all over the screen. What about this option? What happens if we try that? Let’s find out. On paper, using components AND iterating on designs don’t seem to mesh very well. It seems impossible that you can keep things the same while also quickly changing them.

But there’s a time and place where you need to change things while keeping them the same. It’s when you’re exploring how a design adapts to responsive views or different states, and the same elements are appearing on frame after frame. It’s that typo that you copied everywhere or that input that you’ve realised would be better as radio buttons instead of a checkbox.

You want to be open to refining your ideas even further, but making changes is painful. It’s not just one place that needs to be updated — the different breakpoints, the empty states and the error pages all need to be changed.

Making components work for you

After years of copying changes to a panel in multiple frames, multiple times, there came a point when I couldn’t help but think that it would be so much easier if it was a component. So I took a component that wasn’t final and designated it component v1. After getting some critique from another designer, I wanted to make some changes.

I could have edited my v1 component, but I wanted to keep it in case I decided that I liked it better. So I created v2. With only a couple of clicks, I applied v2 across several different screens in different states. Perfect. From then on, I did this with every project that I worked on. I also discovered that many of my colleagues faced the same frustrations with components, so I decided to share my approach.

How to create local ‘throwaway’ components

A quick disclaimer: this is written while designing in Figma. I’ll refer to ‘components’ and give instructions for Figma, but this general idea should also be able to be applied to other design tools.

I call them throwaway components because they don’t have a life beyond the project. You don’t need to engineer them to handle all the things. They don’t need to be anyway near as robust as a component for a shared library. They’re allowed to be messy, use fixed widths or only handle a single scenario if that’s all that you need from it.

Step 1: Identify the things to make into local components

Start thinking about creating components when you have a good idea of what the final design will look like. Typically each component will be a self-contained part of the UI, such as a section or panel, or an element that appears a lot on the same page, such as a table row or list item. It will appear across many different frames, and you’ll be wanting to keep the door open to make some changes to it.

Step 2: Make them into components

1. Select the elements that will be part of the component
2. Create a copy or move it somewhere off the side, where you can easily add additional versions.
3. Name it something sensible (this is optional)
4. Create the component (⌥⌘G)

As Figma doesn’t have a separate place for managing components — the original stays wherever it’s created — you’ll want to move the component somewhere where you can easily find it later. This can be a space on the same page. If I’m putting the final touches on a design, I might create a new page for all my local components to keep things tidy.

A note on over-engineering

Sometimes components might start to get a little more complicated. This can look like nested components, layers of auto layout, or many variants of a single component. This is not inherently a bad thing. Sometimes that extra complexity can save you a lot of time and hassle.

The trouble starts when we make things more complicated than they need to be. You might spend a lot of time fixing components when they behave ‘unexpectedly’ because it’s difficult to figure out what went wrong. You might spend a lot of time creating components to work for scenarios you don’t need to worry about.

Keep this in mind as you’re designing your components and if in doubt, aim for simplicity over complexity.

Step 3: Create variants to iterate your component

1. Select the original component
2. In the panel on the right hand side, add a variant. If you’ve already enabled variants, you’ll want to create a new property
3. Name your new variant ‘2’ (you can also consider something more memorable)
4. Make changes to 2
5. Select the surrounding purple box and rename ‘Property 1’ to ‘Version’
6. Rename the variant ‘Default’ to ‘1’
7. Go back to your designs and select an instance of the component. On the right hand side, change the version from 1 to 2
8. Repeat each time you get a new idea

If you want to make sweeping changes for all instances of your component, select any instance and go Menu > Edit > Select All with Same Instance. This selects all instances that are the same, so you can change them all at once

Figma allows you to push changes from an instance of your variant, which is helpful when you spot a mistake while you’re working on your designs. You can make the changes in the instance and push them to all components from the component overflow menu, without having to navigate to the original component.

Step 4: Feel accomplished

You can now rest easy knowing that you can easily iterate as you refine. Hopefully, you’ll now feel confident to try this in your own designs, and make components work for you.