Komponenten

Or how we built Faire’s most deceptively complex design component: the modal

Figma Community plugin - Code on GitHub. Try it out in this demo file. This plugin provides a look at Figma component properties similar to how they are described in code. This plugin does not generate style code. It generates code that describes component properties. Currently supporting instance and compone...

Generate and sync full Figma components from Storybook, Backlight or Histoire. Storybook to Figma. Histoire to Figma.

Full course and working files: https://www.moonlearning.io/Figma-components Try Figma for free to follow along: https://bit.ly/moonlearningfreefigma Get Figma Professional: https://bit.ly/moonlearningprofessionalfigma Access all my premium UX/UI and Figma online courses from only 18€ a month: https://www.moonlearning.io learn more about syncing data in Figma: YouTube tutorial and free Figma file: https://www.youtube.com/watch?v=3nXbUH9YYgo Smashing Meets talk and free Figma file: https://www.youtube.com/watch?v=Njf_xX0mPWs Advanced Figma components and tricks: 00:00 - Introduction to moonlearning.io 00:23 - Quickly Select Matching Layers across Variants 01:01 - Using Overlay Comparison in Instances to Review Shared Library updates 01:23 - Use Nudge for Consistent Spacing and Padding in Components 02:05 - Overlay comparison on instances for library updates 02:45 - Link Figma Components to a Code Base Effortlessly 03:19 - EightShapes Specs Plugin: Faster Documentation for Your Designs 03:49 - Moving Figma Components Between Files While Maintaining Instance Connections 04:48 - Swap Figma Libraries to Create a Testing Environment 05:15 - Apply Styles and Auto Layout Settings to Your Main Component, Never Your Instance! 05:42 - Use Real Data in Your Figma Instances: Google Sync vs. Kernel 06:41 - Use Props and 'Preferred Values' When Creating Slot Components 07:31 - Easy Organizing and Naming with Sections 08:49 - Know when to Use Properties and When to Make Changes to the Main Component 09:43 - Creating Figma Components from Existing Pages via URLs in Seconds with the html.to.design Plugin 10:26 - Stay in touch! www.moonlearning.io

Today I'll walk you through the two two levels of Figma Components: 1) Variants 2) Component Properties (Boolean, Instance Swap, and Text) Try Figma: https://bit.ly/figma-cip While variants have been around for a while, component properties are new to Figma! --------------------------------------- 📹 Related Videos 📹 - Figma for Web Developers: https://www.youtube.com/watch?v=2liZ3uvO9bs - Figma Card Components: https://youtu.be/K9BXnBv7zU8 --------------------------------------- ⏲️ Timestamps ⏲️ 0:00 Introduction 0:50 Variants (Components Version 1) 11:35 Component Properties (Components Version 2) 12:12 Text Properties 15:16 Boolean Property 19:34 Instance Swap Property --------------------------------------- 🌐 Connect With Me 🌐 - Website: https://codinginpublic.dev - Blog: https://chrispennington.blog - Twitter: https://twitter.com/cpenned - Patreon: https://www.patreon.com/coding_in_public