{"id":168209,"date":"2026-05-26T14:07:05","date_gmt":"2026-05-26T11:07:05","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=168209"},"modified":"2026-05-20T12:06:36","modified_gmt":"2026-05-20T09:06:36","slug":"how-to-import-and-export-design-systems","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/","title":{"rendered":"How to import and export design systems"},"content":{"rendered":"\n

The Atomic editor has the ability to import and export your design system, including variables and classes, between different websites. This feature allows you to standardize and reuse your styling foundation across multiple projects, streamlining your workflow and ensuring design consistency.<\/p>\n\n\n\n

What are Elementor Design Systems?<\/h2>\n\n\n\n

Elementor Design Systems are a collection of reusable styling logic, such as Variables<\/strong> (for colors, fonts, and sizes) and Classes<\/strong> (for reusable element styles). These systems help you maintain consistency and scalability across your website by defining styles once and applying them globally.<\/p>\n\n\n\n

How to export your Elementor Design System<\/h2>\n\n\n\n

Exporting your design system allows you to save your variables and classes into a single ZIP file, ready to be imported into another Elementor website. This is particularly useful for agencies or professional creators who want to reuse a consistent styling foundation across client projects.<\/p>\n\n\n\n

Example:<\/strong>\u00a0You have established a comprehensive design system on a development site, including custom typography variables, a color palette, and several reusable button classes. You want to transfer this entire system to a new client website.<\/p>\n\n\n\n

    \n
  1. Open the Elementor Editor on the website containing the design system you wish to export.<\/li>\n\n\n\n
  2. Click the\u00a0Design System\u00a0icon in the\u00a0top bar.
    \"The<\/li>\n\n\n\n
  3. In the\u00a0Design System<\/strong>\u00a0panel, click the\u00a0ellipses<\/strong>.
    \"The<\/li>\n\n\n\n
  4. Select\u00a0Export<\/strong>.
    \"The<\/li>\n\n\n\n
  5. Confirm that a ZIP file containing your variables and classes is downloaded to your computer.<\/li>\n<\/ol>\n\n\n\n

    How to import an Elementor Design System<\/h2>\n\n\n\n

    Importing a design system allows you to apply a previously exported collection of variables and classes to a new or existing Elementor website, instantly applying your standardized styling.<\/p>\n\n\n\n

    Example:<\/strong> You have exported a design system from a previous project and now want to apply it to a new client website to quickly establish its visual identity.<\/p>\n\n\n\n

      \n
    1. Open the Elementor Editor for site where you want to import the design system.<\/li>\n\n\n\n
    2. Click the\u00a0Design System<\/strong>\u00a0icon in the top bar.
      \"The<\/li>\n\n\n\n
    3. In the\u00a0Design System<\/strong>\u00a0panel, click the ellipses.
      \"The<\/li>\n\n\n\n
    4. Select\u00a0Import<\/strong>.
      \"The<\/li>\n\n\n\n
    5. Upload the ZIP file you previously exported.<\/li>\n\n\n\n
    6. Confirm that the imported\u00a0variables\u00a0and\u00a0classes\u00a0appear in the\u00a0Design System\u00a0panel.<\/li>\n\n\n\n
    7. If there are any duplicate variables or classes you’ll be asked to either replace or keep the existing settings.<\/li>\n<\/ol>\n\n\n\n

      What are the limitations of importing and exporting design systems?<\/h2>\n\n\n\n

      Currently, the import\/export functionality applies to the entire ZIP file, meaning you cannot selectively import individual variables or classes. Additionally, the system does not support adding imported items to existing lists with different prefixes; name conflicts are managed by choosing to override existing values or keep your current values.<\/p>\n\n\n\n

      Elementor Design System FAQ<\/h2>\n\n\n\n

      Can I import individual Variables or Classes?<\/h3>\n\n\n\n

      No, currently, the import\/export functionality applies to everything included in the ZIP file and cannot be separated by Variables or Classes.<\/p>\n\n\n\n

      What happens if there are name conflicts during import?<\/h3>\n\n\n\n

      When importing, you can manage name conflicts by choosing to override existing values or keep your current values.<\/p>\n\n\n\n

      Is the Design System import\/export feature available in Elementor Free or Pro?<\/h3>\n\n\n\n

      This feature is available in Elementor Core and Pro.<\/p>\n\n\n\n

      Does this feature support older Elementor versions?<\/h3>\n\n\n\n

      No, this feature is part of Elementor V4 and requires the Atomic Editor to be active.<\/p>\n","protected":false},"excerpt":{"rendered":"

      The Atomic editor has the ability to import and export your design system, including variables and classes, between different websites. This feature allows you to standardize and reuse your styling foundation across multiple projects, streamlining your workflow and ensuring design consistency. What are Elementor Design Systems? Elementor Design Systems are a collection of reusable styling […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1506],"tags":[2231],"class_list":["post-168209","post","type-post","status-publish","format-standard","hentry","category-v4-editor","tag-version-4-1"],"acf":[],"yoast_head":"\nHow to import and export design systems | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about How to import and export design systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to import and export design systems | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about How to import and export design systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-26T11:07:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/05\/Teh-Design-System-Icon.png\" \/>\n\t<meta property=\"og:image:width\" content=\"241\" \/>\n\t<meta property=\"og:image:height\" content=\"164\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"How to import and export design systems\",\"datePublished\":\"2026-05-26T11:07:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/\"},\"wordCount\":539,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Teh-Design-System-Icon.png\",\"keywords\":[\"Version 4.1\"],\"articleSection\":[\"Editor V4\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/\",\"name\":\"How to import and export design systems | Elementor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Teh-Design-System-Icon.png\",\"datePublished\":\"2026-05-26T11:07:05+00:00\",\"description\":\"Learn everything about How to import and export design systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Teh-Design-System-Icon.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Teh-Design-System-Icon.png\",\"width\":241,\"height\":164,\"caption\":\"The Design System Icon\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-import-and-export-design-systems\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build with the Editor\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Editor V4\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/v4-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to import and export design systems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to import and export design systems | Elementor","description":"Learn everything about How to import and export design systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/","og_locale":"en_US","og_type":"article","og_title":"How to import and export design systems | Elementor","og_description":"Learn everything about How to import and export design systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/","og_site_name":"Help","article_published_time":"2026-05-26T11:07:05+00:00","og_image":[{"width":241,"height":164,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/05\/Teh-Design-System-Icon.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"How to import and export design systems","datePublished":"2026-05-26T11:07:05+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/"},"wordCount":539,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/05\/Teh-Design-System-Icon.png","keywords":["Version 4.1"],"articleSection":["Editor V4"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/","url":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/","name":"How to import and export design systems | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/05\/Teh-Design-System-Icon.png","datePublished":"2026-05-26T11:07:05+00:00","description":"Learn everything about How to import and export design systems in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/05\/Teh-Design-System-Icon.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/05\/Teh-Design-System-Icon.png","width":241,"height":164,"caption":"The Design System Icon"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/how-to-import-and-export-design-systems\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Build with the Editor","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/"},{"@type":"ListItem","position":3,"name":"Editor V4","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/v4-editor\/"},{"@type":"ListItem","position":4,"name":"How to import and export design systems"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/168209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=168209"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/168209\/revisions"}],"predecessor-version":[{"id":168236,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/168209\/revisions\/168236"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=168209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=168209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=168209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}