Conversion examples

Preview HTML, copy JSON, or edit in Playground.

Illustrative content and values.

Figma plugin ↗

Hero section

Typography, solid fills and rounded corners.

TextFillsRadius

Edit example

Loading preview…

Figma plugin guide →

Feature card

Inline SVG and a simple flex layout.

SVGFlexText

Edit example

Loading preview…

Figma plugin guide →

Pricing card

Editable text and a composed card layout. Sample pricing only.

TextSpacingShadow

Edit example

Loading preview…

Figma plugin guide →

Profile card

Embedded image, inline SVG and text.

ImageSVGFlex

Edit example

Loading preview…

Figma plugin guide →

Image card

A self-contained image with object-fit.

ImageObject-fit

Edit example

Loading preview…

Figma plugin guide →

Statistics panel

Text, spacing and measured geometry. Illustrative values.

TextGeometrySpacing

Edit example

Loading preview…

Figma plugin guide →

Conversion examples

Hero section

Conversion notes

Feature card

Conversion notes

Pricing card

Conversion notes

Profile card

Conversion notes

Image card

Conversion notes

Statistics panel

Conversion notes