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
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-extensionFigma 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.
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
Thank you!!
Bifrost — convert figma design to react code using AI
Use AI to turn your designs into clean React code. Supports Tailwind and Chakra!