On this page:
Figma designs to CMS
Are you a design ace, but less confident when it comes to actually building a new website? Maybe you’re new to website development and starting a build from scratch is a little daunting. Wouldn’t it be wonderful if there was a way to simply design in Figma and have a fully functioning website without having to code to build your Figma design?
Converting the visual design files from a design tool like Figma is complex and requires specialist knowledge on how to write code for the CMS platform you intend to use for the website build. Even if you know how to design in Figma and write code or build a site in either Wordpress or Drupal (bonus points for being able to do both!!), it’s still time consuming.
In this insight, we take a look at two different possible approaches for converting Figma website design files to a functional content management system (CMS) without having to develop the website code from the ground up. We’ll focus on two tools that aim to speed up the task of building the base website and applying your unique Figma visual design theme with minimal coding knowledge or effort required. One is Figma to WordPress (with ) and the other is Figma to Drupal (with ).
Figma to WordPress
If WordPress is your CMS of choice, then converting Figma designs into a WordPress website is possible using a WordPress plugin called . Follow the steps below to convert your site:
Install Figmafy via your WordPress dashboard and click on Activate Plugin
Export your Figma design by clicking on Figmafy from the export options
Import your Figma design into WordPress via Figmafy > Import Figma design
Customise your design to match your website’s branding using built-in WordPress tools or third-party plugins
Figma to Drupal
However, what if you want the flexibility and deeper capability of Drupal? Although Figmafy doesn’t have a plugin for Drupal, you can convert Figma designs into a Drupal 10 website using CivicTheme. is an open source, component-based design system that includes a Drupal 10 visual theme.
The advantage with CivicTheme is that the Drupal theme has a companion Figma visual design system. This means all the Figma visual components to design a website are built and ready to use as-is, out-of-the-box, within the CivicTheme Drupal build. Use Figma to visually design, prototype and test designs, and then simply assemble and arrange the same components already built in Drupal, pixel perfect. As CivicTheme is a true design system, changes can be centrally managed across the site. Changes to areas such as the font, color palette and components will flow across the site globally instead of just separate individual features.
Follow the steps below to convert your site:
Design your site using the CivicTheme Figma , that gives you the ability to select design elements from up to 50 user interface (UI) components out-of-the-box.
Assemble out-of-the-box UI components according to the Figma design within the Drupal CMS with no coding. As the Drupal component library is in perfect sync with Figma your site can be ‘built’ to ensure your Drupal website looks 100% the same as your designs. Visit the CivicTheme documentation for more information about how to use .
Next steps
If you’re keen to explore Figma to Drupal, you have two options:
Go DIY, by downloading the CivicTheme Figma and CivicTheme from and following the