Figma Tutorial: Smart Animate and Drag Triggers
Figma is free to use. Sign up here: http://bit.ly/2lJFbO9 Get your own copy of the design File: https://www.figma.com/c/file/767122733527420957 New to Figma? Watch the Getting Started series: http://bit.ly/2nar84A Timestamps: 0:00 - Intro 0:12 - Preview of the included Design File http://bit.ly/356nMRx 0:44 - Demo Part 1: Smart Animate matching Layers (Using Smart Animate with other Transitions) 2:28 - Demo Part 2: Smart Animate a new email 3:58 - Highlight matching layers in Prototype Mode (useful for troubleshooting) 4:37 - Bulk Rename (MacOS: Command + R; Windows: Control + R) 5:14 - Demo Part 3: On Drag trigger with Smart Animate 8:00 - Final Demo 8:13 - Preview of the included Design File http://bit.ly/356nMRx Learn more on our Help Center: Smart Animate: https://help.figma.com/article/365-smart-animate Read the Blog Post announcing Smart Animate: https://www.figma.com/blog/announcing-smart-animate-and-advanced-transitions Smart Selections: https://help.figma.com/article/189-smart-selection Prototyping: https://help.figma.com/category/87-prototyping
Figma Tutorial: Variants
Figma is free to use. Sign up here: https://bit.ly/3msp0OV Variants reduce the complexity of your design system, makes it easier to find components, and maps your design components more closely to code. In this video we'll teach you how to create and use variants and component sets. Learn more on our Help Center: Prepare for Variants: https://bit.ly/35IIIPV Create and Use Variants: https://bit.ly/35FVxdH Read the variants blog post: https://www.figma.com/blog/bridging-design-and-code-with-variants/ Watch the Config Europe keynote highlights: https://youtu.be/Jeqyvp-hfmk #Figma #FigmaTutorial #Variants #Components Timestamps: 0:00 Introduction 0:30 Define component sets, variants, properties, and values 0:58 Multi-dimension component sets, and map to code 1:47 Combine components as variants 2:05 Publish component sets to a library 2:19 Using and configuring variants 2:41 Step-by-step demo (checkbox component set from scratch) 3:22 Adding variants to a single Component 3:46 Naming syntax (property=value) 5:05 Rename values 5:29 Non-unique combination errors and how to fix it 5:40 Rename properties 6:23 Using and configuring variants from Assets panel 7:14 Add new variants to a component set 7:56 Boolean values, binary toggle switch 8:40 Adding another property / dimension 10:37 Instance swapping and component sets 11:03 Publish component sets to a library 12:08 The "slash" naming convention to create variants quickly 12:58 Use the "slash naming convention at a large scale 14:01 Outro Fluffy by Smith The Mister https://smiththemister.bandcamp.com Smith The Mister https://bit.ly/Smith-The-Mister-YT Free Download / Stream: https://bit.ly/stm-fluffy Music promoted by Audio Library https://youtu.be/OM9G3nyLT_w
Figma Tutorial: Masks
Figma is free to use. Sign up here: http://bit.ly/figma-masks In this video we'll learn how Masks can be used to show, and hide, specific portions of other layers on your canvas. If you have questions along the way head over to our user forum (https://spectrum.chat/figma) and connect with other Figma users. 0:00 - What are masks in Figma 0:13 - How to use masks 1:00 - How to reproduce shape effects after creating a mask
Figma Tutorial: Rounded Corners
Figma is free to use. Sign up here: http://bit.ly/figma-corners In this video we'll show you how to soften the corners of rectangles, stars, or other polygons with Figma's corner rounding feature. If you have questions along the way head over to our user forum (https://spectrum.chat/figma) and connect with other Figma users. 0:00 - What are rounded corners 0:20 - How to make rounded corners 0:34 - Rounding individual corners 1:07 - Rounding corners without the properties panel
Figma Tutorial: Creating Styles
Figma is free to use. Sign up here: http://bit.ly/figma-styles If you have questions along the way head over to our user forum (https://spectrum.chat/figma) and connect with other Figma users. In this video we'll show you how to create Styles and use them across your designs. If you're paying for a Professional Team, you can also publish your Styles to the Team Library for everyone on your team to use. This allows you to build a robust design system and preserve consistency across your projects.
Figma Tutorial: Color Picker
Figma is free to use. Sign up here: http://bit.ly/figma-color-picker In this video we'll talk about the Color Picker and how you can select and save colors in Figma. If you have questions along the way head over to our user forum (https://spectrum.chat/figma) and connect with other Figma users. 0:00 - How to find color tools in Figma 0:18 - How to capture color using the eyedropper tool 0:57 - Adding and removing saved colors 1:14 - Adding colors to team files 1:31 - Using HEX vs RGB colors 2:30 - Saving colors to the document panel
Figma Tutorial: Auto Layout (older version)
We updated Auto Layout on November 19th, 2020. The latest version includes new features, but also some changes (specifically to alignment of child objects). You can read the updated documentation on our Help Center https://help.figma.com/article/453-auto-layout or view the Auto Layout Playground file: https://www.figma.com/community/file/784448220678228461 Start using Figma for free: http://bit.ly/2Ro3GxU Learn to use Auto Layout: https://help.figma.com/article/453-auto-layout Read more on the Figma Blog: https://www.figma.com/blog/announcing-auto-layout/ Get a copy of the Theater App design file: https://www.figma.com/community/file/842917001273016668 With Auto Layout, buttons can resize with their text, lists can be rearranged by simply dragging items around, and your Frames will grow or shrink as you add or remove content. When designing with real data, like when using the Google Sheets Sync plugin, all of your Auto Layout Frames and Components will instantly update to any content, saving you time and clicks. Note that using Google Sheets Sync requires renaming layers with special prefixes which weren't covered in this video. Install Google Sheets Sync by https://www.figma.com/@Dave : https://www.figma.com/c/plugin/735770583268406934/Google-Sheets-Sync Get a copy of the Spreadsheet: http://bit.ly/2ORlJLc Timestamps: 0:00 Intro 0:22 Demo Start 0:34 Creating Buttons with Auto Layout 1:02 Dynamic resizing as contents change 1:46 Nesting multiple Auto Layout Frames within another Auto Layout Frame by duplicating 2:12 Direction property 2:49 Reordering Children of an Auto Layout Frame 3:34 Creating Auto Layout Frames from multiple objects 4:17 Text resizing with Auto Layout 5:02 Adding objects to an Auto Layout Frame 5:26 Deep nesting using Command / Control 6:01 Auto Width/Height and Fixed Width/Height 6:17 Auto Layout Components 6:44 Scrolling with Auto Layout Frames 7:36 Adding real data to our design so the Auto Layout Frames can all adapt.