Design systems cut down the repeated work in website design. They give you a predefined set of design decisions for color palettes, spacing scales, typography, and more. Divi 5 introduced Design Variables in April 2025, letting you define these values globally.
If you’re a web designer or you run multiple sites, you know the pain of setting up the basics for every new project. Design Variables shine even more when you can reuse them across sites.
So, we recently introduced import and export for Presets and Design Variables, making it easy to transfer your design system between sites in minutes. Set up your design system once, then use it across every project. Here’s how it works.
What Are Design Variables In Divi 5?
Design Variables store reusable values that you can apply across your entire site. They’re shortcuts for design decisions you make repeatedly. Manage everything through the Variable Manager in Divi’s left sidebar while using the Visual Builder.
Click the icon, add your values, name them clearly, and start applying them to modules and presets. Divi 5 supports six types:
Subscribe To Our Youtube Channel
- Colors let you define your brand palette and apply those shades consistently across your website. Colors also support relative colors and HSL.
- Fonts save your typography choices so you can reuse heading styles or body text settings instantly.
- Numbers store sizing decisions, such as border radius, padding, and line height.
- Images include recurring visuals such as logos or background graphics.
- Text saves content that appears in multiple places, such as company addresses or taglines.
- Links keep meaningful URLs ready to use.
To use them, click the variables icon inside any supported field, then choose the variable you want to apply.
When you update a variable, everything using it updates across your site automatically. There’s no need to search through individual pages or track down each occurrence.
How Importing And Exporting Design Variables Helps
Design Variables work well on a single site, but most designers and agencies run multiple projects at once. Rebuilding colors, fonts, spacing, and recurring content from scratch every time wastes hours.
Divi 5 lets you export all Design Variables on a site into a single JSON file, then import that file into another Divi 5 project. It benefits everyone:
- Agencies keep brand properties consistent across sites.
- Freelancers drop a starter framework into every new client project and customize from there.
- Teams can share a variable set so new members can start building without recreating values that already exist.
Common Use Cases
The table below breaks down common scenarios where importing and exporting Design Variables saves real time. Each one fits a different workflow, so you’ll likely see yours here:
| Use Case | Who It's For | How It Helps |
|---|---|---|
| Agency starter kits | Agencies with a standard design framework | Export your base variables once and import them into every new client project as a starting point |
| Brand consistency across multiple sites | Businesses with several web properties under one brand | Share one JSON file across all sites so colors, fonts, and spacing stay aligned everywhere |
| Client handoff | Freelancers delivering finished sites | Export the full variable set and include it in your deliverables so clients or future developers can recreate the system on another site if needed |
| Team onboarding | Design teams bringing on new members | New designers import the file and start building with the right values instead of setting them up manually |
| Design system backup | Anyone who wants to protect their setup | Export your variables as a safety net before making large changes, so you can restore them if something goes wrong |
| Community sharing | Designers who share resources or sell starter kits | Package your variable set as a downloadable file others can import into their own Divi 5 projects |
Most of these come down to one thing: not doing the same setup work twice. Whether you’re handing off a project, onboarding a teammate, or protecting your own work, the JSON export gives your design system a life beyond a single site.
How To Export Design Variables
Open the Visual Builder and click the Variable Manager icon in the left sidebar.
You’ll see the import/export icon at the top of the panel.
In the export tab, you’ll see a field for your export filename. Give it something descriptive like “ClientName Variables” or “Agency Starter Kit” so you can recognize it later.
Once you name it, Divi 5 packages every Design Variable on your site into a single JSON file. Colors, fonts, numbers, images, text, and links are all bundled together. Click the export button, and your browser downloads the file.
This exported JSON file works with any other Divi 5 site. You can drop it into a staging environment, a client project, or a teammate’s local setup. The file contains your full variable set, so the receiving site gets your entire design system in a single upload.
Getting The Most Out Of Your Exported Files
Clear variable names make a big difference when someone else opens your JSON file. A variable called “Blue” tells the next person nothing. Blue could be the header background, a button fill, or a border color. But “Header BG” or “Dark Background” removes the guessing.
Same thing with numbers. “Card Radius” is clear immediately. “Radius 1” forces someone to apply it just to find out what it does. A few minutes of naming cleanup before you export saves everyone else time later.
The downloaded JSON file won’t reflect any changes you make after exporting. Adding a date to your filenames helps. Something like “Design Kit – February 2026” makes it easy to tell versions apart when you’ve got several saved.
Exports can double as backups, too. Before you overhaul a site’s color palette or swap out a spacing scale, a quick export saves the current state. If the new direction doesn’t work out, you can import the old file and restore everything quickly.
Divi 5’s Preset Manager has its own separate import and export. The Preset Manager and Variable Manager handle exports separately. That means you’ll typically end up with two JSON files: one for presets and one for Design Variables. Together, they make up your full design system and keep each system easier to manage.
How To Import Design Variables
Importing Design Variables uses the same import/export panel as exporting, but you’ll switch to the Import tab and upload a JSON file. Open the Visual Builder and head to the Variable Manager in the left sidebar. Click the import/export icon at the top of the panel, and navigate to the import tab.
Once you upload it, Divi loads every variable from that file into your current site. Colors, fonts, numbers, images, text, and links all come through in one go.
Preparing Your Site Before Importing Variables
A clean import starts with a clean Variable Manager. Before you load a JSON file from another project, take a few minutes to review what’s already on your site.
If your site already has variables set up, review your Variable Manager after import and clean up anything you don’t need, like duplicates, placeholders, or test values. You can also rename variables to keep your set consistent and easy to understand.
Scroll through each of the six variable types and remove anything you created during testing but never actually applied.
Also, plan for cleanup after import. A full design system JSON might include values that do not apply to your site. A specific street address or phone number saved as a text variable, for example, is something you may want to delete or replace once the import finishes.
Using Imported Variables With Your Existing Content
Design Variables work best when you tie them into your presets. After importing, plug your new variables into the Option Group Presets and Element Presets.
You could set a color variable as the background color in a Button preset, for example. Or apply a number variable to your border radius across all card modules. That’s how you go from a set of variables to a working design system.
Both the Variable Manager and Preset Manager support import and export. That means you can move variables and presets together as a portable kit. Import both on a new site, and your design framework is ready to go without rebuilding from scratch.
What if your site already has content, and that content still uses static values instead of the variables you just imported? Divi 5 gives you three tools to switch over faster.
Find and Replace lets you right-click any field, swap a static color or font for a variable, and push that change across the entire page in seconds.
Extend Attributes takes styling from one element you’ve already connected to your variables and copies it to other elements across a row, section, or full page.
The Inspector gives you a bird’s eye view of every color, font, and preset in a selection. You can spot static values that still need switching at a glance.
Put all three together, and a freshly imported set of variables becomes a working design system across your site. Here’s a quick rundown of the differences between all three features and when to use them.
Get Familiar With Design Variables In Divi 5 Today!
The hardest part of building a design system is doing it more than once. Divi 5 makes that easier by letting you package your colors, fonts, spacing, and content variables into a JSON file you can reuse.
Build the system once, export it, and every site after that starts with your foundation already in place.
Leave A Reply