Figma tutorial Card component with auto layout
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=WuKnJFxrxNg
Figma is free to use. Sign up here: http://bit.ly/2MChQLD • Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you more advanced Auto Layout techniques to create a flexible card component for a trip planning website. • Tripma Design File: http://bit.ly/3nWIgV5 • Learn more on our Help Center: • Create dynamic designs with Auto Layout: http://bit.ly/2vXWMXB • Behind the feature: the making of the new Auto Layout: http://bit.ly/3nYwkm2 • Timestamps: • 00:00 Auto-Layout For Card Component • 00:07 Previous Videos • 00:22 Tripma Design File • 00:27 Creating Text Layers • 00:41 Adding Auto Layout • 00:57 Finishing Up The Card Details • 01:21 Adding an Image • 01:34 Placing the Image • 01:59 Image Overflow • 02:26 Creating Borderless Auto Layout Card • 02:48 Functionality Quirks • 02:54 Longer Description • 03:28 Resizing The Card • 03:39 Horizontal Resizing • 04:00 Vertical Resizing • 04:05 Fill Container Explanation • 04:32 Changing to Hug Contents • 04:47 Finishing Up The Card Component • 05:02 Exploring Other Designs • 05:25 Creating New Text Layers • 06:06 Packed to Space Between • 06:28 Title to Resizing • 07:02 Card Row Introduction • 07:08 Creating The Row • 07:22 Resizing The Row • 07:35 Horizontal Resizing • 07:59 Text Wrapping • 08:51 Changing The Image to Fixed Height • 09:20 Card Details Resizing • 09:35 Matching The Cards Heights • 10:17 Overwriting Card Details Vertical Resizing • 10:33 Changing to Fill Container • 11:20 Wrap Up • #Figma #FigmaTutorial #AutoLayout • Music: • Mitsubachi by Smith The Mister • https://smiththemister.bandcamp.com • Smith The Mister https://bit.ly/Smith-The-Mister-YT • Free Download / Stream: http://bit.ly/mitsubachi • Music promoted by Audio Library • Mitsubachi – Smith The Mister (No Cop...
#############################
