Use components in a template

This guide explains how to place components on a template canvas, configure how they fill their frame, and map their variables to template variables.

See Components for an introduction, or Build a component to create one first. New to components? Start with the tutorial for a full end-to-end walkthrough.

HTML output not supported

Templates that include components cannot be exported as HTML. Print, static digital, and animated digital (GIF, MP4) output are all supported.

Place a component

Open the template in the Template Designer Workspace. In the left toolbar, click the Resources icon at the bottom.

The Resources panel opens. Select Components.

The component browser opens, showing all available components. Use the search field to find a component by name.

Click a component to place it on the canvas. The component is placed as a frame at the center of the active layout.

Placement rules: The component is placed at the center of the canvas. If the component's default size is larger than the current layout, it is scaled down to fit within the layout boundaries.

Multiple instances

You can place the same component multiple times on the same page. Each placement is an independent instance with its own position, size, and variable mapping.

This is the basis for use cases like a coupon sheet (same pricing component, once per coupon) or a leaflet page (same product ad component, once per product).

Resize Mode

A component can have multiple layouts — for example a square, horizontal, and vertical version of the same design. The Resize Mode setting controls how the component fills the frame you've placed it in, and which internal layout is used.

With a component frame selected, find the Resize Mode section in the right properties panel.

Scale

The component looks at the size of the frame and automatically switches to the internal layout whose aspect ratio best matches. It scales to fill the shortest dimension, preserving the aspect ratio. Any remaining space on the longer dimension appears as white space.

Use Scale when you want the component to always present the most appropriate layout for the frame shape — without distorting the design.

Resize

The component stretches to fill the entire frame by applying the anchoring, copyfitting, and autogrow rules configured inside the component. No layout switching occurs — the component uses its current layout and adapts its contents to the frame size.

Use Resize when the component's internal layout is flexible enough to fill any frame size gracefully.

Scale and resize

Combines both modes: the component first selects the best-matching layout (Scale), then applies the internal resize rules to eliminate any remaining white space (Resize).

Use Scale and resize when you want automatic layout selection and a clean fill of the frame with no white space.

Variable mapping

Variable mapping is how you connect the component's variables to variables at the template level. This is what allows each component instance to show different data — even when it's the same component placed multiple times on the same page.

Open the mapping modal

Select a component frame on the canvas. In the right properties panel, find the Component Variables section and click Manage mapping.

The Map component elements to variables modal opens.

The mapping modal

The modal has two tabs:

• Not mapped — component variables that are not yet connected to a template variable
• Mapped — component variables that have already been connected

Each row shows:

• Component element — the variable defined in the component, with its type icon
• Map to — how the connection is made: to a new variable or an existing one
• Variable — the template variable that will receive or supply the value

Map to a new variable

If the template does not yet have matching variables, set Map to to New variable. GraFx Studio creates a new template variable for each component variable, named automatically based on the component variable name.

The summary at the bottom of the modal shows how many mappings will be created and how many new variables will be added. Click Apply to confirm.

Map to an existing variable

If the template already has variables — for example because another instance of the same component was already mapped — set Map to to Variable and choose the existing template variable from the dropdown.

This is also how you connect two component instances to the same template variable, if you want them to always show the same value.

Per-instance mapping

Each component instance on the canvas has its own mapping configuration. A template with three price tag components on one page can map each to a completely different set of template variables — price_1, price_2, price_3 — so each coupon shows its own price independently.

Mapped variables in the variable list

After applying the mapping, the new template variables appear in the variable list under a Component group, named after the component instance.

These variables work like any other template variable — they can be used in actions, exposed in Studio UI, or driven by a data source.

Constraint compatibility

When you map a component variable to an existing template variable, GraFx Studio checks whether the two variables are compatible. If the component variable has a range constraint (e.g. a number variable restricted to [-10, -5]) and the template variable has an overlapping or incompatible range (e.g. [0, 10]), the mapping row shows an error state and the mapping cannot be applied until the ranges are made consistent — either by updating the component variable or the template variable.

Required variables are not inherited

If a component variable is marked as required, mapping it to a template variable does not automatically make the template variable required. There is no visual indicator in Run Mode or Studio UI that a mapped template variable feeds into a required component variable. If output is generated while the value is empty, the output will fail. Check the error report on the output task page for details.

Reset a mapping

To remove all mappings for a component instance, open Manage mapping and click Reset. This clears all connections without deleting the template variables that were created.