Create and manage variables
Add groups and values, edit shared design choices, and understand renaming and deletion.
Open Design → Variables and choose a group for the kind of values you need. Use an existing group or create one, then add variables to it.
Create a group
- Select Add group.
- Enter a group name, such as colors.
- Choose its type, such as Color.
- Select Create group.
The group appears in the sidebar. Its type stays fixed, so create a separate group for a different kind of value, such as dimensions for spacing.
The following types are available when creating a group:
| Type | Use it for |
|---|---|
| Color | Brand, text, background, and border colors. |
| Dimension | Spacing, sizes, and corner radii, with a unit such as px or rem. |
| Number | Values without a unit, such as opacity. |
| Duration | Animation timing, in ms or s. |
| Font family | The font used for text. |
| Font weight | How light or bold text appears. |
| Easing curve | How an animation speeds up or slows down. |
Your project may also contain groups for other values, such as shadows and gradients. Ask the agent to create or adjust these when the controls you need are unavailable.
Create a variable
- Select the group you want to use, then select Add variable.
- In Create variable, check the group and enter a name, such as brand.
- Set its value. For a color, choose the color you want to reuse.
- Select Create variable.
The new variable appears in the table with a value in the default mode. To apply it to an element, bind a style to it.
You can also ask the agent to set up shared values:
Create variables for our brand color and standard spacing, and use them for the buttons on the shop page.
Edit a value
Find the variable and edit its value in the table. Colors and numeric values, including dimensions, durations, and font weights, can be edited directly. Check the unit when entering a dimension or duration.
Font-family and easing-curve values are shown as previews in the table. Ask the agent to change them if you need a different value.
A shared-value change can affect several elements. Inspect a page or story that uses the variable after editing. If you are editing a column other than the default, check whether the value is inherited or overridden.
Rename or duplicate a variable
Open the variable's actions menu and select Rename. Enter the new name and press Enter. If renaming fails, ask the agent to fix the reported problem before retrying.
Select Duplicate in the same menu to add another variable based on the existing one, then give it the name and value you need.
Use Add to chat in the variable's menu when you want the agent to help with that part of your design.
Delete a variable or group
When you delete a variable, Reforma replaces the uses it can update with the variable's default value. Those uses become independent and can lose differences between modes. Check the replacement value in the confirmation before deleting.
- Open the variable's actions menu and select Delete.
- Read the confirmation, including any warning about uses that cannot be updated. If some connections may stop working, cancel and ask the agent to review them.
- Select Delete to confirm, then check the affected design.
To remove a whole group, use Delete in the group's actions menu. This removes the group and all its variables. Reforma can block the action if affected uses cannot be updated; ask the agent to resolve the reported problem first.
If you only want one element to stop following a variable, detach that style instead.
If variables cannot be edited
If Reforma reports a problem loading variables, it may keep the last valid values visible while editing is unavailable. Select Ask AI to send the problem to the agent, then check the values again after it finishes.