> ## Documentation Index
> Fetch the complete documentation index at: https://docs.withsutro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma to code overview

> Convert Figma designs into static HTML and CSS bundles

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 to publish
* 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 publish the generated HTML/CSS

[Learn how to convert Figma designs to code](/docs/planning/figma-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](https://www.figma.com/community/file/1230604708032389430).

### Result

<Columns cols={2}>
  <Card title="Input: Figma">
    The original Figma design with all visual elements, typography, and layout.

    <img src="https://mintcdn.com/sutro-75998512/ppKuDkLZBXIKnNgU/assets/figma-example-landing-design.png?fit=max&auto=format&n=ppKuDkLZBXIKnNgU&q=85&s=6a5aa3a039925ccce79f2925934baf65" alt="Full landing page design used as input for this Figma-to-code example" width="1380" height="8000" data-path="assets/figma-example-landing-design.png" />
  </Card>

  <Card title="Output: Generated bundle">
    The static web page bundle generated by Sutro, matching the design specifications.

    <img src="https://mintcdn.com/sutro-75998512/ZnM32hfYWPBNM1E8/assets/figma-example-landing-rendered-design.png?fit=max&auto=format&n=ZnM32hfYWPBNM1E8&q=85&s=78ede82adb14785c8e65b0eb9ce86149" alt="Static site bundle generated from Sutro (output)" width="2880" height="16498" data-path="assets/figma-example-landing-rendered-design.png" />
  </Card>
</Columns>

### Live Demo

View the published web page: [https://figma-to-code-example-landing-page-1.pages.dev/](https://figma-to-code-example-landing-page-1.pages.dev/)