Mastering Components in Figma – a useful video guide

Are you a Figma user?

I’ve been looking at getting into Figma for a while now as Sketch has been (and still is) an excellent tool for me when creating designs and UI mockups. However, Figma keeps on popping up and is something I’ve started to look into and recently found a really handy video on ‘mastering components’ which will get you into using it really quickly.

Great ways of structuring your design system

I’ve worked a lot in Sketch with design systems and nested components, but one of the features in Sketch I don’t seem to use much is the ‘Auto layout’ feature and playing around in Figma this seems to be really accessible as you can apply it to groups without having to make it a component (you have to make a symbol in sketch to use that feature)

Worth a watch

If you make something a symbol in Sketch, it’s classed as a component in Figma, watch and learn how to structure design elements below (get the coffee on)

What key differences have I noticed between Figma and Sketch?

I’ll list them rather than waffle on

• When you create a ‘Symbol’ in Sketch it then lives on a ‘Symbol page’, Figma doesn’t do that, so I tend to create a ‘Components page’ and put all ‘Master components’ there.
• Apply ‘Auto layout’ to a group and / or a component. It has to be a Symbol in Sketch which means I use it less.
• Auto layout has a nice way of spacing padding between elements within a Frame (Artboard) – you can also stack it horizontally and vertically in a click.
• You can nest Frames within Frames, you can’t nested Artboards within Artboards in Sketch
• Quickly switch elements on and off in the layers panel of a component instance (feels more visible) rather than using the Inspector panel and scrolling through a list in Sketch. Auto layout will re-align elements accordingly when they become hidden in the layers panel.
• Copy an image and past it as a fill style (Alt+CMD+C) on an instance of a component shape element.
• Typographic styles don’t need a colour and alignment rule. You can apply a single colour style to anything, fonts, borders, fills. There has to be 3 different styles for this in Sketch.
• The prototyping section is pretty easy to use and integrates with your designs, you can click on any element of a component instance to make it clickable rather than a fake hotspot with Sketch and Invsion.
• Smart animate is a cool feature to enhance your prototype, use this with standard transitions like ‘Push Left’.
• Copy and paste the ‘share link’ into your browser on your iPhone and see live prototype updates as you go (not sure how this works when sharing with a client).
• One file for all, you don’t even need the software as it’s in browser. Login anywhere and make an amend.

What are your thoughts?

Have I missed anything off from the list? These are my initial observations, it’d be great to hear how you use Figma, let me know some of your tips and tricks ?