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!

Class Project 02 - Event Card Constraints - Completed

This lesson is exclusive to members

Course contents

Questions

1
0
0
1
1
0
0
0
6

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

All right, this is the completed version of the class project... so in case you got stuck, and you weren't sure how to do it... you can watch this, I'll show you how to do the... things stuck in the top right corner real quick, that's pretty easy... and then I'll go on and actually just, I don't know, do the rest of it... like how I would do it to a professional level...

like make sure it's a component, I'm going to turn this thing into an auto layout... because-- I'm going to pretend I did it on purpose, really... I did it, and I discovered how awesome it was later on... but we'll do that, make sure it reflows, sticks to the corner... I'll show you how to push it out so that it's, I don't know, 16 x 16... there's a few little tips and tricks in here...

but you don't have to watch the video... because you can see, it's a little bit long... but for those of you who want to ride along, it might be interesting... at least to compare to how you did it, to how I did it... it's always good to see sometimes, all right, let's jump in. I'm start on this one here, click on the frame name...

we're going to use Shift 1, actually, 'Shift 2' to zoom in... if you're like me, at the beginning, you weren't sure... was it Command 1, or Command 2, or Shift 1... you're like, "Ah, I always get it wrong"  the way I remember it is, like Shift 1, 2, 3, is, I'm shifting my view... whereas Command, I'm commanding you to change tabs, 1, 2... does that help, anyway.

Let's do it just real quick, the basics, so that you know where you've got it... then I'll go through and design my whole little card thing you saw at the beginning  and you can watch if you want... if you need the experience, or you want to see how I did it... or maybe you got stuck somewhere... so let's do the basics. Let's go 'F' key, because it's better than a rectangle, more options for a frame...

I'm going to draw out a size... I'm going to give it a color so you can see what I'm doing... pick any color, what is it, green, greenish... aqua, to you, there you go... and inside of it is going to be another frame... so I'm going to hit the 'F' key again, and with it selected...

kind of drawing over the top of it, ends up going inside... you can see, Frame 1, which is not a good name for it... let's call this one "Card-Event"... and then this one's going to be my... "Date"... I'm going to give this one a Fill of white just so you can see it...

and all I want to do is, say Date, my little frame guy... is constrained to the left, no, to the right... to the top, yes... so when I select this now it jiggles around, comes for the ride, awesome. All right, dismissed, unless you want to see it all, there's some tips and tricks... but as you can see from the time, I'll kind of work my way through...

I'd hang around if I was you, but you don't have to... let's get into bit more detail, this needs to be component because... I'm going to use it loads of times... so remember that sweet shortcut, you remember? 'Command Option K', that's right, on a Mac, 'Ctrl Alt K' on a PC... he is now our main component...

the main components should hang out over there... we should have instances here, let's just have a couple because it's interesting... but we need to do most of our editing in the main component... because we want to flow through. A couple of things, is we want to have--  I'm going to click, hold, and drag the little icon there, to the right... hold 'Shift' and it jumps up in 8s...

how much do we want? 16, 24, 24, let's use 24... make sure it's a squircle... I'm going to hit the little options here, hit the little dots... because squircles look better than just rounded corners... iOS do this thing, where they smooth the corner, it's called Corner Smoothing...

I'm going to zoom in, we're going to use my scroll wheel... so I'm going to hold 'Command' down, or 'Ctrl' on a PC, and zoom in and out... the wrong way first, there you go, and look... can you see the edges there, changing... do you like it, do you even care, there you go, I care... let's kind of do the same for this, so let's go, you...

8's going to be good with the corner smoothing. Text that are inside it, so I'm going to grab my 'Type tool'... and if you kind of click inside stuff, often, it'll go inside... can you see, it went inside that date frame, kind of works... so I'm going to say, '17', size wise, let's use that little shortcut... where you click on it and use up or down...

what do you want mine about, 10... 10's pretty small for an app, but this is like more of a suggestion... and not a full, like the accessibility... kind of, date will be in the actual listing... this is like a little card trying to cram in too much information... I'm going to have two bits of text...

this one's going to say, mar, no, capital "MAR"... I'm going to select it all, hit 'Command B' to make it go bold... 'Ctrl B' on a PC, just instantly goes bold, which is cool... I'm going to hit 'Esc' to get out of it... hold 'Shift', click both of them... I'm going to hold down the 'Option' key on my Mac, 'Alt' key on a PC...

and I'm going to hit 'H' to line them up horizontally... so that same key plus 'V' will align them vertically... we'll just click those. I don't remember what those shortcuts are... because that don't make sense, but this one makes sense, look... 'Option', or 'Alt' on a PC, 'H' for horizontal alignment.

So I'm going to do these, and what I'd like to do is... mine ended up inside my frame, which is good... you can drag it out if you need to, and drag it over this way... I would like mine inside, so drag yours inside this date frame... because what I want to do is, I want this frame... at the moment I got it fixed, where is it, you are...

a fixed width and a height, 32 x 32... great size, but I want it to expand if there are longer... you know, some of the digits aren't going to fit perfectly in here... so I want to turn this into an auto layout,  remember, 'Shift A'... so that it's perfectly in the middle... can you see there, it's defaulted to hug contents, if it hasn't, like fixed width...

you can say, actually, just make it hug everything on the inside... so that when later on somebody goes, I don't know, it's a short one... it's probably just as long. I want it to expand and contract... and it allows me a bit of control here to select it... so actually, I can play with the spacing if I want to...

the padding. I'm going to make mine '4'... it's a bit more responsive, so let's go 'Shift 1'... see it all, it's all appearing there nicely... I want mine spaced out a bit better from the edge, so '+', '+', '+'... I'll hit 'Del' on the way...

I want mine to kind of go in this top corner here... but I want it to be... I want it to be minus, how much? Let's use our little grid system... I'm kind of seeing both of them, I'm like... spacing wise, what do we think?

12, 16, let's do 16, 16 feels like a good gap from the edges... so I'm going to say, you are going to be '-16' to go across... and '+16' down, and I know it's perfect, look at us being perfect... and hopefully it's still responsive, it is? Yep... picking the right side, the constraints are set perfectly...

remember, the constraints aren't done with the parent... it's done with the child on the inside, that's inside of a frame, yes... but work on this guy, look, you, have constraints, a top and right, make sense? Now the nice thing, 'Shift 1' is, I can have these, like on a smaller device... kind of full width, but on these larger ones my plan is to have like... two of them kind of stacked up on a really big wide phone...

and have grids like this... 'T'... and this is going to work for our desktop view as well... but one of the problems here now, is kind of consistency with spacing ... we can go through and kind of go, you... like, it's kind of a pain, you're like, you, I want it to be what?

+8, no, +16... you can do that for everything... but a grid system is going to help us make this a whole lot faster... and allow us to be a bit more consistent across lots of things... rather than just dragging it, and try not to forget to use 16 instead of 17... so that is the segue to the next video...

and while we're in the section called Grids. Now you might have done it differently, that's okay... doesn't matter, as long as it's kind of sticking in that corner... and you might design it a bit different in terms of looks... you might not use an auto layout... was that necessary?

Probably not.. I felt like we kind of needed it, anyway... why could it be good? Actually, this could be good... later on we might use it on a desktop version, and we might use it this way... look at this, I can't change the auto layout direction in an instance of it...

I've got to do it up here, you, in the Main, I could say, you can go this way... look at that, oh, that is a-- I should have lived with that... that is a very good use case for auto layout... there you go, let's pretend I did that on purpose. All right, that is the end of the video, long one... I hope you picked up some tips, or confirmed some of your knowledge...

or you figured out how to do it a better way... let me know in the comments if you did it a different way... and if you're watching this video, have a look at the comments... it might be a genius way that Dan didn't think of... all right, that is it, I'll stop talking about myself in the third person... let's get on to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025