Skip to main content

API Reference

Export

Export your frames to Figma as native layers, or generate production-ready component code in React Native, Flutter, SwiftUI, or Jetpack Compose. Both endpoints consume credits.

POST/api/v1/export-code🔑 Auth required

Generate production-ready component code from any HTML screen. Supports React Native (TSX), Flutter (Dart), SwiftUI (Swift), and Jetpack Compose (Kotlin).

  • Generated code is pure UI — no navigation, state management, or API calls.
  • Frameworks: react_native → TSX, flutter → Dart, swiftui → Swift, jetpack_compose → Kotlin.
  • Pair with the Image → HTML API: convert a screenshot to HTML, then pass that HTML here.
  • Returns 402 if the account has no remaining credits or requires a plan upgrade.

Body Parameters

NameTypeDescription
htmlstringFull HTML of the screen to convert. Pass the html returned by the Image → HTML API directly.
framework"react_native" | "flutter" | "swiftui" | "jetpack_compose"Target framework for code generation.
labelstringScreen name used for the output fileName. Defaults to "Screen".
Request body
{  "html": "<!DOCTYPE html><html>...</html>",  "framework": "flutter",  "label": "Login Screen"}
Response
{  "code": "import 'package:flutter/material.dart';\n...",  "language": "dart",  "fileExtension": ".dart",  "fileName": "Login_Screen.dart",  "framework": "flutter",  "cached": false}

Export to code

curl https://www.floow.design/api/v1/export-code \  -X POST \  -H "Authorization: Bearer fl_your_api_key" \  -H "Content-Type: application/json" \  -d '{    "html": "<!DOCTYPE html><html>...</html>",    "framework": "flutter",    "label": "Checkout Screen"  }'
// First convert an image to HTML, then export the codeconst imgRes = await fetch("https://www.floow.design/api/v1/image-to-html", {  method: "POST",  headers: {    Authorization: "Bearer fl_your_api_key",    "Content-Type": "application/json",  },  body: JSON.stringify({ image: "https://example.com/screen.png" }),});const { html } = await imgRes.json();
// Now export to Flutterconst exportRes = await fetch("https://www.floow.design/api/v1/export-code", {  method: "POST",  headers: {    Authorization: "Bearer fl_your_api_key",    "Content-Type": "application/json",  },  body: JSON.stringify({    html,    framework: "flutter",    label: "Checkout Screen",  }),});
if (!exportRes.ok) {  const { error } = await exportRes.json();  throw new Error(error);}
const { code, fileName, language } = await exportRes.json();console.log(`Generated ${fileName} (${language})`);console.log(code);
import requests
# Step 1 — get HTML from an imageimg_res = requests.post(    "https://www.floow.design/api/v1/image-to-html",    headers={"Authorization": "Bearer fl_your_api_key"},    json={"image": "https://example.com/screen.png"},)img_res.raise_for_status()html = img_res.json()["html"]
# Step 2 — export to React Nativeexport_res = requests.post(    "https://www.floow.design/api/v1/export-code",    headers={        "Authorization": "Bearer fl_your_api_key",        "Content-Type": "application/json",    },    json={"html": html, "framework": "react_native", "label": "Checkout"},)export_res.raise_for_status()data = export_res.json()
print(f"File: {data['fileName']}")print(data["code"])
POST/api/v1/figma-export🔑 Auth required

Convert a frame's HTML into Figma clipboard data. Paste the response directly into Figma to import the screen as native vector layers.

  • Response Content-Type is text/html — write the raw text to the clipboard, then paste into Figma.
  • This endpoint deducts 1 export credit per call.
  • Returns 402 if the account has no remaining credits or requires a plan upgrade.

Body Parameters

NameTypeDescription
htmlstringFull HTML markup of the screen to export.
widthnumberFrame width in pixels. Default 430.
heightnumberFrame height in pixels. Default 932.
labelstringName used for the top-level Figma layer. Truncated to 120 characters.
Request body
{  "html": "<!DOCTYPE html><html>...</html>",  "width": 390,  "height": 844,  "label": "Login Screen"}
Response
<!-- Figma clipboard HTML (text/html) --><!-- Paste this into Figma using Cmd/Ctrl+V --><meta charset="utf-8"><div data-figma-paste="...">...</div>

Export to Figma

curl https://www.floow.design/api/v1/figma-export \  -X POST \  -H "Authorization: Bearer fl_your_api_key" \  -H "Content-Type: application/json" \  -d '{    "html": "<!DOCTYPE html><html>...</html>",    "width": 390,    "height": 844,    "label": "Login Screen"  }'
const res = await fetch("https://www.floow.design/api/v1/figma-export", {  method: "POST",  headers: {    Authorization: "Bearer fl_your_api_key",    "Content-Type": "application/json",  },  body: JSON.stringify({    html: screenHtml,    width: 390,    height: 844,    label: "Login Screen",  }),});
if (!res.ok) {  const { error } = await res.json();  throw new Error(error);}
// Response is text/html — write to clipboard then paste into Figmaconst figmaClipboard = await res.text();await navigator.clipboard.write([  new ClipboardItem({ "text/html": new Blob([figmaClipboard], { type: "text/html" }) }),]);console.log("Copied — paste into Figma with Cmd/Ctrl+V");
import requests
response = requests.post(    "https://www.floow.design/api/v1/figma-export",    headers={        "Authorization": "Bearer fl_your_api_key",        "Content-Type": "application/json",    },    json={        "html": screen_html,        "width": 390,        "height": 844,        "label": "Login Screen",    },)
response.raise_for_status()
# Save the Figma clipboard HTML to a filewith open("figma_clipboard.html", "w") as f:    f.write(response.text)
print("Saved — open the file and copy its contents, then paste into Figma")