Figma-to-Code by Plasmic

About this plugin

Quickly turn your Figma designs into React code for production or advanced prototyping.

This plugin lets you export layers from Figma and paste them into Plasmic, a visual React UI builder. Learn more at https://www.plasmic.app.

The importer fully automates the low-level details of converting Figma’s document representation to standard DOM representations. A few highlights:

- Supports constraints and auto-layout.

- Translates blend modes.

- Adapts border styles including centered borders.

- Handles filter effects like background blur and layer blur.

- Preserves affine transformations like scales and rotations.

- Handles all fill types including linear and radial gradients and images.

- Imports vector and compound shapes as SVGs.

- Mirrors the original hierarchical structure.

- Carries over most type styles.

After importing, you will often want to do more work to make it production-ready. That’s where the rest of Plasmic’s toolset comes in, letting you set production-grade layout, swap in accessible functional components, add interactions, and much more. Finally, you can easily deploy into production or integrate into any existing codebase.

Follow https://twitter.com/plasmicapp for the latest updates.