Skip to main content

​
Steps

Ship-ready bundles take a few deliberate moves, and each step keeps you in control of authentication, inputs, and outputs throughout the journey.
1

Authenticate

Before making API calls, create a JWT token for secure authentication.If your setup supports single-command generation:
jwt encode --secret @jwt.pem \
           -A RS256 \
           --iss 'https://auth.example.com' \
           --sub "$BUILDER_ID" \
           --aud "https://sapi.withsutro.com" \
           --exp=$(($(date +%s) + 3600))
Otherwise, follow Securing Connections to create both a JWT token and mTLS certificate.
2

Create a new project

curl --request POST \
  --url "https://sapi.withsutro.com/projects" \
  --header "Content-Type: application/json" \
  --header "Authorization: Bearer <jwt-token>" \
  --header "x-sutro-api-client: ${API_CLIENT_IDENTIFIER}" \
  --data '{
    "name": "My Figma Project"
  }'
Response (HTTP 201)
{
  "id": "abc123",
  "name": "My Figma Project",
  "createdAt": "2025-01-15T10:30:00.000Z",
  "updatedAt": "2025-01-15T10:30:00.000Z"
}
Save the project ID — it’s used in later steps.
3

Create an application

curl --request POST \
  --url "https://sapi.withsutro.com/projects/<PROJECT_ID>/applications" \
  --header "Content-Type: application/json" \
  --header "x-sutro-api-client: ${API_CLIENT_IDENTIFIER}" \
  --header "Authorization: Bearer <jwt-token>"
Replace <PROJECT_ID> with the ID from step 2.Response (HTTP 201)
{
  "id": "def456",
  "projectId": "abc123",
  "scode": {},
  "status": "Initialized",
  "createdAt": "2025-01-15T10:31:00.000Z",
  "updatedAt": "2025-01-15T10:31:00.000Z"
}
Save the application ID — it’s used in later steps.
4

List Figma pages and frames

Retrieve the structure of your Figma file to locate frame IDs for code generation.
curl --request GET \
  --url "https://sapi.withsutro.com/applications/<APPLICATION_ID>/figma/structure?projectLink=<FIGMA_URL>&pat=<FIGMA_PAT>" \
  --header "x-sutro-api-client: ${API_CLIENT_IDENTIFIER}" \
  --header "Authorization: Bearer <jwt-token>"
Replace:
  • <APPLICATION_ID> — application ID from step 3
  • <FIGMA_URL> — your Figma file link (e.g. https://www.figma.com/design/abc123/MyFile)
  • <FIGMA_PAT> — your Figma personal access token
ResponseReturns a JSON structure of pages and frames with their IDs.
{
  "fileName": "My Design File",
  "pages": [
    {
      "id": "0:1",
      "name": "Page 1",
      "frames": [
        {
          "id": "1:15",
          "name": "Landing Page",
          "type": "FRAME"
        }
      ]
    }
  ]
}
5

Generate code from a Figma frame

Trigger the code generation for a specific frame in your Figma file.
curl --request POST \
  --url "https://sapi.withsutro.com/applications/<APPLICATION_ID>/figma/generate-static-code" \
  --header "Content-Type: application/json" \
  --header "Authorization: Bearer <jwt-token>" \
  --header "x-sutro-api-client: ${API_CLIENT_IDENTIFIER}" \
  --data '{
    "fileKey": "<FIGMA_FILE_KEY>",
    "frameId": "<FRAME_ID>",
    "accessToken": "<FIGMA_PAT>"
  }'
Replace:
  • <APPLICATION_ID> — application ID from step 3
  • <FIGMA_FILE_KEY> — from your Figma URL (/file/<key>/...)
  • <FRAME_ID> — from step 4
  • <FIGMA_PAT> — your Figma personal access token
Response
{ "success": true }
The request creates a background job.
6

Check generation status

Poll the application status endpoint to monitor the generation progress.
curl --request GET \
  --url "https://sapi.withsutro.com/applications/<APPLICATION_ID>/status" \
  --header "x-sutro-api-client: ${API_CLIENT_IDENTIFIER}" \
  --header "Authorization: Bearer <jwt-token>"
Possible responsesStatus: Generating — Application generation in progress
{
  "applicationId": "def456",
  "status": "Generating"
}
Status: Active — Generation complete
{
  "applicationId": "def456",
  "status": "Active"
}
The application is ready. Proceed to step 7 to download the bundle.Status: Failed — Generation failed
{
  "applicationId": "def456",
  "status": "Failed"
}
7

Download the web bundle

Once the application status is Active, download the generated code as a zip file.
curl --request GET \
  --url "https://sapi.withsutro.com/applications/<APPLICATION_ID>/webBundle" \
  --header "Authorization: Bearer <jwt-token>" \
  --header "x-sutro-api-client: ${API_CLIENT_IDENTIFIER}" \
  --output application-bundle.zip
Replace <APPLICATION_ID> with the application ID from step 3.Response
  • Content-Type: application/zip
  • Content-Disposition: attachment; filename="application-<APPLICATION_ID>-web-bundle.zip"
  • Body: Binary zip file containing the generated HTML, CSS, and assets
The zip file contains all the static files generated from your Figma design.
You now have an exportable frontend bundle—unzip it, drop it into your hosting pipeline, and show it off!

​
Examples