Small caps, oldstyle and tabular figures, ligatures, stylistic sets: toggles on the selected text. A font only offers what it was built with, so if a toggle does nothing, the font does not have it.
DESIGN,
SNAPPED!
Frames that lay themselves out. Shapes that stay editable after you cut them. Components with variants, styles and variables that keep a whole system honest. The everyday tools, done properly, on a canvas drawn by your GPU.
An empty canvas. F draws a frame and R three rectangles inside it, scattered. With the frame selected, the + of the Design panel’s Layout section adds auto layout: the scattered rectangles snap into a row from the frame’s top-left corner, and the Auto layout section shows the direction, resizing, alignment, gap and padding to set.
SNAP!
THE BASICS
The boring parts, done so you never think about them
Every design tool has a pen, a text tool and a rectangle. The difference shows up at 5 pm on a Thursday, when the copy changes and forty buttons need to grow by one word. Either the file takes it, or you spend the evening nudging.
PopCraft's Design mode is built for the Thursday. Auto layout makes frames arrange their own children. Components keep forty buttons as one. Styles and variables keep colours, type and spacing in one place, and a library hands them to the rest of the team without moving under anyone mid-task. The pieces are the ones you know. They just keep up.
4
live booleans, never flattened for you
10
effects, from drop shadow to halftone
6
fill types, shaders included
3
mask kinds: alpha, vector, luminance
LAYOUT
Frames that do the arranging
A frame (F) is an artboard: a screen, a card, a page. Anything inside clips to it and moves with it, and frames nest, so a card inside a screen inside a flow is normal.
Press Shift+A and the frame stops being a box of loose layers. Pick a direction, a gap and padding, and the children line up. Add a row and nothing below it needs nudging. Without auto layout, constraints pin a child to its parent's edges or centre, so resizing a frame still behaves.
An empty canvas. F draws a frame and R three rectangles inside it, scattered. With the frame selected, the + of the Design panel’s Layout section adds auto layout: the scattered rectangles snap into a row from the frame’s top-left corner, and the Auto layout section shows the direction, resizing, alignment, gap and padding to set.
HUG, FILL, FIXED
Three words that replace a lot of nudging
Inside auto layout each child chooses how it sizes. That is how a button hugs its label while a card fills a column.
HUG
as small as its contents
FILL
takes the space left over
FIXED
160 px, always
Around the frames: sections (Shift+S) label regions of the canvas, layout grids sit behind content, rulers give you guides, and the pixel grid turns up by itself past 400% zoom. Print, slides and email files get fixed, numbered pages and masters for the furniture that repeats.
TIDY UP
A scatter becomes a row in one key
You dragged four cards out roughly. Of course you did. Select them and press ⌘⌥T: Tidy up turns a rough cluster into a clean row, column or grid with even gaps.
Snapping helps before you even get there. PopCraft snaps to the edges and centres of nearby things and draws a line to show why, labels equal spacing when three objects are evenly spread, and measures to whatever is under the pointer when you hold Alt.
An empty canvas. R draws four rectangles at uneven heights and gaps. All four are selected and Command-Option-T tidies them up into a clean row with equal gaps.
SHAPES
Booleans that stay alive
Two circles, ⌥⇧S, a moon. The original circles are still inside the boolean, still editable: move the top one and the crescent changes. When you are sure, Flatten commits it to one path.
The shape builder (⌥⇧B) skips choosing an operation: drag across the regions the overlaps make, click to keep, Alt-click to remove. It is the fast way to cut an icon out of a few circles. Rectangles, polygons and stars keep their corner radius, point count and inset until you turn them into paths.
An empty canvas. O draws a big circle and a smaller one overlapping it. With both selected, Alt-Shift-S subtracts the small one: a crescent, with both circles still inside the boolean group in the layers panel.
DRAW AND TYPE
A real pen, and type that behaves like type
An empty canvas. P picks the pen; clicks place corner points and a click-and-drag pulls out a curve. Clicking the first point closes the shape, which becomes a vector layer with a fill.
A launch post with its headline. The headline is double-clicked and its words retyped, then Escape leaves the text layer selected. The Design panel’s Text section shows its text style, font, size and spacing.
ON A PATH
CURVY!Attach text to any shape, or bend it on its own: Arc, Circle or Wave. Rainbow, Skew, 3D ribbon, Stair step and Gravity effects, and SVG export writes a live textPath where it can.
IN A SHAPE
FLOW!Flow text into a circle or a star and every line is as wide as the shape at that height. Auto-size can shrink the type to fit, or pick the size that fills the box exactly.
SYSTEMS
Make it once. Use it everywhere.
A component is the thing you make once. Press ⌘⌥K and every copy you place is an instance: change the main one and they all follow. An instance can still override its text, colours and images without breaking the link, and Detach is there for the genuine one-off.
A launch post with its headline selected. The command palette (Command-K) runs Create component (also Command-Option-K): its icon in the layers panel changes. Option-dragging it makes an instance, which follows every change made to the main component.
Three button components side by side, named Style=Primary, Style=Secondary and Style=Ghost. With all three selected, the command palette runs Combine as variants: they gather into one component set with a Style property, which the layers panel and the Design panel show.
A button is not one component, it is a family. Name the versions Style=Primary, Style=Secondary, Style=Ghost, select them and Combine as variants: they become one component with a Style property, and instances get a dropdown instead of a list of near-identical names.
ONE PLACE FOR EVERYTHING
Styles, variables, brand kits, libraries
STYLES
SAVED!Colour, text, effect and grid styles. A colour style can be a gradient; an effect style a whole stack of shadows. Change the style and everything using it changes.
VARIABLES
FLIP!Named colours, numbers, strings and booleans in collections with modes. Light and Dark, or Desktop and Mobile: a frame switches by picking its mode. Text can read
{{brand.headline}} so the copy lives in one place.BRAND KITS
ON BRAND!Your colours, fonts, logos and copy in one place, applied to a file in a click, so a template arrives already wearing your brand.
LIBRARIES
SHARED!Publish components, styles and variables. Files that use them are told what changed and choose when to update, so the system never moves under someone mid-task. Library colours show in the fill picker, bound.
PAINT
Fills and effects, live on the GPU
Everything on the canvas is drawn by your GPU, so the effects other tools save for export are live while you work, and they work on vectors, text and images alike. A layer carries any number of fills, each with its own blend mode and opacity: solid, gradient (linear, radial, angular, diamond), image, video, pattern, or a live shader like Mesh gradient or Plasma.
A launch post with its frame selected. The fill swatch in the Design panel opens the fill picker; Gradient turns the solid background into a linear gradient, whose stops show in the picker.
A launch post with its badge selected. In the Design panel, the + of Effects lists the effects, and Drop shadow adds one, which shows under the badge at once.
Effects stack, in an order you drag: drop and inner shadow, layer, background, progressive and motion blur, noise, texture, glass, and a real halftone with dot shape, angle, frequency and ink. It stays crisp at any zoom and exports to SVG as vector dots. Blend modes go on every fill and stroke, vectors included, so an inked line multiplied over a flat colour prints the way a printer would print it.
PICTURES
Photos and the media you already have
Assets › Photos searches Openverse for openly licensed pictures without leaving the canvas. By default it only searches licences that allow commercial use and changes, and every photo keeps its title, creator, licence and source: the inspector shows the credit, and SVG and PDF exports carry it in their metadata. Crediting it where you publish is still your job.
The media library lists what your team's files already hold: uploads, generated pictures and clips, stock photos and audio, by project, file, type and source. Pick one and it is copied into this file, so it keeps working offline and in exports. Select an image and you also get non-destructive adjustments (colour, curves, filters, warps), all on the GPU, with the original pixels kept.
A launch post with its frame selected. Its fill opens; Image, then Photos searches “cake”, and a photo picked from the results becomes the frame’s image fill.
A launch post in the editor, signed in. The Shapes panel’s Library section lists the media in the team’s files. The team is set to Brightside Studio and the type to Images, and one of the photos is clicked: it lands on the canvas, copied into this file.
MUSCLE MEMORY
The keys you will learn by Friday
On Windows and Linux, ⌘ is Ctrl and ⌥ is Alt. Everything here is also in the command palette (⌘K), if keys are not your thing.
F
Frame: an artboard that clips
⇧S
Section: a labelled region
⇧A
Add auto layout
R
Rectangle
O
Ellipse
P
Pen: click corners, drag curves
T
Text: click to grow, drag to wrap
⌥⇧U
Union
⌥⇧S
Subtract
⌥⇧B
Shape builder
⌘⌥T
Tidy up into a row, column or grid
⌘⌥K
Create component
⌘⌥M
Use as mask
⌘G
Group
⌘]
Bring forward (⇧ for front)
⇧R
Rulers, then drag out guides
FROM ZERO
A small design system in six moves
- 1
Draw a frame
Press F and drag, or pick a preset: phones, tablets, desktops, paper, social sizes. That is your artboard. - 2
Add auto layout
Shift+A on the frame. Set the direction, gap and padding, and the frame grows around what you put in it. - 3
Type something
Press T. Click for a label that grows, drag for a box that wraps. Pick a Google Font or upload your own. - 4
Make it a component
⌘⌥K. Option-drag to place instances. Change the main one and every copy follows. - 5
Save the styles
Colours, type, effects and grids as styles; brand values as variables with Light and Dark modes. - 6
Publish a library
Other files use your components, styles and variables, and choose when to take an update.
WHAT IT ISN'T
The honest bits
Flatten is one-way for text: it turns letters into outlines you can distort, so flatten a copy if you might want the words back. Text wrap around objects (for Publisher-style layouts) flows around an object's bounding box; contour wrap is not there yet. And .pub import is a plugin, best effort, with no way back out to Publisher.
THE OLD WAY
Draw it, then draw it again
| THE OLD WAY | IN POPCRAFT |
|---|---|
| Nudge every row when one grows | Auto layout: the frame grows, the rows move |
| Forty copies of a button, edited forty times | One component, forty instances that follow |
| A separate file for dark mode | One variable collection with Light and Dark modes |
| Booleans you cannot take back | Live booleans until you choose to flatten |
| Shadows and blur that only look right in export | Every effect drawn live, exported the same |
YOUR FIRST TEN SECONDS
F, T, R. Go.
Press F and drag a frame. Press T, click inside and type. Press R and drag a rectangle. Select anything and change it on the right. That is the whole on-ramp; the designing docs cover the rest.
ASKED & ANSWERED
Questions, answered
Will this feel familiar if I use Figma?
Mostly, on purpose. Frames, auto layout with hug and fill, constraints, components and instances, variants, styles, variables with modes and libraries all work the way a modern design tool user expects, and many shortcuts match.
Are booleans destructive?
No. Union, subtract, intersect and exclude stay live: the original shapes are still inside and still editable. Flatten (Alt+Shift+F or ⌘E) commits it to one path when you want that.
Can I use my own fonts?
Yes. Upload a .ttf, .otf, .woff or .woff2 and it is stored with your account, in every file. Any Google Font loads on demand, and variable fonts show their axes as sliders.
Do effects like halftone and glass export?
They are drawn live on the GPU on the canvas, and the exports use the same renderer. Halftone exports to SVG as vector dots rather than a flattened picture.
Can I import from Microsoft Publisher?
With the optional Publisher Import plugin from the marketplace, best effort, via libmspub. Complex documents may do better exported to PDF from Publisher and imported as a PDF. There is no .pub export.
Where do stock photos come from?
Openverse: openly licensed Creative Commons and public domain pictures. By default only licences that allow commercial use and changes are searched, and each photo keeps its credit with it.
THE MANUAL, FOR THE DETAILS
KEEP EXPLORING
Goes great with
SNAP! YOUR TURN.
Auto layout, components, variants and styles that keep up. Free to start, in your browser or on your Mac.