v0 from Vercel is a ​“generative chat interface with in-depth knowledge on modern web technologies. It can provide technical guidance while building on the web, generate UI with client-side functionality, write and execute code in JavaScript and Python, build diagrams explaining complex programming topics, and more”. v0 supported sketches and screenshots as a starting point for generation for quite some time, but now paid users can also import designs from Figma.

Meng To is working on a free plugin (requiring API keys) for turning designs into code using Claude.

Yann-Edern Gillet from Linear built a plugin for syncing color and text styles from Figma to Framer.

“Figgy instantly turns your FigJam into a website. You get a published site, with a clean domain and custom SEO. All you have to do is drop in your Figma link and it’s live. No coding or technical experience is required.” Read how this project came to life in this Twitter thread.

Wix Studio, which recently introduced an easy-to-use Figma to Wix Studio plugin, has launched a new marketplace for templates. This could be an excellent opportunity for creators ready to jump on it quickly. For context, both Webflow and Framer have over a thousand pre-made templates, while Wix Studio has only 67 at this time. The early bird gets the worm, and designers keep 100% of profits until the end of 2024.

A 2‑hour course by Meng To on building a real website from a Figma template using Codux. ​“You’ll master responsive design, collaborate with developers on a real React project, export CSS from Figma using Locofy, set up breakpoints with media queries, add CSS animations, improve SEO, create multiple pages with React Router, and publish your site. By following best practices, you’ll bridge design and development, improve your web design skills.” 

Meng To shows a website made entirely in Figma and exported to React with Loco​fy​.ai, which I wrote about in issue #155. Responsive layout, breakpoints, pages, animations — everything just works. He gives a few tips on preparing your design for the seamless export to code.

As someone who designed and coded a fair share of emails over the years, I’m curious to try this plugin when it becomes available. See the article ​“The Future of Email Design is Here: Streamline Your Workflow with Figma and Email Love” for the vision behind it.

Weavely is the AI form builder for Figma. You can design a form in Figma, and Weavely will generate a working web form from it. It supports answer piping, conditional logic, AI form generation, and more.

More Figma-to-code solutions: ​“Trace helps you convert your Figma designs to live SwiftUI prototypes within minutes. You can also preview, view code, edit, export, etc. on the fly. Trace uses AI to write SwiftUI code and compile the entire project within minutes.”

Replit launched an experimental Figma plugin that converts designs into runnable React code. ​“Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.” Read more about this experiment in their blog post.

This result is based on an exported PNG, so plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.

If you’ve been hearing the hype about Framer on #designtwitter and are curious to give it a try, check out this quick tutorial on bringing your design from Figma to Framer and building a website without writing code.

“In this tutorial, we redesigned SVBs banking dashboard using Anima’s open source Component Library for Figma, then connected our data using Strapi’s headless CMS. Now you can launch fullstack React apps at lightning speed using the same approach.”

Recently I’ve shared a few no-code tools for generating code from Figma mockups, but this one is different and works in reverse by generating Figma components and variants from your code and Storybook stories. Nifty idea!

One more service for publishing websites from Figma — love how vibrant that space is! Figment helps you add website effects such as videos, links, and animations to your Figma mockups. When finished, it publishes or exports your website’s code.

Makers is a Figma plugin to help you build and publish sites directly in Figma without writing any code. They even provide a few templates to speed up the process. Make sure to watch an impressive demo video.