Introducing: Figma to React | Figma Blog

Figma introduced an open-source Figma-to-React converter that uses the Figma API to turn designs into React components. The project aims to keep visual design in Figma while preserving application functionality in separate code, allowing designers to update interfaces without overwriting custom logic. It also seeks to make functional code reusable across multiple designs, much like reusable React components.

Motivation and Goals

• The converter builds on growing interest in automatically transforming Figma documents into React code.
• Figma identified two main objectives:
  • Keep component design primarily in Figma so design updates can be synchronized to a website or app.
  • Separate generated visual code from custom functional code, preventing design updates from overwriting application behavior.
• Existing functional code should be attachable to new designs, enabling reuse across different UI layouts.
• Figma open-sourced the implementation in its figma-api-demo GitHub repository.

From Figma to CSS

• The first technical challenge is accurately reproducing the appearance of Figma designs in React components.
• The example used is a sortable list interface with multiple list items, icons, and a dark visual style.
• The converter must translate Figma’s visual properties into CSS and React structure.
• The article notes that there are multiple possible strategies for reproducing a design, setting up a discussion of the implementation choices that follow.