Oddbean new post about | logout
 Hey developers, if you work with Figma designs, what’s your process for translating the design to code? Do you use the built in Figma functions to grab the prepared styles or inspect manually? 
 following this 
 We use Tailwind to both design as well as develop. The dev's can inspect which Tailwind component is used and implement it according to specs of the design system. 
 Do they do this manually or use Figma to tailwind plug-in? 
 Manually, because we have some custom components/behaviors 
 I think it’s shouting. 

Then you raise bugs for all the stuff that doesn’t look the same. 

Then eventually you update the Figma to look like the code. 
 Something we’re trying to do more is agree on frameworks before designing, such as MUI / Fluent etc. We’re hoping this will save build time.

One of the challenges we have is ensuring the Figma designs are responsive (I don’t know if it’s possible to change the playback aspect ratio in Figma?).

We’ve looked into AI (or other extensions) to generate code from Figma designs with some limited success. Code inspector is helpful but still quite slow.

Lastly, we “test” designs, correxting typos and other things before they get baked in to code. 
 For me as a dev I open up each component and look/grab the styles from there + alt-measure distances in regards to paddings/margins.

Though as a designer I don't use Figma. I straight up write the html/css/js(noob js code) myself then give it to devs.
(This way, I get exactly what I want actually/directly, and the devs properly get the components correctly/directly). 
 If you’re willing to pay for a tool, Builder.io is something you should check out. 
 👀 
 Might be worth looking into Penpot: OSS alternative with build in design to dev workflow. https://penpot.app/blog/7-reasons-penpot-is-more-than-just-a-figma-alternative/ 
 I have and it lacks all the power features I’m used to 
 I plan to use it for a website I want to build. But I’m an engineer and not a designer. Just need some basic components and the respective code for them.