Layers, Groups & Symbols

Beginner · 8 min read

Overview

The Layers panel: located in the right sidebar, shows every element on your card in z-order. The top of the list is the front of the card; the bottom is the back. From the Layers panel you can control visibility, locking, ordering, and search for elements by name, all without needing to click directly on the canvas.

Understanding layers is the key to keeping complex card designs organized. Once you learn to use groups, master elements, and symbols, you can build card templates that are fast to maintain and consistent across an entire deck.

The Layers Panel

Each row in the Layers panel represents one element on the current card face. Every row shows:

Click any layer row to select that element on the canvas. Use the search box at the top of the panel to filter layers by name, handy when a card has many elements and you need to find a specific one quickly.

Layer Ordering

Elements render from the bottom of the list to the top. An element at the top of the Layers panel appears in front of all other elements; an element at the bottom appears behind everything else.

To change the stacking order of an element, select it and use the ordering buttons in the toolbar or properties panel. You can also use keyboard shortcuts:

You can also drag layer rows directly within the Layers panel to reorder them.

Tip: If you can't click an element on the canvas because another element is on top of it, use the Layers panel to select it directly. This is especially useful when you have a large background image covering the whole card.

Visibility & Locking

Visibility (eye icon): Toggling an element hidden removes it from the canvas preview and from exports. Hidden elements are not rendered in any exported image or PDF; they are completely ignored at export time. Use this to temporarily hide elements while working on other parts of the design.

Locking (padlock icon): A locked element cannot be moved, resized, rotated, or modified until you unlock it. The element is still visible and still exports normally, locking only prevents accidental edits. Locked elements can still be selected from the Layers panel, and their properties can be viewed (but not changed) in the properties panel.

Tip: Lock your background element first. Background images cover the entire card surface, so they are easy to accidentally select when you click on the canvas. Locking the background keeps it out of the way while you work on the foreground elements.

Grouping Elements

Groups let you treat multiple elements as a single unit. A group can be moved, resized, and rotated as one, and all its children maintain their relative positions within the group.

To create a group:

  1. Select multiple elements: hold Ctrl and click each element, or drag a selection box around them.
  2. Press Ctrl+G to group them.

In the Layers panel, the group appears as a single row with a G badge. Its children are shown indented below it. Click the group row to select the whole group; click a child row to select an individual element within the group.

To ungroup, select the group and press Ctrl+Shift+G. The children are released back to the top level of the layer stack.

Tip: Use groups to bundle related elements: for example, group an icon, a label, and a value display together so they always move as one unit when you adjust the card layout.

Master Elements

A master element is an element that renders on every card in your project, regardless of any conditional visibility rules. You mark an element as a master by checking the Master checkbox in its properties panel. Master elements are shown with a star badge in the Layers panel.

Use master elements for anything that should appear consistently across all cards:

When you use CSV data merge to generate multiple cards, non-master elements can be hidden via conditional visibility rules based on CSV column values. Master elements ignore those rules and always appear, making them the reliable foundation of your card template.

Tip: Set up your card border as a master element before you start designing. That way you can add conditional elements freely, knowing the border will never accidentally disappear on any card in the deck.

The Symbol Library

Symbols let you save a group of elements as a reusable definition that you can place multiple times across your project. When you update the symbol definition, every instance of that symbol updates automatically, similar to components in a vector design tool.

To create a symbol:

  1. Select the elements you want to save (or select an existing group).
  2. Open the symbol option from the context menu or properties panel and give the symbol a name.
  3. The elements are saved to the Symbol Library and converted to a symbol instance on the canvas.

To place a symbol instance:

  1. Open the Symbol Library from the toolbar or panels menu.
  2. Click a symbol to add a copy of it to the canvas.
  3. Move and resize the instance independently, each instance has its own position and size.

To update a symbol:

  1. Edit a symbol instance on the canvas.
  2. Save the changes back to the symbol definition.
  3. All other instances of that symbol in the project update to reflect the new definition.

To delete a symbol, remove it from the Symbol Library. Existing instances on the canvas become standalone groups and are no longer linked to a definition.

Symbols are project-wide: they are saved with your project file and are available across all card types and faces within the same project.

Tip: Symbols are ideal for recurring design elements like stat blocks, resource cost displays, or decorative corners that need to look identical every time but are used on many different card types.

Tips

Ready to try it?

Open the editor, it's free, just sign in.

Start Designing