Skip to main content
The Sutro API supports converting Figma designs into pixel-perfect static HTML and CSS bundles. This allows you to bring your design mockups to life while maintaining visual fidelity to your original designs.

​
What you can do

With Figma to code, you can:
  • Convert Figma frames into static HTML/CSS code
  • Export complete web bundles ready for deployment
  • Maintain design fidelity from Figma to code
  • Generate production-ready static sites

​
How it works

  1. Connect your Figma file to a Sutro project
  2. Select the frames you want to convert
  3. Generate static code bundles
  4. Download and deploy the generated HTML/CSS
Learn how to convert Figma designs to code

​
Example

This example demonstrates how Sutro converts a Figma landing page design into a static HTML/CSS bundle.

​
Input

The source Figma file is a community landing page template available at https://www.figma.com/community/file/1230604708032389430.

​
Result

Input: Figma

The original Figma design with all visual elements, typography, and layout.Full landing page design used as input for this Figma-to-code example

Output: Generated bundle

The static web page bundle generated by Sutro, matching the design specifications.Static site bundle generated from Sutro (output)

​
Live Demo

View the deployed web page: https://figma-to-code-example-landing-page-1.pages.dev/