Tiny Lesson: 3 useful Figma features

Smart selection

When you select elements which are evenly spaced, Figma recognises that these are related and allows you to adjust the spacing for all of them at once. You can also swap the position of these elements without disturbing the spacing. You can read more about smart selection on Figma here.

Colour Styles

In Figma you can save any colour as a style and apply it to fills, strokes, and text to ensure consistency throughout your designs. Any updates you make to your colour styles will be immediately reflected in your file or project, anywhere you’ve applied that style. The real-time updating means you can tweak colours and test colour combinations really fast with your actual components. This is the way that colour styles should work in a design tool, but it could also be a really cool way to help you with some specific tasks, like adjusting brand colours to meet accessibility requirements, or I could see this working really well to help with designing a themable template.

Prototype connections

If you have a component which appears on multiple pages, like a website header or footer, connections added to the master instance of that component will work in all of its instances. I think at the moment this only works if the master component is on the same page as its instances but it’s still really useful and can save a lot of time. Here's some more information on creating prototypes in Figma.

Those are just a few of the nice touches Figma has introduced that I’ve found useful. I’m really enjoying using the app – it’s a pretty exciting tool and I’m learning something new about it every day. It’s definitely my first choice design app at the moment. It’s cross-platform and there’s a free tier, so have a look, and let us know what you think.