About the author:
Daniel is CTO at rhome GmbH, and Co-Founder at Aqarios GmbH. He holds a M.Sc. in Computer Science from LMU Munich, and has published papers in reinforcement learning and quantum computing. He writes about technical topics in quantum computing and startups.
jrnl · home about list ventures publications LinkedIn Join my Slack

# Rapid MVP development with figma code export plugins

This is just a short trick I'd like to share. I've built countless of MVPs, some paid, some as a cofounder, some as a friend service. Over time I've started to optimize the process. Sometimes there is a given design in Figma. This is a perfect case, since we can use plugins to export code that gives us a great basis to continue from.

I've tested a multitude of plugins, the one that worked best so far is the "Figma to HTML"-plugin by Storybrain. Find the Figma plugin here.

The concrete steps to quickly build an MVP from a Figma design:

  1. Autolayout -> if the design is built well, this will already be no issue. If it is not, you will have to go through all logical groups (horizontal and vertical) and "group" them with autolayout.
  2. Use the plugin to export to React.
  3. Fix up small issues (but you won't have to..), make it responsive if needed.
  4. Build the backend (use supabase here for rapid development).
  5. Connect backend to frontend, add basic login/signup and CRUD functionality. This is the most manual step that I have not found a way around so far.
  6. Profit.

This process enables us to build MVPs of platforms and SaaS solutions based on a given design in basically one day. It also enables us to continue work. Especially with the plugin by Storybrain the quality is usually good enough to get as far as seed stage in my opinion.

There are a couple of drawbacks:

  1. The CSS is mostly duplicate. I have no solution here as of yet, but I am sure there are ways.
  2. Garbage in, garbage out - if the Figma design is built in a bad way (bad naming conventions, bad grouping), the resulting code will contain these as well.

Lastly, is there a business risk by relying on one random free Figma plugin? Yes, of course. There are others that work nearly as well however. Check out FigAct for example.

Published on