Whether you’re rebranding your existing website or starting from scratch, chances are you have started the design process using Figma. Once the ideas have been finalized, color palettes confirmed and style guides created, it’s time to transfer your wonderful new Figma designs to the digital world of WordPress.

However, this move can be a challenging task, especially for those with limited experience in website development. There is no quick fix. No magic plugin or extension that will do all the hard work for you.

In this article, I will provide a basic account of how we transferred our new website design from Figma to WordPress. What you’ll need is some basic understanding of HTML, CSS, PHP and WordPress’ native structure … and, when all else fails, a friendly frontend developer (Thanks, Steliyan!).

1. The Discovery Phase

Before we start converting the design into code, it’s important to take a look at your brand new Figma website design and go through any red flags or potential design impracticalities with the designer. (Pro tip: To ensure a smooth collaboration with the design team, it also helps to celebrate the good stuff as well rather than simply focusing on what needs to be amended or, in some cases, redesigned.)

It’s unusual for website designs to arrive fully formed “out of the box”. In reality, designs often include elements and arrangements that might be impractical to implement or (in my case) stretch your coding abilities beyond your limits. Now is the time to assess these bumps in the road up front and speak to the people who can help resolve these issues before you are about to dive in.

A perfect example of this is the unique sliding navigation menu proposed for the new viesure website. It illustrates that, whilst Figma’s prototyping feature is extremely useful, it cannot always accurately depict every aspect and functionality of your future website.

Cool, eh? Unfortunately, this effect is simply not possible using HTML alone. Basic website laws require the browser to load when moving between pages. In order to realize these smooth transitions, we had to implement a JavaScript plugin that would provide us with greater control over page transitions and, in effect, bypass the normal page enter and page exit load states. Hello smoothState.js! However, this was just the tip of the iceberg, as this meant we needed multiple transition styles depending on which page you are leaving and which page you are entering. There was also room for a little bit of coding magic to make the transitions even more seamless and organic compared to the original Figma proposal.

Flagging concerns like this from the start allowed us to move forward knowing that we could successfully execute the more complicated aspects of the original design concept.

During this discovery phase, it’s important to work out the individual components and sections of each page and how these can then be translated economically into code, not only by creating tidy HTML but also how you will structure your SASS files and folders.

In addition, you will also need to plan for the next stage. Remember, your new website will be created in WordPress, where multiple users can come in and edit content, replace images, make style changes and, in some cases, re-order whole sections.

2. The Coding

Once the design is finalized and any potential blockers have been resolved, it’s time to turn your attention to the coding part. Unfortunately, it’s simply not possible to just export your Figma design into WordPress without a considerable amount of work.

Generally, there are two established practices that you can explore:

The first is to develop your website immediately in WordPress using a page builder, such as Elementor or Divi Builder. These plugins provide a visual WYSIWYG tool for developing WordPress websites and are the best way forward for those with no – or very little – coding knowhow. However, there is a steep learning curve to master these plugins and, for most, due to the time commitment required, DIYing is simply not a cost-effective option. Page builders also tend to add a lot of unnecessary “bloat” to their code, such as embedded scripts and hidden elements that are superfluous to your individual needs. They also require additional plugins and resources to support all of their features. The result? Slow loading times and poor site performance.

The other and more comprehensive approach is to manually translate your Figma design into HTML code before converting it into a WordPress theme. Whilst this is arguably the “slower” approach, it provides you with the most flexibility and personalization as it allows for all components of your project to be rendered exactly as they are in the original Figma design.

As mentioned, this is a multi-step process. For the new viesure website, we started with converting the Figma design into a test, static HTML website. This allowed us to see a real, online version of the website – with all the interactive elements and animations in place – that we could easily edit and change during development and Q&A stages. Later on in this article, I will discuss how we then converted this static website into a WordPress theme, first as a localhost site and then, finally, as a bona fide, live WordPress website.

So, how do we actually do the conversion? I’m afraid the simplest answer to this is … manually. Whilst Figma does have the ability to export designs directly into HTML and CSS, chances are that it will create a huge number of errors in your code that will ultimately mess up your design. It is recommended that you do the conversion yourself, not only to avoid mistakes and poor coding quality, but also to ensure that you have total control over naming classes and implementing your own, personal HTML and CSS code structures.

3. Hello WordPress!

Once you have completed coding your test, static website, it’s time to make the jump into converting it into your custom WordPress theme. Where do you start?

It is generally considered best practice to first set up your WordPress theme in a localhost environment – in other words, using your computer as a server instead of hosting it on the Internet. This way, you can ensure that your website functions smoothly and that there are no compatibility issues with other plugins and programs before you go live. There are a handful of tried and tested tools that can help you install WordPress locally on your computer, including MAMP (Apple) and XAMP (Windows).

What you may be wondering, however, is how can we convert our custom HTML code so that it can be edited by multiple users in the WordPress backend? The answer: Advanced Custom Fields.

Advanced Custom Fields (ACF) is a powerful plugin that allows you to create and add a variety of different field types to your WordPress edit pages. Custom fields are already a native function of WordPress and an integral part of its content management system. However, its native custom field opportunities are limited and its interface is not particularly user-friendly. What ACF can offer is essentially a bridge between your wonderful designs and custom code to WordPress’ native editing capabilities.

Below are screenshots of the Work With Us section of the new viesure website with the original HTML code.

<div class="index-work">
   <div class="main__container">
      <div class="normal__wrapper">
         <div class="normal__wrapper__box">
            <div class="normal__wrapper__box__flex">
               <div class="normal__wrapper__box__flex__side">
                  <h2>Set the path and the rest will follow</h2><br>
                  <p>Would you like to help us shape the future? Here at viesure innovation center, we are in a constant state of expansion, development and positive growth. From research and testing to design and development, all are equally needed to help prepare our vision of tomorrow.</p>
                  <div class="link">
                     <a href="career.html"><div class="button primary">Work with us</div></a>
                  </div>
               </div>
              <div class="normal__wrapper__box__flex__side">
                 <div class="revealing"><div class="image-wrap"><img src="./images/viesure_team_02.jpg"></div></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Now, clearly, this static HTML code bears no relation to WordPress and its editing functionality. What we needed to do is to create our own Custom Fields within ACF that set the rules for this section whilst also defining how these Custom Fields would look on the actual edit pages. For example, in our Work With Us section, we needed two columns – left and right – and text area as well as link and image fields.

The two screenshots below show how this Custom Field is set up within the ACF plugin and then how the edit page – in this case the Homepage – is shown in the backend.

And, now for the fun part. We replace that boring static HTML code with some of ACF’s magical code and … voilà! You have yourself a working, completely editable section that can be updated as many times as you like by multiple users.

<div class="index-work">
   <div class="main__container">
      <div class="normal__wrapper">
         <div class="normal__wrapper__box">
            <div class="normal__wrapper__box__flex">
               <?php if (have_rows('two_columns')) : while (have_rows('two_columns')) : the_row(); ?>
                  <?php if (have_rows('left_column')) : while (have_rows('left_column')) : the_row(); ?>
                     <div class="normal__wrapper__box__flex__side">
                        <?php $content = get_sub_field('main_content'); ?>
                        <?php echo $content; ?>
                        <div class="link">
                           <?php $link = get_sub_field('link') ; if ($link) : $link_url = $link['url']; $link_title = $link['title']; ?>
                              <a href="<?php echo esc_url($link_url); ?>"><div class="button primary"><?php echo esc_html($link_title); ?></div></a>
                           <?php endif; ?>
                        </div>
                     </div>
                  <?php endwhile; endif; ?>
                  <?php if (have_rows('right_column')) : while (have_rows('right_column')) : the_row(); ?>
                     <div class="normal__wrapper__box__flex__side">
                        <?php $image = get_sub_field('main_image'); ?>
                        <div class="revealing"><div class="image-wrap"><img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>"></div></div>
                     </div>
                  <?php endwhile; endif; ?>
               <?php endwhile; endif; ?>
            </div>
         </div>
      </div>
   </div>
</div>

In short, ACF allows you to take full control over your WordPress edit screen and tailor the content editing experience around your website’s needs.

Conclusion

As nice as it would be if there was a simple export button, at this moment in time, it takes a series of steps to successfully recreate a Figma design to a pixel-perfect online version.

The steps shown above are merely an example of how we at viesure solved this question and, whilst certainly not exhaustive, I hope it will provide a few snippets of useful information that will help you when transferring your Figma designs to WordPress. Happy designing and good luck!