#Components & Variants
Visualizing lunchboxes
A creative way of using components to create custom graphics.
Here is like 10% of the design system for my client. In this example, I have 2 components with the shape of lunchboxes + a few for details (like stickers) and inside those lunchboxes, I have variables with different foods :) so I can prepare graphics soooo fast :) pic.twitter.com/zfHNL3fIpx
— Arkadiusz Palki (@arkadiuszpalki) February 2, 2021
Figma in 5: Design Systems: Components
In this part of Figma in 5, Rogie talks about Design Systems with a focus on components.
One Figma Component — 3,360 Variants
Luke Cardoni, UX Lead at REI, recently spent time improving the accessibility of form elements in their design system, Cedar. “It turned out that these UI components posed the perfect opportunity to start exploring Figma’s Variants feature, as each Text Input, Radio Button, and Checkbox has so many, well, variants.”
How I programmatically built 256 new design system components in Figma
Uber took a programmatic approach to create 256 new components for map markers. “By automating the construction of the markers, I was able to avoid human-error and efficiently generate the full set of variants. Programmatically testing the components allowed me to thoroughly validate them under multiple scenarios and be confident of their quality.”
Building Complex Figma Variants
Carol Chan shares her learnings from building a collapsible card component with many properties.
Introducing Component Variants, Zapier Integration & new Notifications experience
Zapier announced a new set of features for product teams, including native support for Figma Variants.
Use variants and icon instances with preserved colors
Great trick on using Union to preserve the color of icons.
Hottest #FigmaTip since sliced bread coming your way.
— luis. (@disco_lu) January 15, 2021
Here's a way to use variants AND icon instances with preserved colours 🤯 pic.twitter.com/iTNV664rQU
Cup Icon
Variants Pal plugin concept
It's Maker Week at @figmadesign, so I made a Variants Pal plugin concept! 👀
— Alex Einarsson (@alexeinars) December 4, 2020
Generate missing variants and add labels automatically. ✨ pic.twitter.com/EpztwnDIDy
Override Improvements and More
Office hours: Get started with Variants
Styling the wrapper around Variants
Neat, you can style the wrapper around variants in @figmadesign pic.twitter.com/a21pO8YQ7K
— Steve Ruiz (@steveruizok) November 2, 2020
