How to resize a box automatically in a Auto Layout to match text in Figma
Lesson 133 from: Figma Advanced: Become a Figma ProDaniel Walter Scott
How to resize a box automatically in a Auto Layout to match text in Figma
Lesson 133 from: Figma Advanced: Become a Figma ProDaniel Walter Scott
Lesson Info
133. How to resize a box automatically in a Auto Layout to match text in Figma
<b>Learn how to make a box automatically adjust its size to match the text inside it using Auto Layout in Figma. Ensures a professional and consistent design.</b>
Lessons
Class Trailer
1
Intro to the Figma Advanced Course
03:14 2Getting Started in Figma Advanced Course
02:31 3Auto Layout & Responsive Design 101: It's use in responsive design
10:19 4Designing in Figma with Auto Spacing in Auto Layouts
10:07 5When and when not to use Components in Figma
06:00 6What is good spacing to use in Figma
06:58 7What spacing should I use for web & app design in Figma
05:16 8Auto Layout vs Constraints in Figma
03:52
9
Autolayout shortcuts: Tips and tricks to work with Auto Layout faster
03:06 10Class Project 01 - Responsive Lower Navigation
09:49 11How to handle files in Figma and become a File Handling Master
06:39 12How to use advanced Copy, Paste, and Selection Tricks in Figma?
06:35 13How to do crazy things with your Figma fields?
03:33 14Frame Tricks: Tips and Tricks to work with Figma frames effectively
04:40 15Advanced Zooming Techniques in Figma
01:40 16Light or Dark vs System Theme: Which one to use in Figma?
02:29 17Class Project 02 - Event Card Constraints
01:35 18Class Project 02 - Event Card Constraints - Completed
08:40 19Grid vs Constraints vs Auto Layout in Figma
05:16 20Copy, Paste & Export Grid Styles in Figma
05:29 21Add Rows and Column Grids to Layout in Figma
04:19 22How to update Grid Styles in Figma
01:32 23Grids inside of frames that aren't the main frame
03:44 24Class project 03 - Event Branding
04:19 25Logos using Iconscout: How to use Iconscout to create logos in Figma?
06:47 26What are widgets compared to plugins in Figma?
03:33 27How to create UX color variants using a Figma Widget
05:13 28Intro to Nested & Responsive Auto layouts Section
04:01 29Production video - Tidying up my frame & component mess
05:52 30Bring in images using the unsplash plugin in Figma
06:34 31Production video - Making the parts for our nested autolayout
05:36 32Nesting Multiple Auto Layouts inside each other in Figma
05:13 33Autolayout Nesting with variants and responsive text in Figma
08:55 34Auto Layout on different device sizes
09:34 35Responsive text that adjusts for 2 lines in Figma
02:26 36Abstract Gradient Background in Figma the easy way
11:50 37How to copy and paste Interactions in Figma
01:23 38Animate Gradient Mesh Using Variants in Figma
15:42 39How to give feedback on a UX project - The Critique Sandwich
09:00 40Class project 04 - Background Animation
04:50 41Houdini Text: How to make a text mask animation Figma?
08:30 42How to use the Spring Animations in Figma
06:33 43Spring Animation: How to make custom Spring Animation in Figma
12:16 44Why is interaction on tap on click grayed out or missing in Figma?
01:51 45Class project 05 - Houdini Text Animation
01:38 46Create & remove bulk multiple noodles wires at once in Figma
03:05 47Bulk Update Nav Links in Figma Prototypes
03:15 48How to set the right phone and find old prototype phones in Figma
04:01 49How to make sticky scroll position search bar in Figma
06:10 50How to stack multiple sticky text vertical scrolling in Figma
13:56 51Class project 06 - Multiple Sticky Headings
02:25 52How to make Interactive Components in Figma
03:42 53How to make a checkmark turn on and off in Figma
02:38 54Create Interactive Components with Sliding Nav Figma
06:55 55Class project 07 - Sliding Button Nav Challenge
04:14 56Class project 07 - Completed
03:51 57How to use Sections in Figma for organizing your content
04:49 58How to use sections for prototyping in Figma
06:38 59How to add iOS battery wifi notch status bar to Figma
07:11 60How to add iOS or Android Snack Bar UI to Figma
10:38 61Class project 08 - Operating System UI
01:47 62Be careful what you create in Figma
03:43 63What are the advanced Layer shortcuts in Figma
07:38 64How to find layer Zen shortcuts in Figma
04:37 65How to hide and lock unlock all layers in Figma
01:05 66How to use Locked layers in Figma
02:11 67How to Find Replace and Multi-select Layer Search in Figma
03:58 68How to Bulk Rename Layers with advanced tricks in Figma
09:57 69How to replace instances and variants with shortcuts in Figma
08:58 70How to use Instance Swap Component Properties with preferred in Figma
07:01 71How to use Component Text Property in Figma
02:21 72How to use Boolean Component Property in Figma
03:10 73Input Fields Using Component Properties in Figma
09:52 74How to Combine Variants with Component Properties in Figma
09:37 75How to apply component properties to existing design systems
08:18 76What is Simplify Instances in Figma
04:01 77What does Expose Nested Instances do in Figma
10:15 78Class project 09 - One button to rule them all
04:16 79What are some font tips and tricks in Figma
05:10 80How to truncate text and set max lines in Figma
02:44 81How reset fonts & set default fonts in Figma
02:20 82How to Use Line Height Percentage in 8pt grid in Figma
04:42 83How to use Leading trim to cap height to baseline in Figma
04:16 84How to set Hanging Punctuation for pull quotes & call outs in Figma
01:04 85What are the Advanced Type Options in Figma
09:38 86How to use Variable Type in UX app design in Figma
07:38 87How to curve text with type on a path in Figma
06:44 88How to use adobe fonts & local fonts in Figma
04:52 89How to Preserve text overrides or not in Figma variant
04:42 90How to use Chat GPT AI to create placeholder and personas in Figma
03:48 91How to create an image style in Figma
03:47 92What's the difference with Images inside frames vs fills vs Masked in Figma
04:15 93How to crop images using shortcuts in Figma
02:13 94How to mask images with text in Figma
06:21 95Class Project 10 - Text Mask
02:49 96How to mask using transparent PNGs with alpha channels in Figma
06:35 97Class Project 11 - Alpha Mask
01:23 98How to create a luma mask in Figma
03:02 99Class project 12 - Luma Mask
01:00 100How to make a spillover mask outside of the frame in Figma
09:49 101How to use the pen tool to make image masks in Figma
11:04 102How to use color layer blending modes in Figma
09:13 103Class project 13 - Social Ad
02:28 104How to add video in Figma
08:05 105How to make a background autoplay video in Figma
01:45 106How to get a video play when you hover in Figma
04:29 107Class project 14 - Hover Play
00:54 108How to make a play pause button for video in Figma
07:28 109How to build a video card in Figma
08:38 110Class project 15 - Video Card
02:28 111What are some advanced color tricks in Figma
06:26 112How to change replace colors in Figma
08:56 113How to create Color Themes for light and dark in Figma
02:16 114How to group color styles using slashes or folders in Figma
02:35 115How to add descriptions to your styles in Figma for others to use
02:39 116Editing someone else's styles or component library in Figma
04:30 117How to hide color font styles & components from team library in Figma
04:45 118How to compare changes in component with overlay in Figma
03:52 119How to refactoring styles to another design file in Figma
04:09 120How to move relink refactoring components to another design file in Figma
05:40 121How to swap parts or entire component & style library in Figma
06:10 122What are some advanced drawing tips and tricks in Figma
07:46 123How to draw in Figma with the pen tool- Anchor point mastery
07:24 124How to draw with Bend & Mirror angle in Figma
02:49 125Can you animate anchor points or booleans in Figma
03:00 126How to animate a mobile nav menu in Figma using a dip
14:12 127Class project 16 - Alt Nav Animation
01:08 128How to overlap & stack things in a Figma Autolayout
03:16 129What are the shortcuts for hug & fill in Figma
03:36 130How to set absolute spacing so things ignore Autolayout in Figma
02:47 131How to absolute position something that is responsive in Figma
02:23 132How stick things to the bottom right of an auto layout in Figma
04:02 133How to resize a box automatically in a Auto Layout to match text in Figma
04:52 134What are the autolayout padding and resizing shortcuts
01:51 135How to create a minimum width height button in Figma
03:55 136How to wrap auto layout objects in Figma
01:42 137What does stroke included excluded mean in Figma auto layout
02:00 138How to set custom spacing in auto layouts in Figma
03:15 139How to organize Components into groups in Figma
05:57 140How to create slot placeholder components in Figma
07:21 141How to convert an existing website into a Figma design
05:04 142How to make a drop down using overlays in Figma
13:58 143How to make a multi level drop down menu in Figma
14:14 144Class project 17 - Nested Dropdown Menu
01:47 145How to create a hover grow effect for images in Figma
18:22 146Class project 18 - Hover Grow Effect
02:15 147How to make an expanding Search Bar in Figma
10:25 148Class project 19 - Expanding Search Bar
00:56 149What are Variables in Figma
03:26 150How to create cart total using number variables in Figma
05:40 151How to add add conditions to variables in Figma
02:26 152Variant change using Boolean variable - change cart color
05:41 153Turning our boolean variable to false in Figma
01:50 154Making a Overlay Popup in the Variable action panel in Figma
02:53 155Light and Dark Modes using Collections & Color Variables in Figma
07:04 156How to change spacing with Number Variables in Figma
04:57 157What are Design Tokens in Figma
06:50 158How to create Design Tokens in Figma
09:46 159Creating spacing & radius design tokens in Figma
07:46 160When would you use design tokens in Figma
05:06Lesson Info
How to resize a box automatically in a Auto Layout to match text in Figma
Class Materials
Bonus Materials
Exercise_Files-Figma_Advanced.zip
Figma_Advanced_Cheatsheet_v2.pdf