Updated October 14, 2026. Written for FigCraft 0.5.1 (what changed since). Prices in USD.
What the browser editor gives you for prototyping
| Part | In FigCraft in the browser |
|---|---|
| Triggers | On click, while hovering, while pressing, on drag, mouse enter, mouse leave, mouse down, mouse up, after delay, key press (game controller buttons too) |
| Actions | Navigate to, back, scroll to, open, swap and close overlay, open link, change to (a component variant), set variable, set variable mode, if / else conditions |
| Transitions | Instant, dissolve, smart animate, move in, move out, push, slide in, slide out, with easing curves and springs |
| Playing it | A preview pane on the canvas and a full presenter with phone, tablet and laptop frames |
| Keeping it | Not possible: no Save, no Export, gone when the tab closes |
| Sharing it | No prototype link (the desktop app doesn't have one either yet) |
The full list is in FigCraft's prototyping notes. Next to Figma, it lacks media triggers and video, and it can't mirror a prototype to a phone.
Step 1: make the screens
- Open the editor, press F and pick a phone size from the frame presets in the Design panel.
- Name the frame 1 Welcome in the layers panel. Duplicate it twice and name the copies 2 Sign up and 3 Home.
- Put a button on each screen: a text layer wrapped with Shift+A works fine. Add a back arrow to the top of screens 2 and 3.
Plain grey boxes are enough for testing whether people find their way through a flow. If you want screens that look real, the AI panel draws a 390 × 844 mobile screen from a sentence and adds it as editable layers. It runs on your own OpenAI, Gemini or OpenRouter key, or on Craft Apps credits, with 10 free credits for a new account.
Plan for smart animate now. It matches layers by name and position in the layer tree, then animates their position, size, rotation, opacity, colour and corner radius between screens. A card named Plan card on screen 2 and screen 3 slides and grows on its own; a card named Rectangle 12 on one screen and Card on the other just fades.
Step 2: connect the buttons
- Press Shift+E to switch the right-hand panel from Design to Prototype.
- Select the button on 1 Welcome, then drag its connection handle onto the 2 Sign up frame. A blue connection curve appears.
- In the interaction editor, check that the trigger is On click and the action is Navigate to 2 Sign up. Pick an animation: Push from the right reads as "next step" on a phone; Smart animate suits screens that share layers.
- Connect the button on 2 Sign up to 3 Home the same way.
- Select each back arrow and give it On click, Back. Back plays the way in backwards, so a push from the right returns to the right.
We'd change the easing before the duration. The spring presets (gentle, quick, bouncy, slow) overshoot slightly and settle, which feels like a native app; a linear 300 ms move feels like a slideshow.
Step 3: add a bottom sheet and a splash screen
Two small additions make a prototype feel like an app. For a bottom sheet, draw it as its own frame (say, Sheet: Choose plan), then connect a button on 3 Home to it with the action Open overlay and the position at the bottom. Background dimming and "close when clicking outside" are there, and the second is on by default, so a tester can tap away to dismiss it.
For a splash screen, add a frame 0 Splash with just a logo, select the frame itself and give it the trigger After delay, 1,500 ms, Navigate to 1 Welcome with a dissolve. The delay counts from when the screen appears, so it plays the same after every restart.
The presenter opens on a flow's starting point, so set 0 Splash as the starting point in the Prototype panel.
Step 4: preview it, then present it
Press Shift+Space for the preview pane. It plays the selected frame over the canvas and follows your edits live, which is the fastest way to tune a transition: change the easing, click the button in the pane, repeat.
When the flow works, press Ctrl+Alt+Enter (Option+Cmd+Enter on a Mac) to present it. Inside the presenter:
| Key | What it does |
|---|---|
| F | Full screen |
| R | Restart from the starting point |
| Z | Cycle the size options (fit, fit width, fill, 100%) |
| Right arrow, Space or N / Left arrow | Next / previous frame |
A click where nothing reacts briefly flashes the screen's tap targets. That helps a tester who is stuck, and it shows you where a connection is missing. Turn it off in the presenter's options if you're measuring whether people find the button on their own.
Running a test when nothing is saved
Build and test in the same session, on the same computer. Sit the tester in front of the laptop with the presenter in full screen, or share your screen on a call and click where they tell you to. Press R between testers so everyone starts on the splash screen.
Leave the tab open until you're done. Once you've started working, the editor asks before you leave or reload the page, but closing the browser or a crash still loses the work, and there is no copy anywhere else. Write your three or four test tasks somewhere outside the prototype ("You want the yearly plan. Sign up for it.") so a reload doesn't take them too.
When you need a link or a saved file
If the prototype has to go to someone by link, or live past today, the browser editor is the wrong place for it.
| Option | Saves | Share link | Price |
|---|---|---|---|
| FigCraft desktop | Yes, .figcraft files on your disk | No; you can share the file, or run a live session from the app | Free |
| Penpot | Yes, in your Penpot account | Yes, one per flow | $0 on the Professional plan |
| Figma Starter | Yes, up to 3 files in one team | A file link; prototype-only links need a paid plan | Free |
Penpot's prototyping is simpler (on click, mouse enter, mouse leave and after delay; navigate, overlays, previous screen and open link; dissolve, slide and push), which covers a typical click-through test. FigCraft goes further with smart animate, drag and key triggers, and variables with conditions, but only Penpot and Figma give you a link to send. Our Penpot vs FigCraft comparison goes through the rest.
For a test this afternoon, open the editor, build the three screens and the splash, and present it in full screen. For a prototype you'll keep iterating on, download FigCraft and build it there from the start, since nothing made in the browser can be moved across.