Figma Design to WordPress Website (MINI COURSE)

Welcome to my mini course where we turn Figma designs seamlessly into functional WordPress websites using Divi, the powerful WordPress theme. In this step-by-step tutorial, you'll learn how to bridge the gap between design and development, so you feel more confident creating custom websites for your clients.
Throughout this mini course, we'll dive into Divi's drag-and-drop interface for WordPress. Whether you're a seasoned designer looking to enhance your web development skills or a beginner eager to bring your designs to life, this mini course equips you with the knowledge and tools needed to succeed. Join me as I show you the tips for Figma and Divi so you feel ready to take on clients using these platforms.
Feel free to jump ahead to any of these parts of the video:
0:00 welcome
0:54 which web platform to use?
3:04 do I design directly on clients account?
3:53 the figma design
5:25 wordpress hosting set up
8:28 installing divi onto wordpress
10:12 divi global settings
12:23 install an SSL certificate
17:50 developing footer
21:52 designing the blog
22:25 watch me develop using divi
25:55 creating blog category pages
30:00 setting global fonts
34:35 thank you!
CHECK OUT MY PODCAST ON SPOTIFY:
open.spotify.c...
---------------------------------------
// WHERE TO FIND ME //
instagram:
/ meganweeksdesign
pinterest:
/ meganweeksdesignco
online portfolio:
meganweeksdesi...
business inquiries:
[e-mail]
---------------------------------------
// MY FREE GRAPHIC DESIGNER RESOURCES //
GET THE FREE WEBSITE DESIGN PROCESS GUIDE HERE:
view.flodesk.c...
PRE-WRITTEN EMAILS FOR YOUR GRAPHIC DESIGN BUSINESS:
view.flodesk.c...
WEBSITE IN A WEEK PROCESS GUIDE:
view.flodesk.c...
BRAND DESIGN ROADMAP:
view.flodesk.c...
FREE LOGO DESIGN QUESTIONNAIRE:
view.flodesk.c...
PROJECT MANAGEMENT WORKFLOW:
view.flodesk.c...
HOW TO GO FROM HOURLY FREELANCER TO TRUSTED DESIGNER
GET MY FREE TRAINING VIDEO 💥
view.flodesk.c...
---------------------------------------
// TAKE MY COURSES //
GUIDE TO: LANDING GRAPHIC DESIGN CLIENTS
This course has 5 video led modules, a downloadable e-book and you will be able to join my community as well 💕
meganweeksdesi...
✨ WordPress Website Design Course ✨
meganweeksdesi...
✨ Custom Branding Process Course ✨
meganweeksdesi...
NOW OFFERING BRAND + WEB DESIGN COURSES IN A BUNDLE 💥
meganweeksdesi...
---------------------------------------
// OTHER HELPFUL LINKS //
Join my email list for more helpful design tips:
view.flodesk.c...
LIKE MY EMAIL STYLE?! JOIN FLODESK FOR 50% OFF
app.flodesk.co...
MY CONTRACT TEMPLATES:
meganweeksdesi...
GET DUBSADO (my project management system):
www.dubsado.co...
SITEGROUND (my favorite website hosting for WordPress):
www.siteground...
---------------------------------------
I do make a commission on some of the links in this description box. Thank you so much for the support.
#graphicdesign #webdesign

[@Phill_F]

Thanks for this, Megan!

[@lastspoil5547]

Is this all we need? I'm so tired of learning all the things lol? I'm a newbie web designer and it seems like alot of clients demand wordpress over webflow. I also hear that there are ai tools that convert figma to wordpress. Is this the right tutorial for me?

[@chrisder1814]

hello Can you help me use the API, I had an idea but I don't know if it is feasible

[@paologtrulli]

Appraciate the video - can you use 'any' theme or is DIVI the must use?

[@MeganWeeks]

you can use any visual builder or web platform you want!

[@kelas.kreatif]

So beautiful

[@visualmodo]

Excellent video and tips!

[@killeen-designs]

This video could not have come at a better time for me! Thanks Megan. Do you usually follow padding and margin as you designed them in Figma or do you customize those as you work in Divi for what looks best? Just trying to avoid any surprises with a client.

[@riosablenk8910]

Awesome works, love your clear simple design 😊👍 Divi has always been my first option in WP Page Builder beside Elementor. I suggest you to use child-theme as a best practice in WP Dev, in case update can break things sometimes 😅 keep up..

[@MeganWeeks]

yes! I typically always use a child theme, didn't show that part but thank you for reminding me!

[@janatrieb1112]

Thank you so much for this video, it helped me a lot!

[@MeganWeeks]

So glad it did!

[@Ninechang]

Very very thank you so much

[@bassdog61]

Thanks. Wish there was an easier way. Looks like there is a way to convert Figma to Elementor but not Divi from what I see, has to be done manually like you did or create a json file from Figma. 🤷‍♂

[@MdAlif-bd7hs]

Very very thank you so much ❤

[@sarahcrosley]

I've been using Divi for years but how do you have all three menus displayed at once: content, design, advanced?

[@iliostalaktithoua9028]

the background music is a great addition imho

[@Huge04]

Thanks for the video, what is your thoughts on Webflow?

[@MeganWeeks]

I have not played around with it enough to give an honest review - it is on my list to learn though!

[@brianbartels9580]

I love webflow. The community of webflow is excellent and everything is practically easy. It's kind of a snap on editor mostly but you have to have basic knowledge of HTML and CSS. The best part of Webflow is in the community you can actually kind of see behind the scenes of how other developers design their websites. You can kind of see under the hood and inside the engine of how these designers designed their website. Plus a ton of really useful tutorials out there about Webflow that are excellent.

[@vadim_sharapov]

​@@brianbartels9580 I would disagree with the 'basic knowledge of HTML and CSS' statement. Perhaps for a very, very simple website, basic knowledge might suffice. However, in most other cases, you need to understand more than one might expect designers should know. In my opinion, Webflow is more a simplification for developers than something that people call 'no-code,' because you definitely need to know and write code

[@ydunmedia]

Hi Megan. When you were setting up the theme, you didn't chose a Divi Child theme too, why? I am very curious about that! Thank you for all your videos - I love them.

[@fernwehtwl]

thanks for this im curious to know if you can use hover states and animation from figma and have it transferred to wordpress so its not static

[@syedhasnain7456]

Hi do you need a website

[@SayyidinaUsmanEGhaniQuran]

I'm disagreed with you that I have not seen figma in your whole video let know where you have used figma in your video??? I have spent my lots of time in your video please reply me.

[@labstudiozllc3404]

I think she already created the mock-up in Figma and really going over how to transfer files to Wordpress.

[@OvienSuccess]

What do you think about Figma to Wordpress plugin ?

[@amiratee9874]

Thank you plz make more videos on this for other platforms like showit ...ect

[@MeganWeeks]

will do!!

[@amiratee9874]

@@MeganWeeks thank u 🌼🧡

[@thesamalexis]

Thanks for sharing this! What do you think about Wix Studio for agencies and freelancers?

[@TheReeseC13]

I currently use Wix Studio for my freelancing, so far my clients have been really pleased.

[@vadim_sharapov]

Hi :) You mean to offer websites on Wix for clients? I saw it works, but I personally saw a lot of people doing that with Squarespace, just because I believe you can do slightly more advanced things, which high-paying clients are usually asking for. So, I would recommend looking into Squarespace and Wix as valuable platforms to make money.

[@MeganWeeks]

I am still playing around with this more to give my full opinion! do you use it??

[@thesamalexis]

@@MeganWeeks Not fully, I’ve been learning it to see if I would like to offer it as an option.

[@StoicescuCiprian]

what do you think about issues Divi has with optimization and loading speed?

[@MeganWeeks]

I haven't had too many issues with this but I also make sure all images are sized properly and I am super aware of anything that might be too large for the site. I do hear this can happen though so something to be aware of!

[@plantifulalexandra]

4:45 Same, I'm glad, no one seea that.😂 I always start well and then it's one big chaos, just can't be bothered to be organized with it as the design the client sees is all that matters. Was just wondering how you just use google fonts like that.. but realized you're from the US, so no GDPR. Is there no rem for fonts in Divi?

[@MeganWeeks]

haha I realized how bad it was when I started filming lol. There is a solution for fonts on Divi, it requires a little bit of CSS code and I occasionally use a plugin to upload custom fonts!

[@plantifulalexandra]

@@MeganWeeks Ah no, I meant if you can use rem instead of px for font sizes in Divi, without css.

[@aybeedev]

hi, you should cut out/blur your api keys!

[@MeganWeeks]

good thought, thank you!