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.
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.”
A solid collection of plugins to help you design, manage and operate design systems in Figma.
The ClipDrop plugin is in private beta right now, but this is a cool demo showing some of its abilities powered by AI. Looking forward to playing with a final version!
Supa Palette is an all-in-one palette editor and generator. Love that it supports modern color modes like LCH and Oklab, as well as correcting lightness for balanced palettes.
A new plugin by Rogie King fixes the most common issues with importing and copy-pasting SVGs from Adobe Illustrator to Figma. Huge time saver if you’ve ever had to deal with these problems manually!
Miggi shows how to make a reusable and flexible tooltip component set using Auto Layout, absolute positioning, constraints, and component properties.
Joey Banks creates a card layout similar to iOS’s Wallet app with negative values within an Auto Layout container.
I'm so happy that @figma finally allows for negative values within Auto Layout containers, which make card layouts, like those within iOS's Wallet app, really easy to create! ↔️ pic.twitter.com/InlupvM3Op
— Joey Banks (@joeyabanks) May 24, 2022
Miggi plays with component properties, Auto Layout slots method, and Interactive Components to make some fun modular content prototypes.
This Week in Startups interviewed Jordan Singer, founder of Diagram and creator of the Automator plugin.
An interview with Thierry Blancpain, co-founder of Grilli Type, one of the font foundries that were a part of Figma’s variable fonts beta.
Another great shortcut from Miggie to avoid going into the advanced type settings menu — click on the “Fixed size” icon while holding Option (Alt) to enable truncated text. (With so much free space to the right, I wonder what’s the justification for hiding this option in the menu.)
Option (alt) + click on 'Fixed' text to convert text field to have truncate text behavior in @figma. #figmatip pic.twitter.com/aDhkDL7b3j
— Miggi (@miggi) May 19, 2022
Cool minor improvement — default Auto Layout value now reflects the Big Nudge number instead of being hardcoded to 10 pixels. You can change it in the Preferences → Nudge amount.
Did the default values in Auto layout change to your nudge amount before or after @figma #Config2022? pic.twitter.com/1OWEQVsiRr
— Dan Eberhardt🏊🏻🚴🏻🏃🏻 (@incontrast) May 15, 2022
Miggie with a pro tip on Auto Layout — typing in “auto” as the spacing value will change the spacing mode from Packed to Space Between.
One more late night @figma auto layout tidbit.
— Miggi (@miggi) May 19, 2022
If you type in "auto" as the spacing value, it will change the behavior from packed, to space between! pic.twitter.com/rnW1oqoOPy
Molly Hellmuth discusses five major changes to the Auto Layout introduced at Config 2022.
To answer some common questions about Component Properties, Tom Lowry re-recorded the little run-through that he did during one of the breaks at Config.
Ridd is rethinking his approach to content systems with the introduction of Component Properties.
Config was a gamechanger for "Slot" components...
— Ridd 🏛 (@Ridderingand) May 19, 2022
They're now more powerful than ever and I'm starting to rethink how I approach content systems in Figma...
Time for a deep dive👇 pic.twitter.com/1mID6OkAwV
Joey Banks creates a button component using both Variant Properties and Component Properties.
Creating a button component set in @figma, using both Variant Properties and Component Properties 🤓: pic.twitter.com/RhoB8WpXrH
— Joey Banks (@joeyabanks) May 19, 2022
The team at One North discusses ten of their favorite plugins.
Figma announced a prototype screen reader beta that includes support for text notes, alt text for images, and the ability to interact with and navigate through prototypes with buttons and keyboard actions like tabbing.