When working with Figma components, especially those with multiple properties and variants, you may occasionally see the message "Some variants have the same property values applied." This note briefly explains what this means and how to resolve it.
What are conflicting variants?
A component can have multiple Variants and Properties (more precisely, Variant Properties in Figma). Each Variant should correspond to a unique combination of values across its Properties.
If two or more Variants have the same combination of Property values, this one-to-one relationship breaks. The component can no longer identify a specific Variant for that particular combination of values. Variants that share the same combination of Property values are referred to as conflicting variants.
Why does this happen?
When building a component, you may create a new Variant by copying an existing one and pasting it into the Component (more precisely, the Component set in Figma). What happens next depends on how many Properties the component has.
If the component has only one Property, Figma assigns the new Variant a new value for that Property, typically following a pattern like "Variant + N". Unless you manually change this value to one that already exists, simply pasting the Variant will not create conflicting variants.
The problem occurs when the component has two or more Properties. In this case, it isn't clear which Property should receive a new value when a new Variant is added. Figma instead pastes the new Variant with the same Property values as the copied Variant. As a result, the new Variant conflicts with the original Variant.
Normally, you would update these values after pasting the Variant to match the Property value combination you intended to create, so the conflict doesn't remain. However, if this step is skipped for some reason, the conflicting variants remain and can cause problems later.
How to resolve conflicting variants
There isn't really a special solution. You need to review the Variants and find the ones whose Property values differ from what you originally intended. Then, update their Property values accordingly. Figma does make the first step easier. Clicking "Select conflicting variants" selects the Variants that the component cannot uniquely identify by their Property value combinations.
If you're lucky, only one Property will show "Mixed", making it easy to identify which Property is causing the conflict. Otherwise, you'll need to go through the selected Variants individually, determine which ones conflict with each other, and correct their Property values.
How to prevent conflicting variants
Unless you intentionally assign duplicate values, this problem commonly occurs when copying and pasting Variants. Instead of selecting, copying and pasting multiple Variants at once, you can copy and paste them one at a time. This makes it less likely that you'll move on without updating the Property values of a newly pasted Variant.
Another approach is to clearly document each intended Property and its values outside the Component rather than treating the Component itself as the sole source of truth. From a workflow perspective, selecting, copying, and pasting multiple Variants and then updating their values together can be more efficient than adding them one at a time. Rather than sacrificing that efficiency just to avoid conflicts, it may be more practical to maintain clear documentation so that, even when conflicting variants occur, you can quickly determine what values they were originally supposed to have and assign them correctly.