EdgeOne Pages Launches Figma Plugin: Instantly Turn Designs into Accessible Websites
Figma has become the go-to tool for product design and prototyping thanks to its cross-platform capabilities and seamless collaboration features. To enable one-click preview of design drafts as live websites, EdgeOne Pages is proud to introduce its new Figma plugin: Figma-to-Website. This plugin converts Figma designs into HTML code, rapidly deploys them to edge nodes, and provides accessible web links.
What is Figma?
Figma is a cloud-based collaborative design tool widely favored by designers and developers alike. It supports real-time multi-user editing, allowing team members to co-create and modify designs anytime, anywhere. Beyond powerful vector graphics and UI design features, Figma’s extensible plugin ecosystem enables automation and streamlined workflows.
What Can EdgeOne Pages’ Figma-to-Website Do?
Figma-to-Website transforms Figma designs into clean HTML/CSS code with a single click, faithfully reproducing layouts, styles and so on. The generated code is concise and maintainable, ensuring flawless rendering across devices. A built-in live preview lets you verify the output before publishing, preventing discrepancies post-launch. Most importantly, the plugin enables one-click deployment of the generated website to EdgeOne Pages, making your design instantly accessible online. The plugin is open-source and customizable, ideal for designers, developers, and teams seeking a fast way to see their designs in action.
How to Use EdgeOne Pages’ Figma-to-Website?
1. Search for “Figma to Website (Powered by EdgeOne Pages)” in the Figma Community and install the plugin: https://www.figma.com/community/plugin/1508731505271785435/figma-to-websitepowered-by-edgeone-pages
2. Select the layers you want to convert (we recommend selecting the entire webpage).
3. Run the plugin to generate your website code.
4. Click “Publish” to deploy your site to EdgeOne Pages with one click.
Technical Overview
Project Structure
The project is organized as a monorepo with multiple packages:
● plugin-ui: React components for the plugin interface
● Additional packages for code generation and publishing functionality
This plugin is based on the open-source Figma to Code (https://github.com/bernaferrari/figmatocode) project by Bernardo Ferrari and is powered by EdgeOne Pages (https://edgeone.ai/products/pages).
Development
# Install dependencies
pnpm install
# Start development server
pnpm run devExperience the power of EdgeOne Pages’ Figma-to-Website plugin today and turn your designs into accessible, live websites in seconds!