# Bridging design and code with Variants

DevFeed: [Bridging design and code with Variants](<https://devfeed.tech/articles/bridging-design-and-code-with-variants-9544.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/bridging-design-and-code-with-variants/>)

Author: Kelsey Whelan

Published: 2020-10-28T00:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [Code](<https://devfeed.tech/topics/code.md>), [systems](<https://devfeed.tech/topics/systems.md>)

Tags: [bridging](<https://devfeed.tech/tags/bridging.md>), [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [design](<https://devfeed.tech/tags/design.md>), [design-systems](<https://devfeed.tech/tags/design-systems.md>), [developers](<https://devfeed.tech/tags/developers.md>), [feature](<https://devfeed.tech/tags/feature.md>), [figma](<https://devfeed.tech/tags/figma.md>), [library](<https://devfeed.tech/tags/library.md>), [mapping](<https://devfeed.tech/tags/mapping.md>), [tool](<https://devfeed.tech/tags/tool.md>), [use-cases](<https://devfeed.tech/tags/use-cases.md>)

## AI overview

Figma introduces Variants, a feature that combines variations of the same component, simplifying the asset panel and aligning components more closely with code. The article explains how user feedback and design system workflows shaped support for multidimensional variations, key:value naming, side-by-side comparison, library maintenance, and more efficient collaboration between designers and developers.

## Source excerpt

Today, we're excited to introduce Variants, which lets you combine variations of the same component--simplifying the asset panel and mapping components more closely to code. This feature, along with changes to the Inspect panel and updates to Auto Layout, will enable designers and developers to work more efficiently together. Below, we dive into how we built Variants, including the crucial pieces of feedback our users gave us along the way.