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!

What does Expose Nested Instances do in Figma

This lesson is exclusive to members

Course contents

Questions

1
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, in this video we're going to look at... something called exposing nested instances... what is it? I'll explain it really quickly at the beginning here... then we'll make something quick-lier... take about a minute to make, kind of using existing stuff...

then in this video for the people that kind of need a little bit more understanding... we'll make something from scratch, which will take a little while... but what's the easy answer? The easy answer is this, I've got two components... this one here I have put... an instance of it inside of here, there he is, there, that text...

so I stuffed that in there, and with the exposed nested instances off... if I make an instance of this, there he is, Main component, instance... if I have it selected, the parent, can you see, I can do some things to the parent... but I can't do anything to this field text that is inside, I can't see it... unless I go, you, I go to 'Properties', and I say... 'Nested Instances', show me everything inside of it...

I've only got one thing, there we go. Now when I'm working with the instance I don't have to dive into this text... I can see, look, a few ticks, there it is, there... I can go and change it to "Typing"... kind of bubbles everything up to the top parent... so you can control it quite easily...

there you go, a really long intro but that's how it works... we'll go and make another one... then we'll do the one where we build it from scratch, for those who need it... all right, let's get started. The way this works is that you can only use it when there's a nested instance... and that nested instance needs a variant or any of the component properties...

Boolean text, any of those that we've learned... so we've got one that exists already, that we can make work... and then we'll go and make one together just to really drive it home... but I've got this card that we made earlier... inside of this card, remember, we nested, inside of it... this thing called Price, you can see it there...

and this is the Main component there, so we've stuck this in there... so it's a nested instance inside of this component set here... doesn't even have to be a component set, just a regular old component as well... and with that structure working, something nested, you can click on the parent... you can go over here, under 'Properties', you can click on this '+'... and you will see this, if there's nothing nested inside, won't be able to see it...

and you just turn it on, and you can decide when... the outside of my instance, like the parent, the wrapper is selected... why not also show the person the control for Price... because what happens, in the past is, to get to this you click on it... let's have a look, for instance... and let's move it across...

so you can see here, there's Price, that I can change... I can turn the price off, put it on... I can play with the text but I can't access that Price... I can get in there, double click go inside, there it is. So you can double click or 'Command' click... to get inside to grab the instance and change it...

but the Expose way is just nicer, let's go, let's click on you... let's click on the little 'Properties'... and under all of these, magically, this appears... and let's show it for Price. So now when somebody's working on my instance... they don't have to go, and they can see Price by the outside wrapper...

can you see all the changes for, I can change it to Horizontal... and Off, and Horizontal... good work, Dan. So you can see the nested instances, in our case it's just a variable... but you can see any of the things that we can do with component properties... it's just handier than having to dig in, especially some really kind of messy stuff.

So let's make one again, because we jump to something else... you might need a refresher or just need some little help, kind of... let's just make one together, if all that seems nice and totally understandable... you can jump out to the next video... but for the rest of us what we'll do is... I'll jump to my Components page, using 'PgUp'...

I'm going to start with this, no, this one... we made this earlier, you can design your own... I'm going to make a duplicate of it and then smoosh it to pieces... remember, earlier in the course, how to smoosh something to pieces... what I'm going to do is, I'm going to-- there's no amazing shortcut for it... so I'm going to go 'Command /', or 'Ctrl /'...

and I'm going to look for Detach... Detach Instance, we know there's a shortcut... but I want to go to the one that says, 'Detach all Nested Instances'... because it's actually quite the hierarchy going on in here... see, there's that, there's also that in there that we made. So I want to kind of smoosh it all, back to Detach...

'Detach All Nested Instances', and everything is kind of broken apart... give it a better name, I've got two input fields... this is going to be my "Input Field V2", I'm going to convert it into a component... let's add some properties to it... the high level parent stuff, then we'll make the deeper down instance. So let's add a few properties, the kind of bulk editing way...

so not variants, I'm going to add a couple of Booleans... this one is going to be "Label"... whether it's on or off, I want to make another one, 'Boolean'... to say whether the Helper text... Helper text is on, I'll just leave it, called Helper... let's do a 'Text' change...

this one here is going to be "Label"... and it's going to have the value of "Label"... what I tend to do is go "Text - Label"... that's what's going to be put in to my little text field, let's do one more... how're we going with this, is this feeling easier or still quite confusing? Well, it's good that we get to do a few different ones...

so this is going to be "Text" for the "Helper"... and this is going to be called "Helper Text"... I like to put text to the front so that when I am looking at these things... say I go into my text here, I label it that way... when I click the parent, can you see, Text Label, Text Helper... when it's the other way around I find them hard...

to kind of figure out who does what... let's apply them to stuff, anything else we want to do? Boolean in text is enough for the moment... so the label needs content, is going to be edited with Text - Label... same with the Helper text, this is going to use the same one... but it's going to use Text - Helper...

with it selected let's go to our 'Layer'... and let's turn the Boolean on and off, using that toggle switch... 'Label', under 'Layer', it's going to be the same thing. So let's create an instance... so 'Shift I', I'm just going to type in "V2"... there it is, and now I can see, you can do the Label on and off...

let's move it over here, so... to zoom so far... you, on, off, on, off... and I can adjust the Label text... and I can adjust the Helper text. So that's one part of it, how do I get to the exposed part?

This might be a good example, where I want this to be changed out... so I'm going to cut this out and just paste it out over here... I'm going to make this its own component... it's called Sample Text, which is actually pretty good... actually, I'm going to rename it, just to call it "Field Text"... let's make a variant of it...

and this one here is going to be something like... I want to be able to switch it so that it looks like somebody's typing... "Typing"... I'm going to use that weird character that I'm not sure what it's called... the big stand-ey up-ey one, on my keyboard it's the... kind of tied in with the backslash, anyway, put in whatever you like there...

and I'm going to adjust the font color. So I want these two, let's name them better... so I've got a 'Property' of "Text"... and the two different values are going to be... maybe not Default, but "Placeholder"... and this one is going to be "Typing"...

I use 'Tab' to kind of get around to them all, there we go. It's got these two, let's put it in... so I'm going to go "Field Text"... where is it, Field Text? There it is, there... and let's put it inside of my Main component...

it appears down here... so this thing here has its own stuff going on, has two variants... Field Text, it has text for two different variables, these two... the parent though has its own stuff going on, which is Label, Helper... it has these Booleans, it has these text adjusters... and what I can do now is, because that is nested in here, I can say, actually...

go to 'Properties', 'Nested Instances'... and you might not want to, you might be like, "Don't change this"... or, "Yes, be able to change this one in this case," here we go. So now in my instance of that one, I can see, just by clicking the parent... on the outside, I can see everything that I need to, turn the label... actually, let's move it over here, again...

I have to zoom so far... so Label, on and off, Helper, on and off... but I can also see in here, look, there is the... I can change it to Typing or Placeholder... cool, huh. We could always do this by just double clicking and getting in there...

and still being able to see it, so I can still change it to placeholder... but now it's just a lot more user friendly... for me and for any other team that I'm designing this for... all right, that is exposing instances in Figma... and that my friend, is going to be... components and variables for a little while, we did loads...

and you're probably sick of it, I'm a bit sick of it... there'll be a Components and Variables Level 2 later in the course... where we'll do a bit more, but for now... ah, take a deep breath, do a bit of a walk around... get ready for the class project... components, variables, component properties, instances...

they're all awesome... it's super helpful, and kind of one of the big reasons... we're here for the advanced course... but deep breath, let's do something else for a little bit... all right, I'll see you in the next video. One last quick thing, finished the video and I was like, "Man, that's annoying"...

does it annoy you? Why is that there, how would you get that asterix... to move along when people start typing first name? Is really long... why did the asterisk move? Oh, I want you to pause here and see if you can get it to go...

did you pause it? Go back to the main one... you're going to select both of these, which can be tricky... when you're zoomed out, so select both of them, I'm just going to go 'Shift A'... and it's going to turn into an auto layout... I've got no spacing between mine, you may have a bit in yours...

but now, all the instances... hello, look, you moved along, happy days... there you go, Karma's restored... on to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025