Layouts & the Design Editor

A layout is a reusable design for one component face: background, frames, text blocks, art windows, icon strips and guides. The active collection's data flows into it.

Open it with the Design tab at the top of the workspace.

The layout editor works best on a desktop-sized screen, but a phone can edit too: tap a design to open it, then tap a layer to select it. You can drag, resize and rotate layers with a finger, pinch to zoom, crop pictures, and change a layer's text, style, picture or data connection from the tool bar at the bottom. Selecting several layers at once, grouping, styling single words and the card size need a computer. See Layout Editor: A Full Tour for the phone layout.

The editor at a glance

Left rail: five panels

Canvas: centre

The active component face at working size. The row under it holds the save status, one tile per face (click to switch between Front and Back), and the zoom controls (minus / % / + / fit / rulers).

Header

• The open layout's name, with the face after it when it isn't the front (for example Back). While the Designs panel isn't showing, an amber Not used chip beside it means no item uses this layout; click it to open Designs. Which items use a layout is set by its rule. See Conditions.
• The canvas size, for example 750 × 1050 px. Click it to change the size. For die-cut shapes it also holds Export shape guide as SVG.
• Undo and Redo, greyed out until there is something to undo.
• Preview mode, at the far right, swaps placeholders for real component data.

The important boundary is type safety: a board layout never appears in a card collection's Designs panel, and a die face cannot be mistaken for a card back.

Switching and creating layouts

Open Designs, the first panel in the left rail:

Layouts are grouped in a section for each of the active component's faces. Within a face:

• The layouts that have a rule come first, in the order they are checked. The arrows on a rule's row move it earlier or later. Under the name is how many cards print it (12 cards), and a strip under the row shows the rule (When Type equals living). Click Edit in the strip to change or clear the rule.
• The fallback comes next, the layout a card gets when none of the rules claim it. Its line reads Every other card.
• Not used holds layouts no card can reach, with the reason. Its strip offers Add rule, or Make default to use it for every card no rule claims.

A face with no rules at all just lists its layout, reading Every card.

Click a row's preview or name to open that layout. Hover a row for its ⋯ menu: Change its rule…, Use for every other card (make it this face's fallback), Rename, Duplicate, Export as PSD…, Export as SVG… (on the design open on the canvas) and Delete. A face nobody has designed yet shows a dashed button to design it, such as Design the back, and every face ends with one such as Add a front design, which offers From a template (when the type has templates), Blank design or Import from PSD…. The panel is type-aware: it cannot show a board layout while you are designing cards.

Also in the panel:

• Browse all, at the top: all your designs in a grid, a visual picker instead of a list.
• Import from PSD…, in the Add a … design menu: bring in a Photoshop file as a layout.
• Export as PSD… and Export as SVG…, in a design's ⋯ menu: take a layout out to Photoshop or a vector tool. Export as SVG… is only on the design open on the canvas, and with Preview on it becomes Export previewed card as SVG….

Export shape guide as SVG, only for a die-cut shape such as a meeple, is in the canvas size popover; see Advanced Editor Controls.

Blank design opens a dialog. It asks for a Name, the Side (face) it is for, and a size with its Orientation beside it (a custom size adds Width (px) and Height (px)). When that face already has a design, the dialog widens to two columns and asks Which cards use it? on the right, with the same three choices as adding a template and thumbnails of the cards that would switch to the new design (15 cards switch to this design). Then Create. On the free plan it tells you when you have used all your layouts. Export as PSD… says how many layers it will write at what size, then Export saves a layered file in which groups become folders and connected elements keep their column names, so Import from PSD… can connect them again. See Import & Export.

The Templates panel

The panel holds ShuffleKit's ready-made designs. Your own layouts are in Designs.

• A search field that matches names, descriptions, pack names and genres.
• Browse all: the full-window grid, with a Templates / Your layouts switch. There, each pack is a card you can open to see all its designs.
• Starters: single designs to build from, the set made for your project's genre plus a few general ones (the search still finds every genre's starters). They sit in one row that scrolls sideways, like a pack's; Browse all at the top opens the full grid.
• Packs: one row per set, such as Rumpus or Orrery. Click a design to add just that one, or Use pack to add the whole set. A pack brings its card back and the rules that give each kind of card its own front, and in a project with no columns yet it also brings its columns and a few sample cards (untick the sample cards box in the dialog if you don't want them).
• If the project is still exactly as a pack left it, for example the pack you picked during onboarding with nothing changed, Use pack and templates that bring their own columns offer Replace that pack (its columns, sample cards and designs make way for the new one) or Keep its columns and connect the new designs to them.

A type with no templates, such as dice, or a project you can only view, shows a short line and a Go to Designs button instead.

Starting from a template and stripping it back is usually faster than starting from an empty canvas.

When you add a template to a face that already has a design, the dialog asks Which cards use it?: Every card no rule claims makes it the fallback (the line under it names the current fallback it takes over from), Only cards where… gives it a one-condition rule with a live count of the cards that match (add more conditions later in Designs), and None yet puts it under Not used until you give it a rule. On an empty face the question isn't asked, and Use pack doesn't ask it.

When you apply a template, ShuffleKit can try to bind its elements to your existing properties (Connect to my properties, on by default) and tells you which ones it won't show. Use that option when the property names and element roles already line up; turn it off when you want to choose the connections yourself. In a project with no columns yet, the same switch reads Create and connect properties and lists the columns it will add. The dialog's button says what will happen: Add layout, Create properties & add layout, Add design only, or Replace and the pack name when you are swapping out an untouched pack. With the connection on, it also says how many of your properties the design will show (Connects 3 of 5 properties) and names the ones it won't. If you have used every layout your plan allows, the dialog offers an upgrade instead; Use pack does the same when the whole pack won't fit (Upgrade to add). Either way, check the notice at the top of Layers afterward because a template may not find a property for every slot.

Adding and editing elements

1. Open Elements in the left rail.
2. Click a tile, such as Text, a shape, a frame or an icon, and it drops onto the canvas. You can also drag it to where you want it.
3. Drag to position; drag the handles to resize.

Selecting an element brings up its controls in a toolbar at the top of the canvas, and a smaller toolbar just above the element with its connection, flip, Lock, duplicate, delete and ⋯:

For a text element that's: the binding pill (title, see below), font family, size, colour, bold / italic / underline / strikethrough, case, alignment, Spacing, Text box, Flip, Transparency, plus Align, Effects and Position groups. At the far right: the copy-style brush, duplicate and delete.

The binding pill

The most important control on that toolbar is the leftmost pill. It shows which property the element pulls its value from, title in the screenshot.

• A solid pill means the element is bound to a property.
• A dashed pill means it isn't: it will show its static fallback text on every card.

Click it to open the Connect data popover. Full detail in Connecting Properties to a Layout.

Layers

The Layers panel lists every element top-to-bottom in stacking order. Drag the grip handles to restack.

Elements bound to a property show in blue with a chain icon, or, when the layer's name isn't the column's, with the column's name in a small blue chip beside it (click the chip to change the column); unbound ones are plain. It's the quickest way to audit a layout for missing bindings. On a front, a notice above the list names the properties the layout doesn't show yet. More in Layers & Groups.

Preview mode

Placeholder text is useless for judging whether real card names actually fit. Click Preview mode:

The canvas fills with a real card, and a navigator takes the middle of the row under the canvas: ‹ CARD 1 OF 16 ›, Hide unused, Exit. The count is the cards that print on this layout, so a card another layout's rule claims first is not in it.

Step through every card before you commit to a font size. Long names, empty ability fields and five-icon power strips are exactly the cases that break a design, and they only show up here.

Click Exit to return to editing.

Component faces

Faces are layouts too. Cards, boards, mats, tokens and meeples can use Front and Back; screens use Outside and Inside; dice use numbered faces; booklets use numbered pages; boxes and score pads use their single printable surface. Create each face from its section in Designs or from its tile under the canvas, and give it conditions when different items need different designs.

Canvas size

Canvas size is the size shown in the header, after the design's name. Click it to set the active component's dimensions and orientation, whatever is selected. Right-clicking an empty part of the canvas and choosing Canvas size… opens the same panel. It begins with the physical size chosen in the component catalog. Fit the design to the new size, on by default, redraws the design for a new size so it keeps its proportions; untick it to move only the card's edges. Turning the orientation is not fitted, so elements stay where they were. It is still best to set the size before you build. If you are printing, choose the intended product size before you start; see Print & Ship.

For a complete first-layout sequence, including the recommended order for sizing, binding and previewing, see Layout Editor: A Full Tour.