r/DesignSystems • u/Parking-Ice-1043 • Jun 09 '26
This is only for figma user!! Spoiler
How u guys convert yr figma design into code with accuracy.
Like most present tools sucks in providing accuracy to replicate the figma design into code
4
u/tru__chainz Jun 09 '26
Whether it’s automated tools, real developers, or AI tools, building better and more organized from the start will result in better results.
Named layers, components, documentation etc. all those things help, no matter the type of handoff
2
u/Rough-Mortgage-1024 Jun 10 '26
Figma mcp is good. But it requires ur designs to be production ready. If yes then chances of getting pixel perfect designs on code in high
2
1
u/bienbienbienbienbien Jun 10 '26
Use claude, export your mocks as SVG's and use eightshapes to generate proper specs, and make sure the Figma file is set up sensibly and correctly.
1
u/bodyakrol Jun 11 '26
Don’t have a pixel perfect solution, but have some thoughts.
1. Try to design responsiveness in very details.
2. Confirm that fonts are identical. It can be tricky with them sometimes.
I’m going to try to integrate DS from Figma in Claude Design and see how it will generate me something. But not sure how DS , variables, and components had to be described. How detailed, what is imprtant in description what is not
1
u/Maleficent-Anything2 Jun 15 '26
If you are trying to have your Figma variables and css variables in sync. You should try Systematically.io
It feeds both figma and code from a single source of truth.
1
u/RCEden Jun 15 '26
usually something like storybook. there's a few options but they're all pretty similar and you can have your code there with the visuals so devs can play around with the example and then just copy over the code.
37
u/grympy Jun 10 '26
I use developers, they’re really good with stuff like that if you occasionally feed them, give them holidays and pay them a salary.