TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: I made a Figma plugin that writes clean front-end code

1 pointsby jeroenmakesabout 2 years ago
Hi HN,<p>I&#x27;m a front-end developer and work with Figma a lot. The manual process of converting components to code was bothering me, so I started looking into existing plugins.<p>The problem I found with current Figma-to-code plugins is that they usually try to convert your entire artboard at once – which doesn&#x27;t produce great code, and most of the time I want to convert one specific component anyway.<p>Moreover, current plugins usually require you to structure your designs well, and depend on features like layer constraints and autolayout.<p>So I started looking into the Figma Plugin API docs, and found a way to listen to what components are currently selected. I also started experimenting with layer-to-code conversion without relying on the structure within Figma, so that my plugin worked with any (messy) Figma file.<p>The result is Frontender, a Figma plugin that allows you to select any layer(s) in your design and convert it to code (HTML or JSX, CSS or Tailwind).<p>Please let me know what you think, you can get the plugin here: <a href="https:&#x2F;&#x2F;www.figma.com&#x2F;community&#x2F;plugin&#x2F;1194222042313126344" rel="nofollow">https:&#x2F;&#x2F;www.figma.com&#x2F;community&#x2F;plugin&#x2F;1194222042313126344</a>

no comments

no comments