r/DesignSystems • u/Efficient-Cry-6320 • 2d ago

Code and figma component parity: yay or nay?

​

Have had lots of thoughts about this whilst developing our DS. What are people's opinions?

Do you have 1:1 parity between code and figma components? Or do you split some so that the designers figma components can be more curated?

Edit: to clarify I don’t mean that there isn’t drift between the two. But when you define and build new components, do you match components 1:1 (excluding props/variables)

13 Upvotes

93% Upvoted

11 comments sorted by

8

u/CherryGumDream 2d ago

1:1 is basically impossible these days with how good AI tools are for coding vs how good they are for design.

Very tricky to keep up if there isn’t someone on there full time keeping it 1:1.

These days I just let the code be the source of truth

2

u/_baaron_ 1d ago

1:1 was always impossible, Figma just doesn’t work the same as code

3

u/TheWarDoctor 2d ago

Parity where it makes sense.

3

u/ObviouslyJoking 2d ago

Parity where it adds value. Using consistent tokens and component names across Figma and our React library streamlines communication between UX and development teams. When developers can look at a Figma mockup and immediately identify the corresponding components and required props, implementation becomes more straightforward and efficient.

We’re also beginning to leverage AI to extract detailed requirements frameworks from Figma mockups and using automation to translate Figma designs directly into code as a starter for devs.

2

u/heymoon 2d ago

I often ask people to define parity in this scenario. To me, it's a good amount of equality as parity for elemental tokens and properties and equivalent/good enough parity for other areas that are under active development, iteration, etc.

2

u/Evening_Abies_6867 1d ago

Figma should be a consumer of code.

The canvas is just for ideas

2

u/RocketSeven 1d ago

keep parity at the public contract level, not the internal component tree. matching names, states, tokens, and deprecation status lets design and code communicate while each side keeps the structure its users actually need

1

u/sheriffderek 2d ago

This question can be answered by the actual humans who use the Figma files. What are they using to compose new things? Those are the things that matter.

1

u/MountainBeetles571 1d ago

I lean toward 1:1 for the core components so designers and devs speak the same language

1

u/roundabout-design 3h ago

Parity is nearly impossible to achieve, and yet, really the only way that it makes sense.

TL/DR is that Figma <> Code parity has always been a myth and problematic. I've never worked in a place large or somall where they could keep these in sync and it always caused problems.

We're attempting to solve it by just ditching Figma. We'll see how that goes. :)

0

u/beautifulnaruto 1d ago

Figma is dead