Get the number of credits that are still available for your account.

Converts a single HTML to Figma.

Cost: 1 credit per call

Converts multiple HTMLs to a single Figma result. This is particularly useful to combine multiple HTML codes into a single Figma clipboard result.

Each screens are presented side-by-side from left to right when applied in Figma.

Cost: 1 credit per 4 screen/variations

Creates a Figma Component from an HTML page containing all variants.

Each variant in the HTML code must have the following data-* attributes:

• data-c2d-cmp-name="name of the component"
• data-c2d-cmp-variants="list of variant properties"

And optionaly link property is some sub-nodes:

• data-c2d-cmp-text-property="name of the property"
• data-c2d-cmp-slot-property="name of the property"

Example for a "Button" component:

Code
 
<style>
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 6px; font-family: system-ui; font-size: 14px; font-weight: 600; border: none; cursor: pointer; }
  .btn-primary { background: #2563eb; color: white; }
  .btn-secondary { background: #e5e7eb; color: #1f2937; }
  .icon { width: 16px; height: 16px; }
</style>

<!-- Primary + with icon -->
<button class="btn btn-primary" data-c2d-cmp-name="Button" data-c2d-cmp-variants="variant:primary, show_icon:true">
  <span data-c2d-cmp-slot-property="icon"><svg class="icon" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="8" r="6"/></svg></span>
  <span data-c2d-cmp-text-property="label">Submit</span>
</button>

<!-- Primary + no icon -->
<button class="btn btn-primary" data-c2d-cmp-name="Button" data-c2d-cmp-variants="variant:primary, show_icon:false">
  <span data-c2d-cmp-text-property="label">Submit</span>
</button>

<!-- Secondary + with icon -->
<button class="btn btn-secondary" data-c2d-cmp-name="Button" data-c2d-cmp-variants="variant:secondary, show_icon:true">
  <span data-c2d-cmp-slot-property="icon"><svg class="icon" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="3" width="10" height="10" rx="2"/></svg></span>
  <span data-c2d-cmp-text-property="label">Cancel</span>
</button>

<!-- Secondary + no icon -->
<button class="btn btn-secondary" data-c2d-cmp-name="Button" data-c2d-cmp-variants="variant:secondary, show_icon:false">
  <span data-c2d-cmp-text-property="label">Cancel</span>
</button>

Cost: 1 credit

⚠️ Only works for clipboard output.

Creates multiple Figma Component together in one output payload.

See endpoint /html-component for more details.

Cost: 1 credit per 4 components

⚠️ Only works for clipboard output.

[BETA - EARLY ACCESS] Convert clipboard data from Figma to HTML.

Returns a zip file with an index.html for each top frames in the clipboard data.

With this API, users can copy/paste Figma frames into your application and you get clean pixel-perfect HTML.

Cost: 1 credit per index.html created in the zip file returned.