For example (illustrative), a button in Figma has a Size property with Small, Medium and Large. In React, the same button takes a size prop typed "sm" | "md" | "lg". Until the two are linked, nobody can say whether the large button in code matches the large button in the design.
Each variant property is an axis, and not every axis maps to one prop. For example (illustrative), a State axis can map value by value: Disabled to a disabled boolean prop, Hover to a browser state.
Why the mapping decides the comparison
A comparison is only as good as its mapping. If Figma Size points at the wrong prop, every difference reported for that axis is noise. FISYCO therefore keeps a mapping question apart from a difference. A variant with no known counterpart is left out of the comparison and out of the component health score. The component's header then says how many variants were compared, for example "Compared 6 of 8 variants".
Where FISYCO gets a mapping
In FISYCO, each matched axis shows one of three sources:
An AI proposal that can't be checked stays a hint, and the axis stays open. Values such as Hover are browser states, not props, so they aren't compared. Code props with no design axis are listed on their own.
Related
- Components: comparison with the design: how to read a mapping and edit it by hand.
- Component health
- Change class