I’ve been around digital design software since Macromedia Fireworks was a thing — yes really that long! I can hear Gen Z hurriedly googling now what (and even who) that is. These were also times when we compromised the user’s experience on the web, by designing for digital software like Photoshop, that were definitely not intended for such purposes. But this software was the best fit we had.
Thankfully since then, design tools have exploded in capability where bridging the gap between design teams and development teams is closer than ever. I was a huge advocate for Sketch — I still am — but for me, the recent advances in Figma really push it to the forefront of tools I gravitate towards for digital design.
Just last week I was lucky to virtually attend the “Figma Auto Layout Masterclass” Smashing Workshop by Christine Vallaure. It gave me a chance to brush up on skills I already had, learn a few new handy tips and be amongst a great community. Not least, for such an important cause with all proceeds from the workshop being donated to humanitarian aid in Ukraine. It was all-around good feels from this workshop.
So, with a post workshop vibe still present, I thought I’d highlight four points covered that are things I find especially useful when working in Figma.
Auto layoutpermalink
Auto layout is an important Figma feature that allows you to create flexible, responsive designs by automating the resizing and repositioning of elements. It is a property you can add to your frames or components. Once applied, content changes to grow to fill or shrink to fit the container and generally reflow as the frame is modified. This is much more like the web, which is the medium we are designing for in the studio.
Auto layout options enable you to define rules for how elements should be arranged, such as their spacing and alignment.
To apply auto layout, select your frame or group, then hit shift + a, or you can right-click on the frame or group and select ‘Add Auto layout’.
You can also find this along with the other applicable options in the right sidebar:
Figma auto layout options in the sidebar
Absolute positioningpermalink
A neat feature with auto layout is the ability to add absolute positioning to an element, a concept developers are very familiar with. But in practical terms this means whilst other elements adjust their positions relatively, the fixed element remains in one fixed position and breaks out of the expected content flow.
This is especially useful for adding UI elements such as flags or badges, or even arrows for tooltips.
To use absolute positioning, select your element, go to the frame panel and click on the ‘Absolute Position’ button highlighted below:
Figma absolute positioning properties
Setting a minimum widthpermalink
Ok, I guess this is more of a hack, but there are scenarios when using auto layout where you would like the element to resize with content, but also maintain a minimum width, should the content fall below a certain limit. For example, a button where you want to maintain a certain touch target for usability.
This minimum width hack uses a zero height frame to effectively add an invisible spacer element to your auto layout. Now when content is added the frame will grow but will never shrink below the width of the invisible spacer, adding the appropriate constraint intended.
A zero height frame hack
Slots componentspermalink
This concept isn’t anything new but it is a really interesting approach for creating placeholders or containers within a component, that allows other elements to be added or replaced dynamically.
Slots are intentionally left empty so that they can be replaced with elements such as images, text, or icons, without having to modify the original component itself. This can be particularly useful for creating flexible and reusable design systems where components can be customised and adapted for different use-cases without having to recreate them from scratch.
A Figma slot component
Further readingpermalink
Figma just this week released a number of “Little Big Updates” which include an exciting bunch of new features I can’t wait to try.
Check them out here.