Designing On-Brand Templates with Variables

The Rechat Plugin uses Figma Variables to keep your designs on-brand. Variables in Figma work the same way as the brand settings you’ve already set up in Rechat (colors, fonts, etc.).

What are Figma Variables?

In simple terms, variables are like placeholders for colors and fonts in your design. Instead of setting a fixed color or font, you use a variable. Later, that variable is replaced by your brand’s actual settings in Rechat.

Figma Variable modal

Why use Variables?

• Stay on-brand: Your design automatically uses the colors, fonts, and styles from the brand you’re creating for.

• Flexible: The same template can work for multiple brands without redesigning from scratch.

• Dynamic: If the brand settings change, your templates update automatically to reflect the new look.

How Variables Are Loaded

You don’t need to create variables manually. When you log in to your Rechat account through the plugin for the first time, the Rechat Plugin automatically creates a set of variables in your Figma file. These variables are generated directly from your brand settings (colors, fonts, etc.) and are available for use right away.

• For example, variables such as Title Font, Paragraph Font, or Background Color are created automatically, so you can start designing on-brand without extra setup.

Fonts

Imagine your brand uses Reckless Neue for titles and Circular for paragraphs.

• In Figma, instead of directly selecting “Reckless Neue” or “Circular,” you assign a font variable such as Heading or Paragraph.

• When you export the template with the Rechat Plugin, the plugin replaces those variables with the actual brand fonts (Reckless Neue for Title, Circular for Paragraph).

Assign a brand color variable to your text.

Colors

The same principle applies to colors.

• For example, you may want a background, title, or paragraph text to adapt to the brand’s color.

• Instead of setting a fixed HEX color code in Figma, you assign a color variable like Paragraph.

• On export, the plugin swaps this variable with the brand’s real background color set inside Rechat.

Assign a brand font variable to your text.

Every time you select a different Rechat account in the plugin, a new set of variables will be added based on that account’s brand settings. A best practice is to have each designer work in their own Figma design file when handling different brands. This prevents multiple sets of variables from overlapping in one file, which could make color and font choices confusing.

These variables are local. They are only available in the specific Figma file where the plugin was opened. If you open a different file, the plugin will generate a new set of variables for that file.