Skip to main content

​
Before you begin

​
Tools

  • jq and curl

​
Security bundle

Download security-bundle.zip from the Sutro Console during onboarding. Extract it and run all commands from that directory. The bundle includes your API client credentials (apiClient.id, mtls.key, mtls.crt), the Sutro CA certificate (ca.crt), and a pre-generated Builder JWT (builder.jwt) valid for 7 days.
The test bundle creates a test builder for quick API testing, not for production. See How to Secure Connections for production setup.

​
Verify your connection

Test that your credentials work by calling the hello endpoint: 
curl -H "Authorization: Bearer $(cat builder.jwt)" \
     -H "x-sutro-api-client: $(cat apiClient.id)" \
     --cacert ca.crt \
     --key mtls.key \
     --cert mtls.crt \
     "https://sapi.withsutro.com/hello"
You should see a response confirming your API client, Builder, and organization.

​
Steps

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

Create a new project

curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer $(cat builder.jwt)" \
     -H "x-sutro-api-client: $(cat apiClient.id)" \
     --cacert ca.crt \
     --key mtls.key \
     --cert mtls.crt \
     -X POST \
     -o project.json \
     -d '{"name": "My Figma Project"}' \
     "https://sapi.withsutro.com/projects"
Response (HTTP 201)
{
  "id": "abc123",
  "name": "My Figma Project",
  "createdAt": "2025-01-15T10:30:00.000Z",
  "updatedAt": "2025-01-15T10:30:00.000Z"
}
The project details are stored in project.json; refer to that file in upcoming steps.
2

Create an application

curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer $(cat builder.jwt)" \
     -H "x-sutro-api-client: $(cat apiClient.id)" \
     --cacert ca.crt \
     --key mtls.key \
     --cert mtls.crt \
     -X POST \
     -o application.json \
     "https://sapi.withsutro.com/projects/$(jq -r '.id' < project.json)/applications"
Response (HTTP 201)
{
  "id": "def456",
  "projectId": "abc123",
  "scode": {},
  "status": "Initialized",
  "createdAt": "2025-01-15T10:31:00.000Z",
  "updatedAt": "2025-01-15T10:31:00.000Z"
}
The application details are stored in application.json; refer to that file in upcoming steps.
3

List Figma pages and frames

Retrieve the structure of your Figma file to locate frame IDs for code generation.
curl -H "Authorization: Bearer $(cat builder.jwt)" \
     -H "x-sutro-api-client: $(cat apiClient.id)" \
     --cacert ca.crt \
     --key mtls.key \
     --cert mtls.crt \
     -X GET \
     "https://sapi.withsutro.com/applications/$(jq -r '.id' < application.json)/figma/structure?projectLink=<FIGMA_URL>&pat=<FIGMA_PAT>" | jq
Replace:
  • <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"
        }
      ]
    }
  ]
}
4

Generate code from a Figma frame

Trigger the code generation for a specific frame in your Figma file.
curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer $(cat builder.jwt)" \
     -H "x-sutro-api-client: $(cat apiClient.id)" \
     --cacert ca.crt \
     --key mtls.key \
     --cert mtls.crt \
     -X POST \
     -d '{
       "fileKey": "<FIGMA_FILE_KEY>",
       "frameId": "<FRAME_ID>",
       "accessToken": "<FIGMA_PAT>"
     }' \
     "https://sapi.withsutro.com/applications/$(jq -r '.id' < application.json)/figma/generate-static-code"
Replace:
  • <FIGMA_FILE_KEY> : from your Figma URL (/file/<key>/...)
  • <FRAME_ID> : from step 3
  • <FIGMA_PAT> : your Figma personal access token
Response
{ "success": true }
The request creates a background job.
5

Check generation status

Poll the application status endpoint to monitor the generation progress.
curl -H "Content-Type: application/json" \
     -H "Authorization: Bearer $(cat builder.jwt)" \
     -H "x-sutro-api-client: $(cat apiClient.id)" \
     --cacert ca.crt \
     --key mtls.key \
     --cert mtls.crt \
     -s \
     -X GET \
     "https://sapi.withsutro.com/applications/$(jq -r '.id' < application.json)/status" | jq
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 6 to download the bundle.Status: Failed (Generation failed)
{
  "applicationId": "def456",
  "status": "Failed"
}
6

Download the web bundle

Once the application status is Active, download the generated code as a zip file.
curl -H "Authorization: Bearer $(cat builder.jwt)" \
     -H "x-sutro-api-client: $(cat apiClient.id)" \
     --cacert ca.crt \
     --key mtls.key \
     --cert mtls.crt \
     -X GET \
     -o application-bundle.zip \
     "https://sapi.withsutro.com/applications/$(jq -r '.id' < application.json)/webBundle"
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!