Designer -> Developer Handoff

As a developer, I've always referenced Storybook for our component library. What do designers do to convert their Figma components to Tailwind components typically? Would a designer handle converting that, or a frontend developer? I've been researching tools and there doesn't seem to be anything on the market that will easily convert Figma to Tailwind.
4 Replies
Jacob
Jacob15mo ago
So i found this way when figma released their new dev tools. 1. open your figma file 2. turn on dev tools in the top right 3. go to plugins 4. search for AutoHTML | Developer Plugin 5. run the plugin and go to settings 6. change the css styles from default to tailwind 7. select the item you want and it will give you the html sturcutre and all the tailwind styles Note: this isn't perfect and some things will need to be fix however it is pretty accurate and helpful if you don't care to much. There is probally better plugins for this but i haven't looked into it a whole heap. The other thing that can be helpful is the vscode plugion for figma: https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension
Figma for VS Code - Visual Studio Marketplace
Extension for Visual Studio Code - Bring Figma into the text editor. Inspect designs, receive notifications, and get code suggestions.
Jacob
Jacob15mo ago
In terms of of who’s role it is to convert this I would say it’s a designers job as they know exactly how things need to look like. But that depends on the team and how the designers work on the team otherwise front end developers as they know the tailwind and can easily follow the specs from figma
Quentin
Quentin15mo ago
Thank you!!
Cryogenic
Cryogenic15mo ago
Going to shill my friends company here but https://bifrost.so is great
Bifrost — convert figma design to react code using AI
Use AI to turn your designs into clean React code. Supports Tailwind and Chakra!
Want results from more Discord servers?
Add your server