Import and export
Brilliant exports the current selection to a long list of formats, copies elements to the clipboard as images or code, and imports from images, SVG, Sketch, Figma, and other Brilliant files. This page is the full tour of both directions.
Export always works on your selection, never the whole canvas automatically. Select a frame and its children come along. To export a whole canvas, select all with Cmd+A first.
Where export lives
There are three ways to export by hand:
The Export panel in the right toolbar. The main hub. It appears when one or more elements are selected and lets you pick format, resolution, fit, background, video options, and PDF page mode, then run several export configs in one click. It is the only place plain video (MP4 and MOV) and multi-page PDF live.
Commands and the one shortcut.
Cmd+Eexports a PNG with a save dialog. Every other format is a command in the command palette.The right-click menu. An Export as submenu for quick file exports, a Copy as submenu for the clipboard, and Send to for Figma.
Formats
| Format | Kind | Notes |
|---|---|---|
| PNG | Raster | Transparency supported. The default for Cmd+E |
| JPEG | Raster | No alpha; a transparent request falls back to the canvas color. Quality 90 |
| WebP | Raster | Transparency supported. Exports lossy at quality 90 (see the note below) |
| SVG | Vector | Native filters for drop shadow, outer glow, and layer blur. Shaders, inner shadow/glow, background blur, and filter fills embed as rasterized PNG. Angular gradients approximate as linear |
| Vector | Embedded fonts. Any element with an enabled effect rasterizes whole. Single or multi-page | |
| HTML | Code | HTML plus inline CSS, in three flavors: snippet, full document, and flex |
| React (JSX) | Code | The same markup as HTML with JSX style objects, ready to paste into a .tsx file |
| MP4 | Video | H.264 or HEVC on macOS, H.264 on Windows. No alpha |
| MOV | Video | HEVC with alpha, or ProRes 4444. macOS only, transparent background supported |
| Replay | Video | An animated reveal: elements fade in one after another with a shimmer pass |
MP4 and Replay export work on macOS and Windows (Windows encodes H.264 only). MOV, and with it transparent video, is macOS only. Linux has no video export.
Export by hand
Select elements on the canvas. A frame brings its children.
Run the export:
Cmd+Efor a PNG, a command from the palette, right-click Export as, or configure the Export panel and click Export.A save dialog opens with a timestamped default filename. Choose a location and save.
Export panel options
| Option | Values | Default |
|---|---|---|
| Format | Any of the formats above. Choosing HTML reveals a variant dropdown: Page, Snippet, or Flexbox | PNG |
| Resolution | Original (1x through 4x), 720p through 8K, social presets (Portrait, Square, Story), device presets (iPhone, MacBook Pro), and Custom. Hidden for SVG and PDF | Original (1x) |
| Width / Height | Target pixel size. Set one to scale proportionally, or both with a fit mode for an exact size | none |
| Fit mode | Fit (letterbox), Fill (crop), Stretch, or Repeat (tiled). Used only when both width and height are set | Fit |
| Background | Transparent or Canvas (the canvas background color) | Transparent |
JPEG and MP4 have no alpha, so a transparent request falls back to the canvas color. PNG and MOV keep alpha. For SVG and PDF the resolution row is hidden, because vector output is resolution-independent.
Batch export
The + button in the Export panel header adds another export config row, each with its own format, resolution, fit, and background. The Export button runs every row at once. Use it to ship, say, PNG at 1x, PNG at 2x, and an SVG together in a single click.
Video export
Video renders animated shader fills frame by frame into a hardware-accelerated file, on macOS and Windows. It is available only from the Export panel (no command, no shortcut). Replay is the exception, since it has a sensible one-click default.
For the full platform breakdown and a fuller walkthrough of replay, see Video and replay.
Select elements, choose MP4 or MOV, set the inline options, click Export, and save. A progress bar shows the frame count and can be cancelled.
| Option | Values | Default |
|---|---|---|
| Duration | 0.5 to 60 seconds | 10s |
| FPS | 15, 24, 30, 60 | 60 |
| Quality | Low, Medium, High | Medium |
| Resolution | Same presets as image export | Original (1x) |
The codec follows the format: MP4 offers H.264 and HEVC on macOS and H.264 on Windows (no alpha either way), MOV offers HEVC with alpha and ProRes 4444. Only MOV with an alpha codec supports a transparent background. Video animates shader fills only; static elements look identical in every frame, and there is no keyframe timeline.
Replay
Replay is a one-click animated reveal of your selection: each element fades in with a shimmer pass. It defaults to MP4, but you can switch the container to MOV for a transparent background. Run it from the command palette, from right-click Export as then Replay (which uses 2x scale for crisp retina output), or from the Export panel. Total duration comes from your per-element pacing times the element count.
Multi-page PDF
PDF is the one format with a multi-page mode, in the Export panel. A dropdown next to the PDF format pill switches between single and multi-page.
Single-page puts the whole selection on one page sized to its bounds.
Multi-page makes one page per top-level frame in the selection.
The settings (gear) button shows the page list. Drag rows to reorder, or use the per-page checkbox to exclude a page without deselecting it. Because it is a per-config setting, one batch click can ship a single-page and a multi-page PDF together.
Copy to the clipboard
Copy your selection as an image or as code, ready to paste into an editor, a doc, another design tool, or a chat. Reach these from the command palette or the right-click Copy as submenu.
| Copy as | What you get |
|---|---|
| PNG (and @2x, @4x) | A PNG image at screen resolution, or multiplied up for retina |
| WebP | A WebP image (lossy quality 90, macOS and Windows; Linux falls back to PNG) |
| SVG | SVG markup |
| HTML, HTML (document), HTML (flex) | An HTML/CSS snippet, a self-contained document, or a flexbox layout |
| React | A React JSX snippet |
| CSS | CSS properties (size, position, colors, border, radius, rotation, text) |
| Blueprint | Brilliant's native element format, full hierarchy, pasteable back into Brilliant or shared with AI tools |
PNG copies at your display's pixel ratio, so what you see matches what you paste. For general pasting, prefer Copy as PNG: most apps pick PNG over WebP anyway.
Other design tools
| Format | Import | Export |
|---|---|---|
Sketch (.sketch) | Yes, via Import Sketch File with page selection | Yes, via Save as Sketch File |
| Figma | Via a Figma URL or the Copy to Brilliant plugin | Via Send to Figma (needs the paired plugin) |
Illustrator (.ai) | Bridge through SVG | Bridge through SVG |
Photoshop (.psd) | Export layers as PNG, then import | Export layers as PNG |
Send to Figma pushes your selection to the paired Brilliant Figma plugin. It is only enabled when the plugin is connected, and otherwise falls back to the clipboard.
Import
Images
| Action | How |
|---|---|
| Import a file | Cmd+Shift+O, or Import in the command palette |
| Paste | Cmd+V with an image on the clipboard |
| Drag and drop | Drag image files onto the canvas |
Supported: PNG, JPEG, GIF, BMP, and WebP, plus TIFF, HEIC, HEIF, and AVIF on macOS. Imported images become rectangle elements with an image fill, placed at the canvas center.
SVG
Import an SVG with Cmd+Shift+O (pick a .svg file), the Import SVG command, or Cmd+V with SVG markup on the clipboard. It comes in as native, editable Brilliant elements: rectangles stay rectangles, circles stay circles, paths become vectors, groups become frames, and text stays text, with fills, strokes, and transforms preserved. Icons and simple illustrations import cleanly; very complex SVGs may need cleanup.
Sketch
Run Import Sketch File from the command palette to browse for a .sketch file. After parsing, pick which pages to import; each becomes its own canvas of native elements.
Figma
Bring Figma designs in by pasting a Figma URL into the right toolbar, or with the Copy to Brilliant plugin. It has its own page, since there is a bit to know about sign-in and rate limits: see Import from Figma.
Brilliant .bl files
Cmd+Shift+O and a .bl file imports it into an Imports/ folder in the current workspace, with its images, registered as a new canvas and switched to. This needs an open workspace. Legacy .design files import the same way.
How paste decides
Cmd+V inspects the clipboard and handles, in order: Brilliant elements (full hierarchy, same or cross-canvas), image data, SVG markup, Figma data from the plugin, the legacy Brilliant YAML format, Brilliant Blueprint, HTML (converted to native elements), and finally plain text (which becomes a text element).
Next
Where files live: Canvases and files.
The full Figma flow: Import from Figma.
Every shortcut: Keyboard shortcuts.