Auto layout: Learn to create flexible designs and components - Figma tutorial: Card component with auto layout

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 https://youtu.be/0IgndUb1YQI