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?
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
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).
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