Export and code
Export an artboard or a layer as PNG, SVG or PDF, record an artboard as a WebM video, and copy any part of a design as HTML, React, Tailwind, Vue, Svelte, SwiftUI or Jetpack Compose.
Export a picture or PDF
Select an artboard, or a single layer, and scroll to Export at the bottom of the right panel:
- Pick PNG, SVG or PDF. For PNG, pick the size: 1x, 2x or 3x.
- Click Export and choose where to save it (it starts in Downloads).
A layer exports on its own, at the size it's drawn. Pictures from your design are included. PDF is one page, the size of the artboard. Design remembers your format for next time (PNG at 2x to begin with). Exports are up to 10,000 px a side; a bigger artboard is cut off.
SVG files are real vector shapes, so you can open and edit them in Figma, Illustrator, Sketch or Inkscape. Every layer comes out as its own named group: boxes keep their fills (colours, gradients and pictures), borders, rounded corners and shadows; text stays editable text, line by line, in its font, size, weight and colour; vector shapes keep their paths; and frames that clip their contents still clip them. The few things SVG can't draw (an angular gradient, a tiled pattern or vertical text) are kept as they look in Machine for that one layer. The other app needs the same fonts installed to show the text exactly as it looks here.
Record a video
An artboard with animations or shader fills can be saved as a short video that shows them moving. Select the artboard (not a layer) and find Video under Export:
- Pick how long: 3 s, 5 s or 10 s.
- Click Record and choose where to save it (it starts in Downloads).
The bar on the button shows how far along it is. You can keep designing while it records; the video shows the artboard as it was when you clicked. Click Cancel to stop, and nothing is saved.
Videos are WebM at 30 frames a second, which browsers, VLC and most video editors open. MP4 isn't available yet; to get one, convert the WebM with a free tool such as HandBrake. Animations and shaders start from the beginning as the recording starts. Artboards bigger than 1920 px on their long side are scaled down to fit.
Copy as code
The Copy button in the top bar copies what's selected as code, ready to paste into a project. Its arrow (Choose a code format) copies in another language (and remembers it), or opens Copy whole artboard, where you can read the code before you copy it:
| Format | You get |
|---|---|
| HTML | One file with inline CSS. |
| React / Next.js | A component with inline styles. |
| React + Tailwind | A component with Tailwind classes only. |
| Vue | A single-file component. |
| Svelte | A component with inline styles. |
| SwiftUI | An iOS and macOS view. |
| Android · Jetpack Compose | A Kotlin composable. |
The web formats keep every fill and border. SwiftUI and Compose keep a layer's bottom colour, its top gradient and its borders; image fills are left out, and Compose turns a linear gradient's angle to the nearest 45°.
Shapes and icons (vector layers) come out as an inline <svg> in the web
formats, a Path in SwiftUI and a Canvas in Compose. A mask comes out as
a box clipped with mask-image in the web formats; SwiftUI and Compose leave
the clipping out.
In Copy whole artboard, use ↑ and ↓ to pick a language and Enter to copy. Right-click any layer or artboard for Copy as your last format, too.
Take it further in Machine Code
To turn a design into a working app, open it in Machine Code: a coding agent there can see every artboard and build it for real.