This guide is the complete companion to Layouts & the Design Editor. It focuses on the controls that make a layout production-ready rather than merely presentable.
Canvas and precision
With nothing selected, the top bar opens Canvas size. Start from the collection's physical preset; changing dimensions after placing a finished design preserves absolute element positions and can force a cleanup pass. The zoom controls also expose rulers and unit display (px, in, cm, or mm) for measuring without changing the document.
Dragging an element produces snap guides against useful canvas and element edges. Leave this on for consistent spacing. If an intentional placement must ignore a guide, hold ⌘/Ctrl/Alt while moving or resizing. Use rulers and print guides to check the final relationship to bleed, trim, safe area, fold, or cut shape—not the visual center alone.
Multi-select, layer order, and groups
Select several elements, then use the toolbar to Group, align left/center/right/top/middle/bottom, distribute across/down, duplicate, or delete. Distribution appears when there are at least three selection units; a group counts as one unit so its internals stay together.
Right-click a selected element for the same high-value actions plus clipboard controls and the Layer submenu. It can move a selection forward/back one level or all the way to front/back. Keep backgrounds low, text and icons high, and use Bring to front only when it describes the intended hierarchy—not to conceal an unrelated overlap.
Groups have their own position, opacity, visibility, lock, and ungroup controls. Lock a finished frame or decorative cluster before editing nearby text. Hide is a design-time control; use Element Visibility when a group or element needs a rule based on card data.
The universal element controls
Every selected element exposes the following sections, either in the inline strip or its More popovers:
| Section | Use it for |
|---|---|
| Connect data | Bind supported fields to project properties. Verify the binding and fallback rather than assuming a template guessed correctly. |
| Appearance | Opacity and blend mode; use subtle blends sparingly because export and print must remain legible. |
| Shadow | Color, X/Y offset, blur, and spread. Keep shadows restrained around small rules text. |
| Position | Exact X/Y, dimensions, rotation, lock, and related precision values. |
The right-hand pinned-sections area can keep frequently used controls open while you work. This is helpful for a property such as Position or Appearance that you are adjusting across many elements.
Text: readable at real data lengths
Use the inline controls for font, size, color, bold/italic/underline/strikethrough, case, alignment, and spacing. More text adds advanced text styling, text-shadow controls, and Auto-fit text. Auto-fit treats the configured font size as the maximum and shrinks plain text only down to its configured minimum when needed. It is a safety net, not a substitute for checking a long name in Preview mode; rich text retains its own set sizes.
Use the binding pill for card data, and keep static fallback text only when it genuinely belongs on every item. Insert an icon into text only when it stays readable at print size; for a repeated resource row, an Icon box is usually the stronger choice.
Images, shapes, and icons
Images can crop, choose fit behavior, round corners, flip horizontally/vertically, and use the usual appearance, shadow, position, and data-binding controls. Check both a tall and wide source image in Preview—one crop mode rarely flatters every asset.
Shapes can use solid, linear-gradient, or radial-gradient fills, plus stroke color/width and linked or individually adjusted corner radii. Use separate corners for a purposeful panel shape; link them when the visual should remain a simple rounded rectangle.
Icons come from Emoji, Game art, your uploaded icons, the shared icon library, and Iconify. Use the icon control to choose size or fit-to-box behavior, color, opacity, and for icon boxes the entry order, count, spacing, and shrink-to-one-line option. Design icon rows with real maximum counts so they do not overflow when a card has five resources instead of two.
Check the editor’s answer before publishing
The connection-coverage indicator tells you which required and optional properties are connected. Open it whenever a template or layout is reused in a collection with different fields. Then use Preview mode, Hide unused, and real cards/components to test empty text, long text, missing art, variant faces, and high icon counts.
End with a print check for the actual component face. A perfect card front does not prove a board back, custom die face, screen inside, or box dieline is ready. The type-aware face selector and physical guides are the final guardrails.
