Layout Editor: A Full Tour

The Design tab is the component designer. Everything you place here is a template. It renders for the active collection's items, filled with each item's own data.

This tutorial maps the interface. The three tutorials that follow it go deep on the parts that actually make a layout intelligent: conditions, binding and visibility.

Opening it

Click Design at the top of the workspace. You stay on the same project and collection; you are just switching from data to design.

The editor works on a phone too. The Design tab lists your designs; tap one to open it.

• The card fills the screen, drawn with a real card's data. Designs at the top left goes back to the list. Undo, redo and the save status sit in the header.
• A Used on row above the card shows and edits which cards get this design. It hides while a tool panel is open, so the card keeps its height.
• A row under the card switches between Card (a real card, with ‹ / › to step through the cards that use this design) and Fields (the columns each layer shows). It hides while a tool panel is open too.
• Tap a layer to select it. Drag it to move it, drag a handle to resize it, or drag the knob under it to rotate it. It snaps to the card's edges, its centre and the other layers, as on a computer. Pinch to zoom, and double-tap the space around the card to fit it again.
• With nothing selected, the bar at the bottom has Text, Picture, Elements, Layers and Preview. Elements opens the Elements panel (without slots). Preview shows your cards as they print.
• Layers opens the layer list in a sheet, with Add a layer at the top. Each layer shows notes such as From your card data, Some cards only, Hidden or Locked, and a ⋮ menu with Lock, Bring forward, Send backward, Duplicate and Delete. Tap a layer in the list to select it.
• With a layer selected, the bar fills with its tools. A text layer gets Edit, Font, Size, Colour, Format, Spacing, Box and Effects. A picture gets Replace (Picture while it is empty), Crop, BG remover, Eraser, Adjust, Fit, Corners and Flip. Every layer also has Opacity, Shadow, Cards (which cards show it), Position (nudge arrows, 1 or 10 pixels a tap), Order, Duplicate and Delete. Layers that can show card data add Data, to connect a column. Tap Done to clear the selection. Tapping selected text starts typing.

Selecting several layers at once, grouping layers into folders, styling single words inside a text, changing the card size and drawing board slots still need a computer. Full editor on a computer in the ⋮ menu lists those and offers Email me the link or Copy link so you can pick up there.

The header bar

Left to right, next to the Data / Design tabs:

If someone else has the layout open, a chip beside the avatars names them, and what you change isn't saved until you press Take over or move to another layout. If someone changes the layout you have open (its name, size or rule, say), a chip says who and what, with Reload.

The name, the Not used chip and the size are per-layout, not global: switch layouts and they change with it. The face is named for its component: Front/Back for cards, Outside/Inside for screens, numbered faces for dice, pages for booklets, and Outside for boxes.

On a front, the top of the Layers panel reports which properties the layout leaves out, right above the layers you would connect to fix it. See Layers & Groups.

The left rail

Five panels, stacked as icons down the far-left edge: Designs, Templates, Elements, Library and Layers. Click an icon to open its panel, click the same icon again (or press ⌘/) to collapse it, and drag the panel's right edge to resize it (double-click that edge to snap back to the default width).

Designs

Every layout in the collection, in one section per face (Front and Back for a card, Face 1 to 6 on a die), including faces nobody has designed yet, which show a dashed Design the back (or that face's name) button. Within a face, the layouts with a rule come first in the order they are checked, each with up and down arrows, then the fallback, then a dashed Add a front design (or back) button that offers From a template (when the type has templates), Blank design or Import from PSD…. Browse all at the top of the panel opens every design in a grid. Layouts no card can reach sit under Not used with the reason, and their strip offers Add rule or Make default (use it for every card no rule claims).

Each row shows a small preview, the name, and who gets it and how many, with the count under the name (12 cards) and the rule in a strip under the row, such as When Type equals living with Edit, or Every other card. Click the preview or name to open that layout. Click Edit in the strip to change or clear the rule in a popover beside the panel. The ⋯ menu on each row has Change its rule… (Give it a rule… under Not used), Use for every other card, Rename, Duplicate, Export as PSD…, Export as SVG… (on the design open on the canvas only; Export previewed card as SVG… with Preview on) and Delete. See Layouts & Priority.

Templates

ShuffleKit's built-in designs, with a search field above them. Starters is one row of single designs that scrolls sideways, the same size as the pack rows below it. It holds the set made for your project's genre plus a few general ones; search to find another genre's starters. Below it, each pack gets a row of its designs. Clicking a design adds that one; Use pack adds the whole set, card back and routing rules included. Magic and Yu-Gi-Oh designs only appear in a collection at their exact card size, since neither size prints. A type with no templates, or a project you can only view, shows a short line and a Go to Designs button instead.

Adding a design to a face that already has one asks Which cards use it?: Every card no rule claims (it becomes the fallback, taking the face over from the current one, which the dialog names), Only cards where… (one condition with a live count of matching cards; add more later in Designs) or None yet (it waits under Not used in Designs until it gets a rule). On an empty face the question isn't asked.

Browse all, beside the search field, opens a full-window grid with a Templates / Your layouts switch, showing every shelf. Browse all at the top of the Designs panel opens the same grid on Your layouts. Its Your layouts view is split by the type's faces, with a New tile for each, and can show another of your projects so you can copy a design across. Its Templates view has a search and a Show menu to narrow it to Starters, Packs or one set, and shows each pack as a card: open it to see every design, or Use pack.

In Browse all:

• Opening a pack card shows every design in it at a readable size. Click one to add just that design, or use Use pack.
• The Your layouts view has a project picker, so you can look at another of your projects and choose Copy into this project on a design, and a collection filter (the current collection, All collections, a single deck, or a component type).
• In a project you own, a layout's ⋮ menu there adds Invite people, opening here, which invites someone to the project and lands them on this design, and Publish as template. Publishing asks which designs to include, a Template name, a Description and a Visibility: Private (only you), Unlisted (anyone with the link) or Public (listed in the gallery).
• Show → Community packs lists templates other people have published, each with Use pack. My templates beside that heading lists the ones you published, where you can change a template's visibility, copy its link, make a new link (the old one stops working), open its public page or delete it. Copies people already made are not affected.

Starting from a template and deleting what you don't need is almost always faster than starting from a blank canvas. When you apply one, ShuffleKit offers to connect its elements to your properties on the way in, and tells you which properties it couldn't place.

Replacing a pack you haven't touched

If your project is still exactly as a pack left it (a pack picked during onboarding, say, with no edits to its columns, cards or designs), Use pack and a template that brings its own columns both offer to swap it out. The dialog starts on Replace Rabble (or whichever pack you have), which removes that pack's columns, sample cards and designs so the new one starts with its own. The other choice, Keep Rabble's columns, adds the new designs beside the old ones and connects them to the columns you have. This only appears for card collections.

Elements

The palette of things you can add, under one search field (Search shapes, lines, frames and icons):

Click a tile to drop it in the middle of the canvas, or drag it to where you want it. The ones you used last collect under Recently used at the top. Escape in the search field clears it. With Elements open, clicking something already on the canvas switches the rail to Layers; adding a new element keeps you in Elements.

Below them, Icons & game art is the icon browser. A strip of swatches picks the source: This project (once the project uses icons), Your icons and Game art, then eight emoji styles after the divider (Noto, Twemoji, Fluent, OpenMoji and more). The search field at the top of the panel runs across whichever is active. With nothing typed, a category menu (All categories, then groups such as Weapons, Magic or Arrows for Game art) narrows the list, and Upload icon beside it adds your own SVG or picture. Clicking any icon drops it onto the canvas as its own element, separate from the Icon set.

Slots (boards and mats)

On a board or mat layout, the Elements panel also has a Slots section. A slot is a place cards snap into on the playtable. It is never printed or exported. Click Add slot, then drag a box on the canvas, or click once for a card-sized slot (Escape cancels). Click a slot in the list or on the canvas to select it, and a panel on the right sets its Label, Owner seat (None (public) or a seat number), Face (Keep as dropped, Face up or Face down), Capacity (blank means unlimited), Rotation, and exact Position & size. See Playtable Basics.

Library

Your image library: the pictures you have uploaded or generated, reusable across every layout.

• Click a picture to place it in the middle of the canvas, or drag it to a spot. Dropped onto an image that is on the layout, it replaces that image's picture; hold Alt as you drop to add it on top instead. Locked images and images connected to a column are never replaced.
• Search uploads filters the library, and the upload button beside it adds pictures from your computer.
• Select lets you pick several pictures (or Select all) and delete them together.
• The background-removal button on a picture cuts out its subject, and the eraser button in its top-left corner opens the Eraser, a brush that erases parts of the picture, restores them, or removes objects. Both run free in your browser. On the Free plan, the first result you save (a cut-out or an erased picture) is free, and saving another asks you to upgrade.

Layers

The stacking order, plus the fastest place to audit a layout. Covered in Layers & Groups.

The canvas

The active component face at working size, on a neutral backdrop.

• Click an element to select it, and click empty canvas to clear the selection.
• Drag to move: drag the handles to resize, and drag the round handle to rotate (hold Shift to turn in 15° steps).
• Double-click text to type in it, a picture placed on the layout to crop it, or a group to step inside it.
• Hover an element to see which column it is connected to, and a Conditional marker if it has a visibility rule (in Preview mode it reads Hidden here when the card on screen fails the rule).
• Scroll to pan (Shift-scroll pans sideways), and ⌘-scroll (or pinch) to zoom toward the pointer. Holding Space and dragging pans too, even with the pointer over a layer, and so does dragging with the middle mouse button.
• When you zoom in past the edge of the view, scroll bars appear over the canvas. Turn them off with Show scroll bars in the zoom menu; the choice is remembered in this browser.
• Paste a picture from your clipboard with ⌘V to upload it and place it.

A small toolbar also appears just above a selected element, with its connection (click it to change the column), Flip horizontal, Flip vertical, Lock, Duplicate, Delete and ⋯ for the right-click menu. Images add Fit / Fill / Stretch, and a picture placed on the layout (not connected to a column) also gets Crop and Replace image (or Choose image while it is empty); text adds Edit text. A locked element shows only Unlock. When there's no room above the element, the mini toolbar's Lock moves into the toolbar at the top of the canvas.

Right-click empty canvas for Paste, Select all, Rulers, a Zoom submenu (Fit to canvas, 100%, Zoom in, Zoom out) and Canvas size…. Right-clicking an element is covered in Advanced Editor Controls.

The row under the canvas holds three things. On the left, the save status: All changes saved, Saving… or Unsaved changes. If a save fails (a dropped connection, say), it reads Not saved yet, retrying in N s and Retrying… while it tries again, after 5 seconds, then 15, then every 30, until it is back to All changes saved (⌘S tries at once). Your edits stay on screen meanwhile; keep the tab open until it says saved. If a save finds the layout was changed somewhere else (another tab or another person), a notice at the top of the canvas says This layout was changed elsewhere, saving pauses, and Reload layout loads the newer version (edits since your last save are lost). In the middle, one tile per face (Front and Back for a card): click one to switch faces, or click a dashed + tile to design a face that has nothing on it yet. A tile's tooltip points to the Designs tab for that face's other designs. On the right, the zoom controls: minus, the current percentage, + (⌘minus / ⌘+), a fit-to-canvas button (⌘0), and a rulers toggle with a px / in / cm / mm unit picker. Click the percentage for preset zoom levels (10% to 300%), Fit to canvas, Fill the view, Zoom to selection (⌘2) and Show scroll bars. All of it is view-only. It changes nothing about the card.

Canvas size

Canvas size is the size shown in the header, after the design's name. Click it to open the size panel:

• A size menu of the catalog sizes for this component, plus Custom, which shows W and H fields with a px / mm switch above them. It starts in mm when the rulers are in mm; the size is kept in pixels either way.
• Fit the design to the new size, on by default. When you pick a new size, the design is redrawn for it: boxes stretch with the card, while icons, badges and other shapes keep their proportions and stay near the edge or corner they sat by. Font sizes, strokes and padding scale too. Untick it to change only the card and leave every element where it is. A custom size is fitted when you leave the field or press Enter.
• Orientation: portrait or landscape. Turning it swaps width and height, and the design is not fitted: elements keep their coordinates, so a finished layout turned sideways needs rearranging.
• A warning, such as Print & Ship needs 750 × 1050 px, when the layout no longer fits the collection's print size, since Print & Ship would then scale the layout down. Hover it for the product it orders as. PDF export follows the layout either way.
• Export shape guide as SVG, below the size controls, for die-cut shapes such as a meeple. See Advanced Editor Controls.

Right-clicking an empty part of the canvas and choosing Canvas size… opens the same panel.

It is still best to set the size and orientation before you build. Fitting keeps a design in proportion, but a big change of shape (a square card to a tall one) can leave text and art looking stretched or cramped, and turning the card sideways moves nothing. If you plan to print, pick the size that matches your intended stock now; see Print & Ship.

The toolbar over the canvas

With nothing selected, nothing floats over the canvas. Select something and a toolbar appears at the top of the canvas, fitted to what you picked:

• An element selected: that element's controls.
• Several selected: a count, Group, the align and distribute buttons, duplicate and delete.
• A group selected: group-level controls (visibility rule, position, opacity, hide, lock, ungroup).

For a text element you get, left to right: the binding pill, font family, size stepper, colour, bold / italic / underline / strikethrough, letter case, alignment, Spacing, Text box, Flip, Transparency, then the Align, Effects and Position groups. At the far right: the copy-style brush, duplicate and delete. If the toolbar runs out of room, the Align, Effects and Position groups fold into a ⋯ (More controls) menu, and arrows at either end of the toolbar scroll it sideways.

The leftmost pill is the important one. It is the data binding, and it's covered in depth in Data Binding.

Preview mode

Click Preview mode and the canvas fills with a real item from the active collection, and everything outside the card's edge is dimmed. A navigator takes the middle of the row under the canvas:

• ‹ / ›: step through cards. You can also click the card number and type the one you want.
• Card n of m, with its name beneath: m counts the items that actually print on this layout. Cards that another layout's rule claims first are left out, and so are items of other types, so this is the print set for the layout you have open. A layout that no card reaches previews the cards its own rule matches.
• Hide unused: collapse elements that have nothing to show. It's a toggle. Once on, it reads Printed view.
• Exit: back to editing.

If no card satisfies the condition, the bar says so instead: "No cards match this layout's condition."

Design with placeholders, verify with preview. Long titles, empty fields and busy icon strips are the things that break a layout, and none of them are visible until you page through real data.

A sane build order

1. Set Canvas size.
2. Pick a template or start blank.
3. Lay out the big shapes: background, art frame, and text panel.
4. Add text and icon elements roughly in place.
5. Bind each one to a property, watching the notice at the top of Layers clear.
6. Turn on Preview mode and page through every card.
7. Add visibility rules for the elements that shouldn't always appear.
8. Only then, add a condition if this layout is meant for a subset of cards.

Steps 5 and 8 are the two that people skip and then spend an afternoon debugging.