Create your first design
1. Create a design
Section titled “1. Create a design”Launch Figmaboy and choose New design. Give the file a name that will still make sense in your recent designs.
2. Open Codex
Section titled “2. Open Codex”Select Codex in the right sidebar. You can also press Ctrl + `.
The built-in chat starts Codex app-server and supplies the bundled Figmaboy tools automatically. No MCP registration is required.
Choose a model and reasoning level at the bottom of the composer when you want to change the defaults.
3. Describe the screen
Section titled “3. Describe the screen”Give Codex the target size, required content, and visual direction:
Build a 390 × 844 mobile radio player in the current page. Use a warm ivory canvas, near-black surfaces, and one signal-red accent. Include a frequency display, five station presets, playback controls, and bottom navigation. Keep every visible element native and editable. Review the completed frame, fix visible spacing or clipping problems, then save it.
Codex inspects the document before editing. New frames and layers appear in the layer tree while it works.
4. Judge the result
Section titled “4. Judge the result”Inspect the finished frame on the canvas. Every Codex edit uses normal Figmaboy history, so Ctrl/Cmd + Z reverts it.
For a focused correction, select a layer or frame and describe the problem:
Keep the structure. Make the station cards more compact and give the active station a clearer state.
5. Evolve the direction when one pass is not enough
Section titled “5. Evolve the direction when one pass is not enough”Select one frame and run:
/evolve Make this dashboard easier to scan with a clearer hierarchy and less visual noiseFigmaboy freezes the selected frame as a reference and reconstructs the idea in a new frame beside it. Read Evolve a frame for the construction loop and Stop behavior.
Composer shortcuts
Section titled “Composer shortcuts”- Type
@selection,@current-frame,@page, or@designto identify scope. - Type
$to add an installed Codex skill inline. - Paste or drop a PNG, JPEG, or WebP as a visual reference.
- Send another message while Codex works to steer the active turn.
- Type
/for/review,/evolve,/save,/compact, and/undo.
Continue with Chat beside the canvas or learn the canvas and layer model.