Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Designing in Figma with Auto Spacing in Auto Layouts

This lesson is exclusive to members

Course contents

Questions

1
1
8
2
1
10
1
0
1
0
0
2
0

Course info

177 lessons / 16 hours 46 quiz questions 21 projects Certificate of achievement

Overview

Hi there, aspiring Figma enthusiasts! Are you ready to embark on an exhilarating journey with me, Dan Scott, as we unlock the full potential of our Figma skills in the dazzling realm of UX/UI Design using Figma Advanced?

Try Figma for free by clicking here.

This course is tailor-made for those who have already mastered the fundamental principles of UI/UX Design using Figma. If you've triumphed over my Figma Essentials course or have a sneaking suspicion that there's a treasure trove of unexplored tools, tips, workflows, and updates awaiting your discovery, then look no further! This course is your golden ticket to taking your UI/UX prowess to the next level.

Together, we'll start by delving into the depths of multilevel nested autolayouts, and unravel the secrets used by UX professionals by learning:
- Workflow techniques, managing design assets, styles, components, grid and column layouts like true virtuosos.
- Learn how to use Variables and put them to work creating even more complete prototypes.
- Use variables to make Light & Dark Modes + Compact & Comfortable spacing versions of your components. 
- You’ll then take your new knowledge of variables to understand and create your own Design Tokens. 
  • - Unleashing the magic of advanced animation techniques, captivating users with animated background gradients and Houdini Text.
  • - Harness the power of Lottie animation files, breathing life into your designs.
  • - Crafting responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.
  • - Unleashing the full potential of powerful images & video masking techniques, amplifying the visual impact of your creations.
  • - Mastering advanced typography features, transforming words into captivating works of art.
  • - Embracing the realm of AI, infusing your process with its genius to elevate your skills as a UX designer.
  • - Elevate your prototyping game, conducting user tests with finesse using advanced techniques.
  • - Unveiling sticky scroll buttons that stack, animated anchor points and booleans, and a host of other captivating effects.
  • - Creating enchanting dropdown menus, hover grow effects for images, and expanding search bars.
  • - Discovering the right accessibility tools & techniques, ensuring inclusivity and usability for all users.
  • - Becoming a variant boss, expertly taming unwieldy variants to just 1 or 2.
  • - Unveiling the secrets of seamless collaboration with designers, developers, and stakeholders.
  • - Mastering the art of exporting production-ready assets, bringing your designs to life beyond the realm of Figma.
  • - Unearthing professional workflow tricks & shortcuts, saving you precious time and skyrocketing your efficiency.
  • - Plus much more exciting advanced Figma goodness along the way!

As you journey through this course, you'll acquire the skills wielded by UX professionals, gaining a profound understanding of the UX Design industry. From concept to a highly polished finish, you'll confidently manage your own UX projects ideal for your portfolio.

Throughout the course, I'll assign assignments and projects that nurture your skills and empower you to create your very own unique UX design masterpiece for your portfolio. Don’t worry if this all seems overwhelmingly advanced right now, because the BYOL crew stands ready to support and guide you, ensuring your questions get answered.

It's time to embrace the call to upgrade yourself and transcend from being a good UX Designer to a bona fide Figma UX Superhero! Unlock your potential, save the day, and let your design prowess soar!

Requirements:

- A copy of Figma (a free plan is available on the Figma website).
  • - Basic knowledge of Figma is required. I recommend watching my Figma Essentials course prior to embarking on this epic adventure.

Who this course is for:

  • - UX/UI adventurers who already have a basic understanding of Figma.
  • - Self-taught Figma enthusiasts yearning for structured guidance.
  • - Graduates of my Figma Essentials Course, hungry for more knowledge and skills.
  • - Visionaries who have developed their own unique Figma approach but crave exploration of the vast universe of tools, updates, and time-saving techniques.

What you'll learn:

  • - Diving deep into multi level nested autolayouts. 
  • - Robust components that are easy to update and hard to break. 
  • - Component properties. 
- Variables
- Design Tokens
- Advanced Prototyping using Variables
  • - Learn Workflow tips and tricks for managing your design assets, styles, components, grid and column layouts.
  • - Advanced animation techniques
  • - Animated Background gradients. 
  • - Houdini Text
  • - Animate along a path in Figma
  • - How to add Lottie animation files in Figma
  • - Build responsive elements ready for any device size.
  • - The best shortcuts & plugins to make you a more efficient UX designer.
  • - Absolute Positioning of Autolayouts. 
  • - Powerful images & video masking techniques. 
  • - Advanced typography features. 
  • - Learn to use AI in your process to make you a better UX designer. 
  • - Advanced prototyping techniques to level up your user tests. 
  • - Make prototypes better and faster using tricks & shortcuts. 
  • - Sticky scroll buttons that stack. 
  • - Video playback controls. 
  • - Animated anchor points and booleans.
  • - Create a Dropdown menu
  • - Create a hover grow effect for images.
  • - Create and expanding Search Bar 
  • - Learn the right accessibility tools & techniques  
  • - Become a variant boss. Cutting down those 100 variants to just 1 or 2. 
  • - Learn the best ways to work with other designers, developers and stakeholders. 
  • - Build a UX project from beginning to end ready for your portfolio.
  • - Export production ready assets.
  • - Learn professional workflow tricks & shortcuts.
  • - Forum support from me and the rest of the BYOL crew.
  • - All the techniques used by UX professionals
  • - 160 videos of detailed Figma Advanced Content.
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Transcript

 Hi everyone, we're going to look at doing the auto spacing... between these different icons... because at the moment we've got something that is quite manual... the problem with it is, if we turn on other icons things don't reflow... well, don't reflow very well, everything kind of spills over... whereas this one here, now that we've got the auto setting going...

when we turn on our little Ticket, you see, everything reflows nicely... we've still got all our paddings on the left and right... everything is nice and responsive. We'll also do a little bit at the end, after we learn auto... just to add some kind of like... rounded corners and interface kind of color in the background...

a little drop shadow here, on our Auto layout, for no good reason... other than to actually make something during this course... rather than just learning individual tools, let's make something together. To just set this to Auto, instead of a fixed space between... like 98 that I've got... all you do is, with it selected, over here, under Auto Layout...

go to the three little dots... and let's change the spacing mode from Packed... which means they're squeezing together as tightly as they can... given the size of the icon and the fixed dimension that I gave them in between... what you can say is, like, don't be Packed, be 'Space Between'... can you see, just above my cursor, there it says Auto...

so it's going to automatically space them out... and because there's no padding on the outside it just spreads out... doing exactly what I want it to do... just need little bit of padding either side. So I can hover above it... if these little pink lines don't appear it means you probably zoomed out too far...

they just don't appear when you're zoomed out... you're going to be zoomed in close enough so that it can see... it's got enough room, real estate to kind of actually show the little pink lines... what I'm going to do is I'm going to drag in some padding... you can do one side at a time, that's fine... or you can - undo, undo.

- hold down the 'Option' key on a Mac... 'Alt' key on a PC, and it does them both at the same time, and drag them in... I've dragged mine in 48, you drag in yours the way you want... but the cool thing about it, once I've set my margin, these, is just auto... can you see, they just resized to fit... and that means now, if I add it over here, oh...

drag it across, holding down 'Alt', or 'Option'... watch this, if I drag the corner now, can you see... it leaves the same margin because I've decided that... I say margin quite a bit when I mean padding... padding in Figma, Dan. So I've still got the exact same...

padding on the outside, which I want for consistency across different apps... I've got a bit more space though, and look, auto goes and fills that space... why is that good, right now you'd be like, "Eh, I can do that"... it's when you have to turn on and off different parts... and get things to reflow. So at the moment, down here, watch this, is the old one with the fixed spacing...

if I turn on my Eyeball, watch this, turn it on, it gets wrecked... because of my fixed spacing... it tries to force all of that to happen... and it's just not enough room, whereas if it's Auto... I can say - where it is? - I can say, you turn the eyeball on my Ticket Sold, look at that...

everything reflows, Auto is awesome. I want a specific padding from the edge for consistency... but these are allowed to jiggle about. Now what I tend to do do is, not use the long way... the Spacing Mode, Packed, Space Between is fine... you can do it a quicker way and just replace the number in here...

the horizontal space between items... space between our icons, just double click and just type in "Auto"... it's generally quicker and easier... you can kind of see the icon change, look... before, after, before, oh, before, after... you can actually type it in down here as well, watch this, if I go 'undo'...

you can click it once, and you see, it says 113... type in "Auto"... we used our shortcut, remember, 'Alt', or 'Option' to drag both sides at once... or you can type it in over here, you can say... actually, left and right is going to be "48"... or maybe "56", depending on how much padding you want.

Next thing I want to do is, I want to style the frame... this is totally nothing to do with the auto layout... we just need to do this before we go away, because... I find that working in a rectangle is fine, but if you look at your phone... you'll notice that you don't have a rectangle... it's rectangle-ish with rounded corners...

so I'm going to do that to our frame before we move on... you can skip ahead if you don't want to make rounded corners. I'm going to click on the name iPhone 14, to click on that frame... and I'm going to say, you have a border radius of "30"... and it goes around all of it, it's more realistic for a phone... especially when you're trying to do margins and padding...

can you see, it kind of was too close to the bottom... but with the rounded corners, exceptionally too close to the bottom. So I'm going to click on my 'Auto Layout' and I want some padding from the bottom... 24, that's about right... if you are thinking, "What is about right, who makes these rules?"  You can make your own rules... depending on how much you're using the operating system...

like Android or iPhone, how much you want to mimic it... or how much you want to do your own thing... if you are looking, and you're like new to UX, and new to UI design... and you're finding a little bit tricky, you're like, "Why did he pick that?"  What I tend to do when I'm working on a component that I don't know much about... like this bottom Nav... I'll go check out the iOS documentation or the Google Android documentation...

let's look at one of them, you can look at either of them, both of them... let's have a look at this one here, so I'm using the Android one... I do a lot more design on Android because that's the phone I have... it's what I want to test on... and they have a really good documentation... Google Android call their design system, called Material...

it's at M3 at the moment, it might be M20 by the time you get to it. The nice thing about it though is... you can go to things like this, go to 'Components'... have a look through... see if you can find the name of the thing you're trying to design... and if you're new to UI design you might not even know...

you might have to go spend some time in here, go... "What the hell is a Navigation Drawer, what's a Navigation Braille?"  Some of them are easy, like I want a Navigation Bar... the cool thing about it is that it will have a lot of documentation about... how to use it, where to use it... the best thing is, can you see, there's actually a Figma design kit for this... you can open it and start copying and pasting bits out...

too good, have a read through... it's good to get your language correct... so you know you're using, you know, a Burger menu, not a Nav Sandwich... because nobody calls it that, except Dan... and you can go through and find out all sorts of stuff about spacing... how far from things should be, there's lots of good stuff in here...

how many you should fit in here, how many should not fit in there... how big they should be so that they're clickable, loads of good stuff... along with examples. Now we're doing it for Android here, you can look at the iOS, Apple's version... you can look at maybe a framework that you're using... say it's a web design that you're doing, have a look what they've done...

Bootstrap, Tailwind, WordPress... they'll all have specific kind of like documentation... about how things should, and be implemented... and you can use that for a starting point for your design. Next thing I want to do is, I've got my rounded corners... I want to make this a little bit taller...

I would like to have a little bit of padding at the top... often it's more padding at the bottom than the top... kind of think, think framed photograph or framed painting on a wall... the kind of like chin at the bottom there is more than the top... gives it kind of a nice footing foundation... and in our case keeps it away from the edge of the frame.

The other thing I want to do is I want my--  you saw at the beginning here, maybe you did... I want the background color to be... a slightly different interface color than the front here... to make this stand off a little bit... so we're just doing some basic stuff, you can skip ahead now... no more cool Auto layout stuff, more just design-ey stuff.

So I'm going to make the iPhone a particular color... so FFF is the white, F7 is what I like... and with these colors here, if you just open one... I know that the color I want is F7F7F7, on repeat... if you just type in one of them and hit 'Enter'... it will fill them all out for you and give you the color you want...

that's the color I want, kind of a darker gray... kind of like that Windows operating system background color... it's so that when I go to this Auto layout down here... and I say, I want you to have a background fill of white... you can see, there's a bit of contrast between the two, not huge... it just allows us to see the boundaries between these two...

and what I'm going to do is, actually, add a little bit of a Drop Shadow... so I'm going to say, 'Effects', I'm going to say, 'Drop Shadow'... and click on the little Sun to change it, I want it to be up a little bit... and I want it to be 0 down, and I want it to be blurry... and I want it to be, I don't know... let's have a look, 'Shift 1' to see everything, it's probably a bit strong...

so I'm going to say, you're down to 15... there we go, I want just that little subtle hint that... "Look, I'm separate from this."  So now I want to copy this frame details to this one... so I'm going to select the frame title, let's go... 'Command Option C', so it's kind of like copy, but with that extra key... on a PC it's similar, it's 'Ctrl Alt C' to copy it...

and then over here, it's those same two keys, and 'V'... and it brings through my background color, brings through all the radiuses. Now there are shortcuts, where you're like... "Man, I'm not going to remember all these, Dan"... what I find is that, the super shortcut... that everyone might know, that you might not...

I've got it selected here, I can't remember what Paste Properties is... so with it selected just hold down the 'Command', or 'Ctrl' key on a PC... and hit the forward slash, '/'... have a look at your keyboard, it's the forward slash, one that leans forward... and just type in, I don't know, "properties", you can see there... Copy and Paste Properties...

you'll learn the shortcuts, but also... it's almost just as quick just to click on these... especially if it's not a shortcut you use all the time... it's 'Command' on a Mac, 'Ctrl' on a PC, and '/'... you can get any shortcut you like... Paste Properties, I did not need it on that.

So we have run into a little problem... this has updated with a Drop Shadow and it's got a white background... this one didn't, why not? Oh, because it's not a component, components inside components... let's do that in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025