Design Template Variables
Design template variables are automatically generated from the properties of your design. These variables give you access to the dimensions, boundaries, and safety zones of your component.
Available Variables
| Variable | Description |
|---|---|
| design.id | The unique identifier for this design. |
| design.name | The name of this design. |
| design.width | The width of the component this design represents, in pixels. |
| design.height | The height of the component this design represents, in pixels. |
| Variable | Description |
|---|---|
| design.top | The top edge of the design. Always 0. |
| design.left | The left edge of the design. Always 0. |
| design.right | The right edge of the design. Equal to design.width. |
| design.bottom | The bottom edge of the design. Equal to design.height. |
The safe zone represents an area 75 pixels (0.25 inches) inset from each edge of the design. This is the recommended area to keep important content within.
| Variable | Description |
|---|---|
| design.safe.top | 75 pixels from the top edge of the design. |
| design.safe.left | 75 pixels from the left edge of the design. |
| design.safe.right | 75 pixels from the right edge of the design (design.width - 75). |
| design.safe.bottom | 75 pixels from the bottom edge of the design (design.height - 75). |
| design.safe.width | The width of the safe zone. Equal to design.width - 150 pixels. |
| design.safe.height | The height of the safe zone. Equal to design.height - 150 pixels. |
The trim zone represents the cut line, positioned 37 pixels (0.125 inches) inset from each edge of the design. This is where the card will be physically cut.
| Variable | Description |
|---|---|
| design.trim.top | 37 pixels from the top edge of the design. |
| design.trim.left | 37 pixels from the left edge of the design. |
| design.trim.right | 37 pixels from the right edge of the design (design.width - 37). |
| design.trim.bottom | 37 pixels from the bottom edge of the design (design.height - 37). |
| design.trim.width | The width of the trim zone. Equal to design.width - 74 pixels. |
| design.trim.height | The height of the trim zone. Equal to design.height - 74 pixels. |
Understanding the Zones
- Full Design Area: The entire canvas (0, 0, design.width, design.height)
- Trim Zone (Red): 37px inset - where the card will be cut
- Safe Zone (Blue): 75px inset - recommended area for important content
Always keep critical text and important elements within the safe zone to ensure they won't be cut off during manufacturing.
Practical Examples
Example 1: Centering Content
To center a layer horizontally and vertically within the design:
X Position: {{ design.width / 2 }}
Y Position: {{ design.height / 2 }}
Then set the layer's anchor to center (0.5, 0.5)
Example 2: Positioning Within Safe Zone
To position a title in the top-center of the safe zone:
X Position: {{ design.width / 2 }}
Y Position: {{ design.safe.top + 20 }} (20px below safe zone top)
Example 3: Full Bleed Background
To make a background image fill the entire design:
Width: {{ design.width }}
Height: {{ design.height }}
X Position: {{ design.width / 2 }}
Y Position: {{ design.height / 2 }}
Example 4: Border Inside Safe Zone
To create a border that sits just inside the safe zone:
X Position: {{ design.safe.left }}
Y Position: {{ design.safe.top }}
Width: {{ design.safe.width }}
Height: {{ design.safe.height }}
Example 5: Responsive Sizing
To make a text box that's 80% of the safe zone width:
Width: {{ design.safe.width * 0.8 }}
X Position: {{ design.width / 2 }} (centered)
In the designer, click the Design button in the properties panel to see a menu of all available design variables with their current values. You can click any variable to insert it, or use the copy button to copy it to your clipboard.
Common Use Cases
Creating Consistent Margins
Use the safe zone variables to ensure consistent margins across all your designs. For example, position content at design.safe.left + 10 to add a 10px margin inside the safe zone.
Bleed Area
The area between the design edge and the trim line is the bleed area. Extend backgrounds and images to the full design dimensions (design.width and design.height) to ensure no white edges appear after cutting.
Percentage-Based Layouts
Use mathematical expressions like {{ design.width * 0.33 }} to create layouts that scale with different component sizes. This is especially useful if you're using the same design for multiple component dimensions.
Dynamic Positioning
Combine design variables with other variables for dynamic layouts:
{{ design.safe.top + (row.$index * 50) }} - Stack elements based on row index
If your design has the "turn" option enabled, Component.Studio automatically swaps the width and height values in the design variables to match the rotated dimensions. You don't need to account for rotation in your templates!
Video Tutorial
Summary
Design variables give you programmatic access to your component's dimensions and zones. Use them to:
- Center and position elements precisely
- Keep important content within the safe zone
- Create full-bleed backgrounds that extend to the edges
- Build responsive layouts that adapt to different component sizes
- Calculate positions and sizes dynamically
All design variables are available in any template expression throughout your design, making it easy to create consistent, professional layouts.