Up next in 10
How To Transfer Figma To WordPress
2K views
Apr 19, 2024
In this video tutorial, we'll demonstrate the step-by-step process of transferring designs created in Figma to WordPress websites seamlessly. Learn how to export Figma designs in various formats compatible with WordPress, such as images or code snippets. Discover efficient methods to integrate Figma designs into WordPress themes or pages while maintaining design integrity and responsiveness. Whether you're a designer or a WordPress developer, this guide will equip you with the skills needed to bring your Figma designs to life on WordPress platforms effortlessly.
View Video Transcript
0:00
how to transfer figma to wordpress. Hi guys, welcome back to another video and in this video
0:05
i'm going to be telling you how you can transfer your figma themes into wordpress. So having said
0:11
that let's just jump into the video. So for this to work what you're going to need to do is you're
0:15
going to come over here onto figma you're going to have everything ready right your website your
0:19
themes whatever what you're going to need to do now is you're going to have to install a plug-in
0:24
so you just simply click on this button right here at the top corner you're going to scroll down and
0:29
click on plugins and click on find more plugins you're going to click over here it's going to
0:35
open up the plugin section right here and what you're going to need to do is you're just simply
0:39
search wordpress to figma or figma to wordpress or just simply search for wordpress and you will
0:44
find it right here so as you can see this is a theme right here so what you're going to do is
0:48
you're just simply going to click on run and over here you can go ahead and run it right here this
0:55
plugin's name is yotaku or figma to wordpress by yotaku and now what you're going to do right
1:01
here is i'm going to enter in the email address as well right i'm going to sign up and you should
1:08
be good to go so i'm going to go ahead and add in my email address and sign up next what you're
1:13
going to do is it's going to ask you to select frames all right over here you just simply click
1:19
on this button let's say we select this frame right here the home page we selected the entire
1:26
page and now we just simply click on add frame there we go we have the home page we also want
1:33
to add a shopping cart we select that we click on add page this is going to be the normal page
1:39
we also want to select product page select the type of page so we added the shopping cart it's
1:45
now asking us to select the type of page we'll just say it's a normal page there we go now we
1:49
want to add the product page you select add product page this is a posts page we'll just
1:56
say it's also a normal page there we go we now have more products we now have more frames now
2:01
what we need to do is select continue it's going to go ahead and use the assistant over here we'll
2:08
take estimated of 33 seconds to complete and this will automatically try to detect interactives and
2:15
wordpress elements so let's go ahead and select yes i want to use that it's actually a really good
2:20
plugin to use now let's just wait for a couple of seconds for it to process the entire theme and as
2:26
you can see it is ready now we just simply click on next step two now over here we have wordpress
2:34
elements we have footers we haven't added the footer but we can add that later but for now i
2:38
think this is good we can go ahead and select a footer as well so let's go ahead and select it
2:46
we haven't added a footer right here so we don't i don't think we would need to but yeah for now i
2:52
think this looks good just for the sake of this video so you can understand once you have everything
2:58
you've added the footer logs and the forms and all of that then once you've selected them just
3:03
the exact same way i showed you just simply click on continue and of course we are missing some
3:10
elements but it's okay just for the sake of this video we're just simply going to click on continue
3:14
without selecting and over here are all the steps all right all the pages the product pages for the
3:21
headers and all of that now we just simply click on continue now we just simply create our website
3:28
over here figma url all right you can go ahead and add my figma url we'll just say demo website
3:34
or whatever click on create your figma url wait for a couple of seconds i think i messed it up i
3:40
forgot to add fonts let's go ahead and add some fonts as well all right so now i have changed the
3:47
website uh for some reason it wasn't working for this one i hope it works so now let's go ahead and
3:53
try it again i'm gonna go ahead and add my email and do all of that again let's go ahead and select
3:59
the main frame this is the main frame there we go the entire page there we go and now i have
4:06
detached them so let's go ahead and select the main page the main page is going to be let's say
4:13
here and here this is the about us page we want to go ahead and we'll select the hero as the main
4:20
page and select continue there we go now we are going to select another one we'll click on continue
4:29
click on the assistant now it's going to go ahead and process everything and there we go it is now
4:34
building over here as you can see you're optimizing and over here you can go ahead and select the
4:39
reasons you want but yeah over here it's uploading all the assets and it's going to do its thing for
4:44
us we're just simply going to let it rest over here and do its thing well it is taking quite a
4:50
bit of time but you guys understand what you need to do right like follow the steps and install this
4:57
plugin and then you just simply let the ai system do its thing and once you have selected all the
5:03
elements you just wait for it to finish and once it's finished since you've added the email into
5:08
the beginning they will send you the theme on your email address where you can download them and then
5:14
what you will do is you will come over here onto your wordpress website and over here onto the
5:20
wordpress website you are just going to go ahead and simply install the theme now to do that what
5:25
you're going to do is you're going to click on appearances right over here you have theme editor
5:30
customize whatever these options are right you just simply click on themes right find the theme
5:36
option and over here you can go ahead and click on the add new theme as you can see we have a bunch
5:41
of other themes as well but that's okay because we are not interested in them because we already
5:46
have our theme so what you need to do now is just simply click on add new theme and just select and
5:51
upload your theme right here so you have the upload theme button as well you just simply
5:56
click on the upload button choose the file that they have sent to you and you are good to go after
6:02
that your theme will be uploaded and since this is a responsive theme all right it's going to do
6:08
its thing i don't know why it's taking so long it should be done but i'm just simply going to let it
6:13
go on or cancel it because after that there's not much else to show you or tell you because it's
6:19
basically it you just simply let it do its thing you get the theme you go ahead go to the wordpress
6:26
website click on themes upload your theme choose the file and then install it and after that you
6:31
can customize it and link each pages and each buttons to your own specific buttons as well
6:38
and you should be good to go and also guys if you're wondering where i got these things from
6:43
well the website itself the theme i got from the community as well from figma community you can
6:50
come over here and you can just simply search for landing pages right over here and the figma
6:55
community you can search for it and you will find a couple of different things over here you can find
7:02
paid ones for free ones as well it depends on you you can go ahead and search for all products and
7:07
you can choose whichever one you want so you have figma figma jam you go ahead and select whichever
7:12
one you want i just simply came over here typed in website and i found one that i liked and to use it
7:19
as a demo you can just simply find it over here and let's say you like the design right let's say
7:24
you like this design what you'll do is you'll click on the design that you like right and wait
7:30
for a couple of seconds for it to load it's going to give you a simple preview over here in a matter
7:34
of seconds that's loading up right here as you can see there you go now you can just simply go ahead
7:38
and scroll it zoom in over here see what it's about how you like the design and stuff like that
7:46
and once you've liked it you can go ahead and open it up in figma and you can start editing it out
7:52
right and if you're wondering about wordpress well i got the wordpress from pantheon it's a free
7:57
website where you can easily get a free wordpress website so just simply search for pantheon over
8:04
here like so you come over here register yourself and you can just easily go ahead and get a free
8:10
domain and create a free wordpress website of course the domain is going to be a quite a large
8:18
domain so as you can see it's going to have a dot pantheon site over here but the rest is you can go
8:24
ahead and add a custom domain as well it doesn't really matter but the hosting is going to be free
8:29
so if you were wondering about that but anyway that is it for this video guys that is how you
8:35
create figma themes and convert them into wordpress so that is it for this video guys hope you guys
8:41
enjoyed this video if you have any questions let me know in the comment sections down below and
8:45
i'll be sure to answer them as soon as possible so having said that if you guys found this video
8:49
helpful and educational then be sure to hit the like button subscribe to the channel and turn on
8:54
post notifications and i will catch you guys the next video and until then take care and goodbye
#Clip Art & Animated GIFs
#Online Goodies
#Skins
# Themes & Wallpapers