Any layer can say what it is on the web: a form, a text field, a dropdown, a checkbox, a radio or a button. It keeps its look on the canvas and becomes a real control on the page. A field can write a variable as you type.
CLICK
THROUGH IT!
Drag a layer onto a screen and it is connected. Then go further: covers that fly between screens, maps you flick, variables that keep score, real form fields and your own React code. A prototype that behaves, not a slideshow that pretends.
An onboarding prototype in Prototype mode. The illustration on the Welcome screen is dragged onto the Sign in frame, which draws a connection; the inspector shows On click, Navigate to Sign in, Smart animate.
CLICK!
THE PROBLEM
Most prototypes are pictures with hotspots
You know the one. Fourteen screens, a hotspot on each button, and a toggle that only works if you click it in the right order because “on” and “off” are two different screens. The stakeholder drags the carousel. Nothing happens. “It will do that in the real thing.”
In PopCraft, Prototype is a mode of the file you are already designing in. While you are in it, dragging a layer onto a frame connects them, so the canvas becomes a wiring diagram. And the wires do more than jump: they drag, scroll, scrub timelines, set variables and branch. One screen can hold every state it has.
7
kinds of trigger, from click to key down
9
3D transitions, cube to depth pull
3
breakpoints out of the box
0
duplicate screens per state
CONNECT
Drag a layer onto a screen. Done.
Click Prototype in the top bar, then drag the layer onto the frame it should open. A line follows the pointer, the target lights up, and when you let go the inspector shows On click, Navigate to that frame, with Smart animate over 300 ms.
Change any of it there. Make it an overlay, positioned against any of the eight edges or exactly where you drew it, that closes on a click outside. Press Present and try it.
An onboarding prototype in Prototype mode. The illustration on the Welcome screen is dragged onto the Sign in frame, which draws a connection; the inspector shows On click, Navigate to Sign in, Smart animate.
WIRING
Pick one from each column
Every interaction is a trigger, an action and the way it moves. Here is the whole switchboard. Where a drag could start, a click waits until you let go, so a card in a swipeable strip still opens on a tap.
WHEN…
- On click / On press
- On hover
- On drag (any way, or one direction)
- While scrolling
- Mouse enter / leave
- After timeout
- Key down
DO…
- Navigate · Back
- Overlay · Swap · Close
- Scroll to
- Set variable · Set mode
- Change to a variant
- Conditional
- Control timeline
- Orbit in 3D
LOOKING LIKE…
- Instant · Dissolve
- Smart animate
- Slide · Push · Move out
- Cube · Carousel · Flip
- Swing · Stack · Depth
- Spring: gentle, quick, bouncy
SMART ANIMATE
Draw the before and the after
Smart animate matches layers by name between two frames and tweens the differences: position, size, rotation, scale, opacity, corners and colours. A card that grows into a detail view animates itself. You did not key anything.
Easing is linear, ease in, out, or both, or a spring: gentle, quick or bouncy. The 3D transitions turn screens through real perspective. On a published site they draw on the GPU where the browser has WebGPU, as CSS 3D where it does not, and as a dissolve where neither will do.
An onboarding prototype. Present plays it from its first screen; a click on the button goes to the next screen with Smart animate: layers with the same name glide to their new places instead of cutting.
HAND-OFFS
Things that fly between screens
Give a layer a shared element key, say cover, and the same key to the layer it becomes on the next screen. Smart animate hands one to the other wherever each sits. Add a stagger and the destination's layers hand over one after another: backdrop, then cards, then words. Back plays it all in reverse and lands you where you left.
The Music app · Orbit template presented from its Home screen. A tap on the mini player at the bottom goes to the full-screen player with Smart animate, and the cover, a shared element, grows from the mini player into the big artwork. The chevron goes back, and the cover shrinks into the mini player again.
FOLLOW THE FINGER
Drags and scrolls that scrub a timeline
Any frame's timeline (the one you key in Animate) can be driven by a drag instead of the clock. Key the carousel sliding card by card, put a marker at each resting place, and give the layer On drag › Control timeline › Scrub. Let go and it stays, settles on a marker (a flick carries on to the next), or plays on, like a song's scrubber.
While scrolling does the same with a scroll: a header that folds away as the list moves up. And a click can play, pause or seek a timeline, so a pause button can morph into play with Change to while it stops the song.
The Music app · Orbit template presented from Home. Its star map of genre planets is a timeline scrubbed by a drag, with a marker at each zone: a drag left glides to the next planet, and letting go settles on it.
The Music app · Orbit template presented from its Now playing screen. Dragging the song's scrubber scrubs a timeline; the volume knob is a motion component scrubbed on its own clock; and the pause button morphs to play while it pauses the song's timeline.
An onboarding carousel presented. Its cards are a timeline with a marker at each card, driven by On drag › Control timeline › Scrub. Dragging left moves to the next card and letting go settles on a marker; a flick carries on to the next.
An onboarding prototype. Present plays it from its first screen; a click on the button goes to the next screen with Smart animate: layers with the same name glide to their new places instead of cutting.
LOGIC
Prototypes that keep score
Variables hold numbers, text and on/off flags. Set variable changes them, to a value or to an expression worked out when the action runs. Conditional runs the first branch whose condition holds. Live values bind a layer's width, text, visibility, opacity, position, rotation or scale to an expression, worked out on the canvas, in present mode and in exports.
Set variable › Expression
health - 15health = 80→ 65min(maxHealth, health + 25)health = 90, maxHealth = 100→ 100(focus + 1) % 5focus = 4→ 0pad(score, 6)score = 420→ 000420health / maxHealth * 320health = 50, maxHealth = 100→ 160 (a bar's width)health < 30health = 20→ true (show the warning)Nothing is evaluated as code. An expression can only read variables and call the built-in functions; dividing by zero gives 0, and one that does not work out leaves the value as it was. A number set with a glideeases there in present mode, so a score counts up and a health bar drains.
The EMBERFALL game UI with its main menu selected. Present fills the screen with the menu. The down arrow moves the highlight from item to item (each press sets the menu’s focus variable to an expression), and Enter runs a conditional that opens the screen the focused item names.
The EMBERFALL game UI in Prototype mode. A menu item’s label on the Main menu screen is selected, and the Prototype panel shows its Live values: its opacity and its sideways position are expressions of the menu’s focus variable, so the focused item lights up and slides out.
REAL INPUT
Forms, collections and your own code
COLLECTIONS
LIST!Posts, products, team members, as records in the file. Repeat a card for each one, bind texts and pictures to fields, or make a page per record at its own address, like
/blog/first-post.CODE
REACT!A component drawn by your React module, given its properties as props. It runs on the web page; on the canvas a sandboxed frame draws it and hands back a picture. Packages are pinned to an exact version.
The website template with nothing selected. Collections in the Design panel opens the file's content: a Posts collection with a title and a reading time for each record, and under each field's name the token a text says it with. A record is added and its title typed into the new row.
A frame above the website template's first screen, made a component and selected. In the Design panel's Code section, New code module opens the editor with a starter React component that reads the component's size. With the editor closed, the canvas shows a picture of what the code draws in place of the component's layers.
EVERY WIDTH
One design, three breakpoints, a live page
A Web or App file has a breakpoint bar: Desktop at 1280 px, Tablet for windows up to 1024 px and Phone up to 640 px. Pick Phone, stack the row, hide the sidebar. The Design panel lists what that layer sets differently there, and Desktop is untouched. Breakpoints change layout, size and visibility; colour and words stay the same everywhere.
The web preview docks beside the canvas and shows the page as a website, not a picture: auto layout as flexbox, real text, variables as CSS custom properties. Interactions run as they do when you present, and it redraws where you are as you edit. What it does not do yet: timeline controls, drags, scroll scrubs and Orbit in 3D. Present for those.
The website template with its row of three feature cards selected. Phone is picked on the breakpoint bar over the canvas, and the page is laid out again at a phone's width. In the Design panel the row's flow is set to vertical: the cards stack, and an "At Phone" section lists the layout mode as what the row sets differently there. Back on Desktop the cards sit side by side as before.
The website template on the canvas. From the ⋯ menu, Web preview docks the page beside the canvas as a real website. The screen picker goes to another of the site's pages, and the width picker narrows the window to a phone's, where the page reflows.
SHOWTIME
Present it, or just share the link
Press play to present fullscreen, or wrap it in an iPhone, iPad, MacBook or Surface frame so it looks like a device. A prototype advances by its interactions, not page order, so the room sees a working thing. In Chrome and Edge you can present in a window sized for a video call, with your notes and a timer in the editor. Or skip the meeting: share the link, and they open the same file.
A pitch deck. Present fullscreen fills the screen with the title slide. The right arrow moves on through the builds and slides, B blacks the screen out and brings it back, and Esc ends the show.
FROM ZERO
A prototype that thinks, in six moves
- 1
Switch to Prototype
Click Prototype in the top bar. Now dragging a layer onto a frame connects them instead of moving it. - 2
Drag to connect
Drop a button on the screen it opens. You get On click › Navigate to › Smart animate over 300 ms, ready to change. - 3
Name the layers alike
Smart animate matches layers by name between the two screens and tweens what changed. Draw the before and the after. - 4
Add a variable
A count, a flag, a health bar. Set variable changes it; Live values binds a width, a text or a visibility to it. - 5
Branch with a Conditional
If health ≤ 0, go to Game over; else carry on. One screen per state is gone. - 6
Present it
Press play, or open the web preview to click through it as a real page beside the canvas.
THE OLD WAY
Screens and hotspots
| THE OLD WAY | IN POPCRAFT |
|---|---|
| A screen for on, a screen for off | One screen, a boolean variable |
| Carousels that do not drag | On drag scrubs a timeline and settles on markers |
| Fake form fields | Real inputs on the page, writing variables |
| Developers guess the responsive rules | Breakpoints you set, as media queries on the page |
| A separate prototyping file to keep in sync | A mode of the file you are designing in |
PLAY ONE NOW
Open a game menu and press ↓
Click New › File, search for game, and open a Game UI template. Select the Main menu and press Present. Every highlight, every health bar and every screen change is variables and conditionals, built from what is on this page. The prototyping docs show how.
ASKED & ANSWERED
Questions, answered
Is Prototype a separate tool or file?
Neither. It is a mode of the same file. Prototype links are drawn on the canvas in every mode by default, so you see the flow while you design.
Can a prototype keep score, or remember what I typed?
Yes. Variables hold numbers, text and on/off flags; Set variable changes them with expressions; Conditional branches on them; and Live values bind widths, text, visibility, position and more to expressions. A form field can write a variable as you type.
Does it run real code?
Code components do: a React module draws a component on the web page, given the component's properties as props. Code never runs inside the editor itself; a sandboxed frame draws it and the canvas shows the picture.
What does the web preview not do yet?
Timeline controls, drags, scroll-driven scrubs and Orbit in 3D do not run in the web preview. Present the prototype to play those. Live GPU layers there need WebGPU.
Can I show it in a device frame?
Yes: an iPhone 14 or SE, iPad Pro, MacBook Pro or Surface Pro.
How much content can a collection hold?
A file holds up to 50 collections and 2,000 records. Records are part of the file, so they undo, version and sync like the design.
CLICK! YOUR TURN.
Journeys, logic and real code components you can click through. Free to start, in your browser or on your Mac.