component-variants

3 posts

figma

Behind the Feature: The Multiple Lives of Multi-Edit | Figma Blog (opens in new tab)

Multi-edit began as a way to reduce repetitive work when editing component variants, then evolved into a broader interaction model for editing matching objects across Figma designs. The feature addresses shortcomings in ordinary multi-selection, where selecting the right objects and applying certain edits—such as resizing or changing text—is difficult. After years of refinement, Figma launched multi-edit as a more natural, second-nature workflow. ## The Philosophy Behind Multi-Edit - The idea originated in 2019 during a design summit focused on Figma’s variants feature. - Designers noticed that editing variants required too much repetitive work. - The initial insight was to create a mode where one edit could apply simultaneously to all variants. - The team soon recognized that the same capability could help with many other design tasks. ### Why Existing Multi-Selection Wasn’t Enough - Figma already allowed users to select multiple objects, but the workflow had significant limitations: - Selecting exactly the objects users wanted to edit was difficult. - Some edits worked well across selections, while others did not. - Changing shared properties such as color, font, or font size was relatively easy. - More structural edits, including resizing multiple objects, were cumbersome. - Editing the actual text content of multiple text nodes was also difficult. ### A Long Period of Hibernation - Although the concept was sketched quickly, development did not begin immediately. - The team needed to resolve fundamental questions about how multi-edit should behave. - Early thinking treated it as a powerful, specialized mode similar to multi-select text editing in advanced text editors. - Refining the concept required reconciling that new mode with Figma’s existing selection model. ## Bringing Multi-Edit to Life - The finished feature lets users select and edit matching objects across frames and component sets. - Suggested interactions include: - `⌘ Command + ⌥ Option + A` to select all matching objects. - Shift-dragging to select specific matching objects. - Selecting multiple text objects and pressing Enter to edit their text together. - Selecting a component set and pressing `Q` to edit variants simultaneously. - Figma provides a playground file so users can experiment with these workflows. ## Knowing When It’s Ready - The article frames multi-edit as an example of a feature that required extensive iteration before feeling obvious. - Its goal was not merely to add a new command, but to make repetitive editing feel effortless and intuitive. - Figma’s broader product philosophy is to question established design-tool conventions when doing so can simplify everyday work. Figma’s experience suggests that seemingly simple, natural interactions often require substantial exploration. Multi-edit is most useful when users repeatedly update related objects, variants, or text, and its shortcuts can make those bulk edits significantly faster.

figma

All Your Questions About Variables Answered (and a Few You Didn’t Even Know You Had) | Figma Blog (opens in new tab)

Figma’s latest variable updates expand design customization while bringing design systems closer to code. Variables can now control more visual properties and respond to different modes, making responsive, platform-specific designs easier to manage. The post presents variables as more flexible than traditional tokens and highlights their potential for both practical systems work and highly creative prototypes. ## Variables Enable Broader Customization - Designers are using variables for applications ranging from production design systems to interactive, game-like creations. - Unlike regular tokens, variables are open-ended and support more flexible customization. - Figma points to Headspace as an example of using variables to improve design-system efficiency and collaboration with developers. - Beginners can start with Figma’s dedicated variables guide and community file. ## New Properties That Support Responsive Design - **Reactive effects:** Variables can control blur sizes, drop-shadow colors, and offset distances, allowing effects to change by mode. - **Dynamic stroke weights:** Designs can use different stroke weights for platforms such as desktop and mobile. - **Layer opacity:** Opacity fields can be bound to variables for more nuanced visual control. - **Adaptable layout grids:** Grid settings can switch between modes, supporting pixel-perfect desktop and mobile layouts. - **Individual corner radii:** Each corner radius can be controlled independently through variables. - **Nested instance variant binding:** Variables can be applied to component instances nested within other components, enabling more complex component structures. ## Connecting Design and Code - The updates are intended to align design variables more closely with how values are managed in code. - Mode-based values make it easier to represent platform, theme, or responsive differences within a single design system. - Figma indicates that typography is an area planned for further variable support. Overall, the post recommends adopting variables as a flexible foundation for scalable design systems, responsive interfaces, and richer prototypes—especially when designers and developers need a shared source of truth.

figma

Bridging design and code with Variants | Figma Blog (opens in new tab)

Figma’s Variants feature was created to bring component organization closer to how developers structure reusable code. It combines related component versions into component sets, supports multiple property dimensions, and simplifies switching between variations. The feature’s design was shaped through user research and usability testing, which refined both its interface and its name. ## Bridging Design and Code - Designers need freedom to iterate, while developers prioritize rigor, reuse, and scalability. - Figma identified component management as a major opportunity to connect these workflows. - Existing components were difficult to find, switch between, and organize, especially when systems contained many variations. - Variants was designed to make design-system components resemble their code counterparts more closely. ## Aligning Component Organization with Code - Teams often used forward-slash names such as `default/primary/large/icon` to represent component states and properties. - Variants replaced this workaround with key-value properties, such as: - `state="hover"` - `style="secondary"` - The system supports both simple components and components with multiple dimensions, including state, type, color, and size. - Research showed that design-system managers commonly arranged component variations in grids to compare and maintain them. - Figma therefore allows all variations of a component to be displayed side by side. - Existing component variations can be selected and converted into a component set using “Combine Variants.” ## Refining the Interface Through Usability Testing - Figma built a working prototype and conducted four rounds of usability testing over six weeks. - The initial interface displayed all property values as pills, but users found this confusing because pills typically represent multiple tags or attributes. - Figma changed the interaction to: - Use dropdowns and simple input fields when editing a selected variant. - Retain pills when viewing all properties and values in a component set. - Generic default labels such as “Property 1” and “Property 2” proved clearer than predefined labels like “State” and “Style,” because users understood they should customize them. ## Choosing the Name “Variants” - The feature was initially called “States,” reflecting its early focus on interactive states such as hover, active, and disabled. - User feedback showed that “States” understated the feature’s broader capabilities. - Variants can represent any component property, including type, color, and size—not just interaction states. - Testing confirmed that “Variants” better communicated the feature’s flexibility and scope. Variants, combined with updates to Auto Layout and the Inspect panel, is intended to make design systems easier to organize and easier for developers to interpret. Teams should use component properties and sets to model reusable UI elements in a way that matches both design workflows and code structures.