From Figma Design to a Real Life WordPress Website

An A to Z technical overview to building a WordPress website for a client.

Step One: Onboard and Prepare

Although this tutorial does not go into detail about my sales process, Notion portal, or questionnaires, it is important to note a few items that you need to request from your client.

Access to their domain’s DNS settings. Most of my past clients have GoDaddy for their domain which they can give you delegate access to. Some clients require a quick Loom video to show them how to delegate access.
Email information. If they have a professional email set up, you will need to know who their provider is (typically Gmail or Outlook). If they have outlook, you will need to request MX settings from them. They will have a unique ID from their admin center. Gmail mx records are standard for all accounts.

Step Two: Design and Export

This step looks a little different for everyone depending on their package. I create each page template in Figma and work with my client throughout 2-3 days for my website in one week to ensure that they love it. Figma is totally free-hand, so keep in mind that designs made here and shown to the client should only be features that you are confident you can develop over in WordPress. I tell my clients they can expect 85-90% accuracy to the design. Under promise and over deliver!

Design and use Figma’s comment feature to collaborate with your client.
Set fonts and colors as you go. This will make it super easy when you go to actually develop the website.
Export all images to organized folders to later upload into WordPress.
Receive official sign-off on your design

Step Three: Set up Your Hosting

Everyone has different opinions when it comes to hosting providers. Basically, WordPress websites require a host, which is like a rented plot of land online. The domain/ website is the house. You need a place to put it.

I have used Hostinger for the past 9 months and have had no issues. Their customer support has been good and their uptime and back-ups are reliable. I’ve had clients who use their own GoDaddy hosting and I realize that their uptime and customer support is not great, plus they charge extra for everything.

Megan Weeks from Megan Weeks Design Co. uses Siteground, which I’ve also heard is reliable!

Here is how you can set up your hosting:

Create a Hostinger account. You can use my referral link!
Go to websites and click the “add” button. It will prompt you from here to purchase a hosting account with them if you don’t have one already. If you plan to take on a few clients, you can increase your plan as time goes on.
Follow all of their prompts. I skip any ai features or plug-ins at this point. You can add those all later.
For the domain, type in the current domain of your client’s website. It will create a preview version which you can go back and connect to their domain once development is complete.
Once submitted, you can find your way back to your website list and choose “manage”.
Install WordPress using the WordPress auto-installer. It usually shows up on the dashboard under “manage”.
Once installed, choose “admin panel” instead of “manage”, which will take you to the backend of your WordPress website.

Step Four: Install Elementor Pro

Just how there are different hosting options, there are different options for a no-code builder as well. My favorite is Elementor Pro by a landslide. I find it to be the easiest to work with, edit, and it enables me to create super unique features. It also pretty low-code compared to builders like Squarespace and Wix, which is great for SEO.

Go to plug-ins and add new in your WordPress backend. Search and activate “Elementor”.
If you already have an Elementor Pro account, you can log in on an new browser tab and download the .zip file to upload the premium plug-in. If not, the activated Elementor plug-in should have a link saying “upgrade to pro”. You will need to make an Elementor account. I highly recommend saving this account information and using this builder for all your clients, charging them accordingly. Your cost will go down the more sites you’re able to build, leaving room for profit.

Step Five: Install Other Plug-Ins

Every small business website designer has their favorite plug-ins. I’ll list my favorites below.

All-in-one SEO. Free. Great for helping out with headings and social sharing images.
BlogVault. Free version. I like to have back-ups away from the website hosting just in case something were to go wrong.
Wordfence website security. Free for informational/ form websites and I would require paid for any websites receiving payments or other secure information.
CookieYes. Free. Adds a cookie banner to your website- necessary as having one is becoming law in many US states. This one is customizable!
Lightspeed cache. Free. Keeps your website running at tip-top speed, necessary for SEO and a good user experience.
Smush image optimizer. Free. Converts all images into WebP to decrease file size and increase site speed.

There are other plug-ins that I love and many that help with advanced website features like membership sites. These are the 6 core that I add to every website.

Step Six: Add Pages and Set Menu

Under pages, add all the pages in your site map/ layout. Then go to appearance- menus and set up your menu. I like to uncheck the box that says “automatically add new top-level pages to this menu”. You can nest child pages under the parent page.

Step Seven: Design Your Website Themes

Under templates, find your way to the theme builder. In here you can set global themes for your website. I always set my navigation bar and footer here then apply them to all pages. The 404 page will also be found here. Now that your menu is set, you can use the WordPress menu widget to design the navigation from your design.

Step Eight: Complete the Website Design

Under pages, choose to edit them in Elementor. You can then use Elementor widgets to build out all of your pages. Don’t forget to make them responsive!

Once the design is complete, you can send the link that is the temporary domain to your client for review.

Step Nine: Connect the Website to Your Client's Domain

This is the part that always confused me, but it is easier than I thought!

By this point you should have access to your client’s DNS settings and understand who their email is through.

This process can take up to 24 hours, so you can schedule the launch for a day or two after. The site will be live, but you don’t want to announce a launch until you’re positive it will be ready.

In Hostinger, go back to “manage” for your website.
There should be a spot that says “name servers are not pointing to your website” or something along those lines. Look for red text or a banner.
Walk through their directions. You will copy the hostinger name servers and change them out in the DNS settings of your client’s domain provider.
Once those are copied over and saved, it will take up to 24 hours to propagate. This is a good time to ensure their email will work as well.
Find your way back to Hostinger and go to the website DNS settings. Remove the hostinger MX records and add the ones for Outlook or Gmail, or whatever their email provider is, as mentioned earlier. Email providers will have directions on how to do this. Once those MX records are secured, when the website moves over, their email should be working still as well. Your client should not have any downtime with their email account.

That’s it!

I hope you found this tutorial helpful. I know it would have helped me when I was starting out 9 months ago!

Don’t forget to watch my Youtube video where I walk you through this process!