Notes Layer

Note layers are the invisible workhorses of Component.Studio designs. Unlike every other layer type, note layers don't render anything visually on your cards. Instead, they serve two crucial behind-the-scenes roles: documenting your design decisions with human-readable comments, and performing template calculations that set variables and compute values used by other layers. Think of note layers as the combination of a designer's notebook and a powerful calculation engine, all wrapped into one simple, invisible layer.

The Invisible Layer

Note layers are fundamentally different from all other layer types in Component.Studio:

  • No visual output: Note layers never appear on rendered cards or exports
  • No position or size: They don't exist in 2D space - no X, Y, width, or height
  • No effects or styling: No colors, fonts, borders, shadows, or any visual properties
  • One property only: Just a single "Note" text field
  • Execution, not rendering: Notes are evaluated for their template operations, not rendered
Think of Note Layers as Code Comments: In programming, comments document what the code does without affecting execution. Note layers document what your design does. But unlike plain comments, note layers can also execute template operations to set up variables and perform calculations that the rest of your design uses.

The Note Property

Note layers have exactly one property: Note. This is a text field that can contain plain text documentation, template operations wrapped in {{ ... }}, or a mix of both.

Property Type Description
Note Text (multi-line) Content of the note - can be plain text documentation, template operations in {{ ... }}, or both.

Plain Text Documentation

The simplest use of note layers is to add plain text documentation to your design. These notes help you (and anyone else working on the design) understand design decisions, remember why things are structured a certain way, or leave reminders for future updates.

Documentation Examples

This design uses a 3-column layout for stat display.
The left column is fixed at 120px for labels,
middle and right columns are flexible.
	
IMPORTANT: The ability icons must be exactly 40x40px
to fit properly in the table cells. Don't change
the table column width without updating icon sizes!
	
Design notes:
- Header font: Bebas Neue 48px
- Body font: Open Sans 14px
- Color scheme: Blue (#2c5aa0) and gold (#d4af37)
- Updated 2025-01-15: Changed header size from 42px to 48px
Documentation Best Practices: Clear notes save time later. Document design constraints, required image sizes, color codes you're using, font choices, and anything that might not be obvious when you or someone else returns to the design weeks or months later.

Template Operations

The real power of note layers comes from their ability to execute template operations. Any text wrapped in {{ ... }} is treated as a template expression that gets evaluated. This is where note layers become calculation engines.

Setting Variables

The most common use of template operations in note layers is setting variables using the set() function. Variables set in note layers can be used anywhere in your design - in text layers, image URLs, colors, positions, sizes, you name it.

Basic Variable Setting

Set standard dimensions for ability boxes
{{ set('abilityBoxWidth', 100) }}
{{ set('abilityBoxHeight', 80) }}

Now anywhere in your design, you can use {{get('abilityBoxWidth')}} and {{get('abilityBoxHeight')}} to reference these values. Change the numbers once in the note layer, and every layer using these variables updates automatically.

Calculated Variables

Calculate derived values from dataset
{{ set('totalStats', strength + dexterity + constitution) }}
{{ set('averageStat', totalStats / 3) }}
{{ set('statRank', totalStats > 40 ? 'Elite' : totalStats > 25 ? 'Average' : 'Weak') }}

Variables can be based on dataset values, mathematical operations, conditional logic, or any valid template expression.

Color Schemes

Define color palette for easy theme management
{{ set('primaryColor', '#2c5aa0') }}
{{ set('secondaryColor', '#d4af37') }}
{{ set('textColor', '#ffffff') }}
{{ set('accentColor', rarity === 'rare' ? '#ff6600' : '#666666') }}

This creates a central place to manage your design's color scheme. Want to change the primary color? Update it once in the note layer, and every layer using {{get('primaryColor')}} updates throughout the design.

Complex Calculations

Note layers can perform sophisticated calculations that would be tedious or impossible to repeat in multiple places.

Layout Calculations

Calculate positions for evenly-spaced ability icons
{{ set('iconCount', 5) }}
{{ set('iconSize', 40) }}
{{ set('totalWidth', 400) }}
{{ set('spacing', (totalWidth - (iconCount * iconSize)) / (iconCount + 1)) }}

Conditional Logic

Determine which icon to show based on multiple conditions
{{ set('statusIcon', row.health <= 0 then 'skull' else 'injured' ) }}

The variable {{get('statusIcon')}} now intelligently selects the right icon based on game state.

Data Transformation

Note layers are perfect for preprocessing dataset values into formats needed for display.

Format raw data for display
{{ set('shortDescription', substring(description,5) }}
{{ set('uppercaseName', upperCase(name)) }}
{{ set('ability1', split(abilities)) }}

Mixing Documentation and Operations

One of the most useful aspects of note layers is that you can mix plain text documentation with template operations in the same note. This creates self-documenting calculations.

Documented Calculations

Assign the values 100 and 200 to the variables boxwidth and boxheight, respectively.
{{ set('boxwidth', 100) }}
{{ set('boxheight', 200) }}<br>

The plain text explains what's happening, while the template operations do the actual work. Future you (or other designers) will appreciate the explanations.

Multi-Purpose Notes

CARD LAYOUT CONFIGURATION
=========================

Base dimensions (all measurements in pixels)
{{ set('cardWidth', 825) }}
{{ set('cardHeight', 1125) }}
{{ set('safeMargin', 50) }}

This creates a 50px margin around the entire card for bleed and cut safety.

This note serves as both documentation AND computation, setting up a safe zone system while explaining why it exists.

Working with Note Layers

Layer Organization

Where you place note layers in your layer stack can affect execution order and readability:

  • Bottom of layer list: Place configuration notes at the bottom so they're easy to find and edit. Variables set here are available to all layers below.
  • Before related layers: Put calculation notes just before the layers that use those calculations. This creates logical grouping.
  • Multiple note layers: It's perfectly fine to have multiple note layers. Use them to organize different aspects of your design.
Execution Order: Note layers are evaluated in the order they appear in your layer list, from bottom to top. Variables set in earlier note layers are available to later note layers and all visual layers.

Naming Note Layers

Give your note layers descriptive names so you can quickly identify their purpose:

  • "Card Configuration" - for overall design settings
  • "Color Palette" - for color scheme variables
  • "Layout Calculations" - for position and size computations
  • "Data Processing" - for dataset transformations
  • "Design Notes" - for pure documentation
  • "Stat Calculations" - for game mechanic computations

Common Patterns

Configuration Note Pattern

Create a master configuration note at the top of your design:

MASTER CONFIGURATION
{{ set('headerHeight', 100) }}
{{ set('footerHeight', 60) }}
{{ set('sidebarWidth', 120) }}
{{ set('padding', 15) }}
{{ set('primaryFont', 'Bebas Neue') }}
{{ set('bodyFont', 'Open Sans') }}
{{ set('primaryColor', '#2c5aa0') }}

Now your entire design references these central values. Want to make the header taller? Change one number and the whole design adjusts.

Preprocessing Pattern

Transform dataset values before using them:

DATA PREPROCESSING
{{ set('firstName', split('name',0,' ')}}

Responsive Layout Pattern

Calculate positions based on dynamic values:

RESPONSIVE ICON LAYOUT
{{ set('availableWidth', 400) }}
{{ set('iconSize', 40) }}
{{ set('totalIconWidth', iconCount * iconSize) }}<br>

The layout automatically adapts to however many abilities are in the dataset.

Troubleshooting

My variable isn't available in other layers

  • Check that the note layer with the set() operation is above (or before) the layer trying to use the variable in your layer list
  • Verify the variable name is spelled exactly the same in the note and where you're using it (case-sensitive)
  • Make sure the set() call is wrapped in {{ ... }}
  • Check for syntax errors in the template operation that might prevent it from executing

My template operation isn't executing

  • Ensure the operation is wrapped in {{ and }} (double curly braces)
  • Check for syntax errors - missing quotes, unmatched parentheses, typos in function names
  • Look for error indicators on the note layer in the layer list
  • Try simplifying the expression to isolate the problem

I'm getting unexpected values

  • Remember that template expressions evaluate in order - later expressions can't use variables that haven't been set yet
  • Check for variable name collisions - if you set the same variable in multiple places, the last one wins
  • Verify dataset field names are correct (check your actual dataset column names)
  • Use simple test values first to confirm your logic, then swap in dataset variables

My calculations seem wrong

  • Check operator precedence - use parentheses to make order of operations explicit: (a + b) * c is different from a + (b * c)
  • Watch for integer vs. decimal division - 5 / 2 gives you 2.5, which might get truncated depending on how you use it
  • Verify dataset values are numbers, not strings - '5' + '10' is '510', not 15
  • Add intermediate calculation notes to debug complex expressions: break one big calculation into several smaller set() operations

Best Practices

  • One note layer for configuration: Create a master configuration note at the top with all your key design values
  • Document complex calculations: If a calculation isn't immediately obvious, add a plain text explanation above it
  • Use meaningful variable names: headerBackgroundColor is better than hbc or c1
  • Organize by purpose: Group related calculations together in the same note layer
  • Keep it readable: Use line breaks and spacing to make notes easy to read
  • Comment your assumptions: If a calculation depends on a specific dataset structure or value range, note it
  • Version your changes: Add dates when you update important configuration values
  • Test with edge cases: If your calculations use dataset values, test with minimum/maximum/missing values
Note Layers as Design Constants: Use note layers to create named constants for magic numbers in your design. Instead of scattering "825" throughout your design for card width, set cardWidth once in a note and use {{cardWidth}} everywhere. This makes your design more maintainable and self-documenting.

Note layers are the silent foundation of well-organized designs. They document your decisions, compute your variables, preprocess your data, and centralize your configuration - all while staying completely invisible on the final card. Master note layers, and your designs become more maintainable, more flexible, and easier to understand. The best designs have good notes!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us