Coming from Figma

If you already think in frames, components, and auto layout, you know most of Brilliant. This page maps Figma's concepts onto Brilliant's, calls out the few places the two genuinely diverge, and gives you the full keyboard-shortcut translation so your muscle memory keeps working.

The concept map

Almost everything you build in Figma has a direct home in Brilliant. The names line up more often than not.

Figma	Brilliant	Notes
Page	Canvas	A canvas is a single `.bl` file. Importing a Figma file makes one canvas per page.
File (multiple pages)	Folder of canvases	A multi-page import lands as a folder named after the file, one canvas inside per page.
Project or team	Workspace	A workspace is just a folder on disk. Open one with ⌘O.
Frame	Frame	A real container: it clips its contents, runs auto layout, and accepts drops.
Group	Group	Hugs its contents, structural only, children can't be dragged out on the canvas.
Auto layout	Auto layout	Same direction, spacing, padding, wrap, and alignment controls.
Constraints and resizing	Hug / fill / fixed sizing	Each element sizes per axis; pull a child out of the flow with its ignore-auto-layout toggle.
Component (main)	Master component	A normal frame marked with a purple label and a filled diamond in the layers list.
Instance	Instance	A linked copy that syncs from its master except where you override.
Component set with variants	Component set	Named properties become axes; each value combination is one variant.
Styles and variables	Design system tokens	Brilliant's design system is the token layer; bind colors, type, and spacing to it.

Frames and groups are covered in Frames and auto layout, components in Components, and canvases in Canvases and files.

What genuinely differs

Most of Brilliant will feel like home. These are the spots where it doesn't, and where a Figma habit will trip you up until you know the difference.

Selection is grouped per frame

This is the big one. When your selection spans more than one frame, Brilliant draws a separate selection rectangle for each frame, each with its own handles. Select two elements in Frame A and three in Frame B, and you see two rectangles, not one box around all five.

Flip the toggle below between Brilliant's per-parent model and the flat one a Figma habit expects, on the same selection across two frames. The blue outlines are drawn to stand in for the real selection chrome.

Selection model

Selection is grouped per frame (chrome is illustrative). Live on a desktop browser with WebGPU. Flip a control and the canvas recompiles in place.

It's deliberate, and it makes multi-frame edits behave sanely. Every operation runs once per frame, in that frame's own coordinate space:

Align Left lines up the elements in Frame A among themselves, and the elements in Frame B among themselves, independently. Nothing aligns across a frame boundary.
Resize, distribute, and rotate each work against their own frame's box.
Snapping stays inside the frame you're working in, so an element never yanks toward something in a different frame.

When everything you've selected shares one parent, this is invisible: you get a single rectangle that behaves exactly as you'd expect. Full detail lives in Selection and editing.

Select a frame to restyle all its text

Select a frame and any typography change (font, size, weight, bold, alignment) applies to every text element inside it at once. You don't have to drill in and multi-select the text nodes. Structural and geometric edits still target only what you explicitly selected.

Your files are folders and files on disk

Brilliant is local-first. A workspace is a folder, each canvas is a plain-text Blueprint .bl file, and images live in Assets/ directories beside them. Nothing is uploaded until you choose to publish a project to brilliant.design. Because they're plain text, your designs drop straight into Git: branch them, review them in pull requests, and git blame a stray color change like code.

There's also no save button. Brilliant autosaves continuously, and there's no ⌘S for normal work.

Undo is per canvas

Each canvas keeps its own undo history. ⌘Z undoes the active canvas's last action, and switching canvases never clears it. Undo is session-only. For persistent history you use Git, and a project published to brilliant.design also keeps named checkpoints and a full version history.

Components live on the canvas, not in a panel

There's no Components panel or dedicated Components page. Masters are regular frames on whatever canvas you put them on; a common convention is to keep them together on one canvas. A contextual Component section appears in the right toolbar when a component, set, variant, or instance is selected.

There's also no swap-instance command. To repoint an instance at a different master, detach it and make a fresh instance. Within a set, you don't swap: you flip the property dropdowns to pick a variant. See Components for the full model.

Shortcut translation

Your Figma muscle memory mostly carries over. These are the shortcuts a migrant reaches for most, with the ones that differ called out. Shortcuts shown are the macOS defaults; on Windows, Cmd maps to Ctrl.

Same as Figma

Action	Shortcut
Move tool	V
Frame tool	F
Rectangle	R
Ellipse	O
Text	T
Line	L
Pen	P
Group / ungroup	⌘G / ⌘⇧G
Add auto layout	⇧A
Duplicate	⌘D
Select all	⌘A
Rename layer	⌘R
Hide / show selection	⌘⇧H
Bring to front / send to back	] / [
Align left / right / top / bottom	⌥⇧L / ⌥⇧R / ⌥⇧T / ⌥⇧B
Undo / redo	⌘Z / ⌘⇧Z
Drill into frame / step out	Enter / ⇧Enter
Cycle siblings	Tab / ⇧Tab

Different in Brilliant

Action	Figma	Brilliant
Frame the selection	⌘⌥G	⌘F
Export selection to PNG	⌘⇧E	⌘E
Outline text	⌘⇧O	⌘⌃O
Use as mask	(see note)	⌘⌃M
Color picker	none by default	⌃C

Brilliant binds masks to ⌘⌃M because macOS reserves Cmd+Option+M for "Minimize All". Component shortcuts match Figma: Create Component is ⌘⌥K and Detach Instance is ⌘⌥B. The other component actions (Create Instance, Create Component Set, and so on) have no default key and live in the command palette or the right-click menu.

Only in Brilliant

Action	Shortcut
Global search (commands, canvases, layers, fonts, chats)	⌘K
Command palette	⌘⇧P
AI chat input	/
Scale mode (scales strokes, radii, and text)	K
Combos (macro system)	⌘⇧M
Overlay mode	⌃F

On Windows a few of these change or drop out, because their chords collide with essential Ctrl shortcuts: the color picker moves to C, and Outline Text and Overlay Mode are unbound by default (reach them from the command palette). Every shortcut is fully remappable in the Shortcuts panel with ⇧?, so you can rebuild any layout you miss.

Bringing your Figma files over

You don't have to rebuild anything by hand. Brilliant imports Figma files directly in three ways: paste a file link into the web New menu, paste a URL into the desktop editor's Import section, or push a selection from the Brilliant plugin inside Figma. Figma components come across as real, editable components and sets. The full walkthrough, fidelity notes, and rate-limit tips are in From Figma.

Learn the editor: Quick Tour.
Import your designs: From Figma.
See how the tools compare: Brilliant vs Figma.