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!

When and when not to use Components in Figma

This lesson is exclusive to members

Course contents

Questions

1
1
1

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

Hello everyone, let's talk about... when you should make components, when you shouldn't... and some of the quirky things to do with components when you're making them. Let's start by making this into a component because we--  these are two separate auto layouts, you can see them over here... the little icon is not our lovely waffle shape, or these diamonds... so we're going to convert it, the first thing that's going to happen...

it's going to be kind of weird, watch this... I've got it selected, I'm going to use my shortcut... which is 'Command Option K' on a Mac, 'Ctrl Alt K' on a PC... and click that, and it's going to convert it into our component, great... what happened over here? It spat out all of these internal components...

so these were inside my auto layout, it went, hey, you can't be inside of here... so they spat them out and left instances of those components inside... let's have a look... so let's undo it and have a little breakdown... just so you get an idea what's happening. So inside of here are these, these are my main components...

these rule all the other components on all the other options... and it is best practice not to just leave them on page 1, a lot of people do... and they can work... the trouble is, is that we can't have these main components... that control all of these, inside another main component... so when you make it, use your shortcut...

remember, 'Command Option K' on a Mac, 'Ctrl Option, sorry, 'Ctrl Alt K' on PC... it goes, you can't be in here, and spits them out over here... and we've got these components going on over here... and they're not even inside of this frame just kind of hanging out underneath it. So what we can do is, that's fine, like totally fine... let's collapse these up, I'm going to grab them all...

and turn the eyeball on, on this one... because we turned it off before, grab them all... and with them selected I'm going to just move them over here... let's zoom in on them a little bit... if you've got them selected, remember, you can hit 'Shift 2'... and it will like jump to what you've got selected...

and we're going to use this 'Tidy Up', just because tidy up is awesome... did you notice before, when up here I couldn't do tidy up... because the icon doesn't fit... so you've got to zoom in, here it is... you just got to be in a zoom level where this thing fits... and just do them nicely, like that, great.

So that might happen to you, and you might not even notice... you'll end up with weird stuff kind of hiding under other layers... and it's a bit of a problem... but hey, we worked it out. The other thing is that we're not going to leave this here either... because, on the first frame, you can...

I don't imagine I'm going to put this into another component, but I might do... so it's just good practice to drag it off over here... holding down my 'Option' key on a Mac, 'Alt' key on a PC... click, hold, and drag, and just move it over here... and what I've got is, actually, let's just drag the whole-- don't drag that... let's drag the actual icon itself.

So I'm going to keep my main component over here, and let's keep an instance... on my first Artboard, there we go... he's now a component, this one here needs to get switched out... they all need to be the instances, and because we've got the setup sweet... oh, we should be able to just go, you, look at that, oh, good... you can see here, this one is set up to Auto, so is this one...

all controlled nicely by our main component over here, we got it. Now the question of when to make components... is there's no like specific rule... when you're at your kind of initial design stage... and you're just kind of like messing things around... you don't need components, it's not until you get that second frame...

and especially, for things like buttons and any icons... they should always be components, because you're going to reuse them... but like me, you'll end up doing stuff where... you kind of like, make, you know, make a little card here... and you end up duplicating it instead of making components... and then there is nothing controlling them all...

so you've got to go through and redo everything... or at least adjust every single one... so you end up bumping into, when you need components. Last thing about components is that... when you're storing your main components off to the side... often could be on another page, when you've got a slightly large document...

I keep them on the same page when the design is quite small... there's a lot of messing around, I want to go back to the main components a lot... so I just pop them over the side here, but when you've got them over the side... it's really important to put them inside of a, kind of a placeholder frame... so the 'F' key for Frame tool, and I'm just going to put them on this... I'm probably going to make it a different color...

just so I can see the contrast of the white... why are they inside there? Mainly so-- let's bring this out here... so it's not inside of a parent frame... just hanging out by himself, the main component... there's nothing over here that you can set the constraints...

the constraints are-- let's click on this one... because it's inside of my phone frame... it says, I can set the constraints to the top or the left... in my case, probably the bottom left... because I want it to stick down to the bottom of this frame... means, when I adjust this one, adjust the parent frame...

can you see, it sticks to the bottom, perfect... but I want to do that for the main one, so it sets the default... so every time I drag one out I have to change it... but over here, look, I can't do that, ah, but when it's inside, oh, don't do that... drag the name, when it's inside this, can you see, the constraints appear... because it's inside of a parent frame, even just like a place holder.

I'm not using it for anything else other than to say, that is it... so that when I drag new ones out it's got the default of bottom and left... there you go. Main components can't be inside other main components... and it's handy to have them all inside of a placeholder frame... even if it's on another page, just so you can set things like your constraints...

oh, one last tip about it as well, is that... you can't delete things in components... so if I go into here, and before... remember, we deleted something, it went away from in here... if I hit my 'Del' button... the nice thing about a component is, can you see the eyeball, just turned off...

let's move this over so you can see... so I went 'Del' on my keyboard, goodbye, it just turned the eyeball on and off. So that's the cool thing about components, is that... you can't delete stuff... if you want to delete it you've got to go back to the main component... and then delete it from here.

So making our elements that we're building a little bit more resilient... and making sure, when other people are using them... we're giving them to other members of staff... they're not wrecking it, and completely removing bits... they're just turning the eyeball on and off... there we go, that became a little longer than I thought...

we're just going to turn that into a component... there we go, I hope you learned something, next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025