Component Properties. Plugins for Design Systems.
Component Properties
Component Properties in Figma
Joey Banks on component properties: “In the past few weeks, I’ve had the chance to become more comfortable creating components that contain component properties. What has helped me the most has been to think of this new feature as an additional way, not a separate way, to further organize and create components and variants that scale with the library and system.”
Component Properties (Case Study)
Vic, a systems designer working on design systems at Microsoft, wrote a case study on Component Properties with practical examples, some interesting issues and workarounds, and thoughts on why they might be moving away from base components.
Figma Tip: Start Using Component Properties
Molly Hellmuth with 5 step-by-step examples on how and when to use Component Properties.
Infinite tables
Luis shows a neat trick on how to create an “infinite table” using component properties, where we can toggle on however many columns or rows we need in designs.
Handing off components with properties
Ridd warns that using component properties introduces a new type of responsibility for designers and explores what the most effective handoff deliverable actually looks like.
Office Hours: Jumping into component properties
“We’re excited to talk about yet another awesome new feature: Component properties. Join us as product manager Jacob Miller and designer advocate Chad Bergman share more on how you can reduce variant explosion in your design systems and improve developer handoff.”
Getting my head around Figma component properties
Follow Charli Marie’s live stream of working on a quote component and figuring out how to use Component Properties.
Using Figma
Figma Plugins for Design Systems
A solid collection of plugins to help you design, manage and operate design systems in Figma.
Taming multiple design systems with a single plugin
A condensed summary of a Config talk by the Intuit Design System Team on creating a brand new Figma plugin to promote Intuit’s design system decisions and deliver them directly to their designers.
1 Figma file type. 7 types of work.
Patrick Morgan writes about his way of structuring common design artifacts within Figma files. I find his approach of grouping them into Features, Libraries, and Presentations with a few sub-types quite interesting and useful.
Designing Auto Layout, with Joel Miller and Oscar Nilsson
Layout FM podcast host Rafa is joined by special guests Joel and Oscar from Figma to talk about their work designing AutoLayout V4.
Transparent fill with background blur effect
A nice trick from Gleb on how to create a transparent fill that supports a background blur effect.
“Switchboards” in Figma
Ridd: “Switchboards are main components that have been pulled out of a chunk of UI so as to function as a single place to control all of the prototyping connections”.
Designing & Prototyping Forms in Figma
Gary Simon shows how to properly design and prototype common form interactions in Figma.
Build your first plugin
A 4‑part video series from Figma, showing how to build a demo plugin that creates a customizable post for a social media app design. Don’t miss the next parts: Introduction to Plugins & API, Plugin Environment Setup, and Building Your Plugin.
Office Hours: Variable fonts in Figma
“Tune in to hear Clara, Amanda, and Qi walk through how to get started and unlock more font styles. From optical sizing to slant, learn how variable fonts give you more design control and expression.”
Office Hours: Auto Layout redesign
“Learn all about the redesigned Auto Layout. We’ll walk you through how to use the new properties panel and on-screen controls, as well as showcase the new layout features like absolute positioning, negative spacing, and more.”
Resources
Google Fonts: pairings
“Check out our nine Google Fonts pairings and start using them in your design projects. The pairings are hand-picked from Google Fonts catalog and open-sourced for everyone to use.”
Loaders Kit 2 / Three Steps
Andrei Iancu shared two more kits with loading animations — see also his really cool Kit 3 with delayed steps.
Plugin
3D Icons Plugin
Vijay Verma’s massive collection of 3D icons is now available as a free plugin.