Introduction to Figma and WordPress
How to convert Figma design to WordPress. Hi guys, today I'm going to teach you how you can convert your Figma Design to your WordPress website.
And before we start, what is Figma and WordPress? Figma and WordPress are two popular software tools used for different purposes in the field of web design and development. Figma is a cloud-based design tool that allows users to create and collaborate on user interface and user experience designs. It provides a comprehensive set of features for designing, prototyping, and sharing web and mobile application interfaces, as well as for creating and managing Design Systems.
Figma's collaborative features allow multiple users to work on design projects in real time, making it a popular choice for teams working remotely. On the other hand, WordPress is an open-source content management system used to create and manage websites and blogs. WordPress provides a flexible and easy-to-use platform for website development, enabling users to create and customize websites without needing to know coding or web development.
WordPress offers a wide range of plugins and themes that can be used to extend the functionality and design of a website. It can be used for a variety of purposes, including e-commerce, blogging, and portfolio sites.
Finding and Preparing a Design in Figma
Now, the first thing we're going to do right now is, currently we are at Figma, and we're going to open the content or our website created in Figma. For example, this one over here which I found in the community. I'm going to open this. As you can see over here, we have different pages for Home page, Blog, lunar specialist, Service, Free Audit, Industries, and about us.
Using the method that I am going to use and I am going to teach you, we would be able to transfer the whole page—the blog, the lunar specialist, service, free audit, Industries, about us—each and every one of these pages to WordPress so that we could use it as our website.
Now, if you don't have any designs as of now, you can simply either create your own using Figma, because Figma is where you can create your UIs or UX for yourselves. You could do designing and use your creativity to create your own website design.
But if you don't want to create, if you just want to have a website that you could transfer, you can simply go back to files over here. And then we're going to click our name over here on the top left. We're going to click on this, and then we're going to see our name and the community version over here. We're simply going to click on the Community. And then this will redirect us to Figma Community, where we can access free and paid templates, plugins, UI kits to kickstart our next idea.
As you can see over here, we can see different inspiration, PM syncs, design system, visual assets, development, icons, accessibility, web, mobile, and wireframes. This is where the community of people who use Figma could help each other with their different ideas so that each and every one of us can create our own unique website.
So what I'm going to do right now is I'm going to scroll down and we're going to look for a website that we can borrow for the meantime, just to show you how we can transfer Figma to our WordPress. And I'm going to choose one. And I'm going to choose this option over here. This is made by Mario, as you can see over here. It's a Wise Rebrand, a launch of a new design system. We could also see the tags. It's a banking app, a banking UI, fintech app, Wise, and light. You could also see the version history. You can also see designs that are similar to this one. So what I'm going to do is I'm going to click on 'copy' on the top right, and then we will be sent back to the editing page that we are at earlier, over here. This is where, as you can see when you hover over the different things, this is where you would be able to edit your web page.
Installing the Figma to WordPress Plugin
Now the next thing we're going to do after choosing a design is we're going to go over here on the top left, and then we're going to click our main menu. We're going to select plugins over here, and then as you can see, I already have the plugin 'Figma to WordPress'. But to have this, we're simply going to click on 'Find more plugins', and then we're going to search 'Figma to WordPress'.
And then after that, you will be able to find the specific plugin over here, under the 'From Community' section. And what I'm going to do is I'm going to click on 'Run'. And now over here, we are seeing this pop-up over here which is the Figma to WordPress. It is created by Yotako. And what we're going to do now is we're going to click on 'Start'. Now if you want to see examples, you can click on 'Get examples', but what we're going to do right now is we're going to click on 'Start now'.
Using the Plugin to Export Your Design
And step one is we're going to choose a frame as a main page. I'm going to click this and then we're going to click this option over here which is a file cover. Then we could add a screen size if we want. We could change the folder that we are going to set as a homepage. We could also add another page by clicking this. For now, since this is the only page created by this creator, we're just going to go with this file cover, which is the name of this entire thing. And we're going to click on continue.
The next step is we can choose the viewport. It is either for desktop, tablet, or mobile. We could select the WordPress elements such as the header, the footer, the post blocks, the forms, and we're going to click on 'Continue'.
It's going to warn us that we won't be able to select the following elements inside our WordPress dashboard, which means that we won't be able to edit the specific parts of this design, because some of this are not available for WordPress. So if you want to change things up, if you want to edit, make sure you finalize your design in Figma before you transfer it to WordPress. So I'm going to click on 'Continue without selecting'.
And over here we could see that the number of pages we have selected is one, which is this one over here at the background. We could also see the elements that we have selected. As you can see, we have none for now. If you want to go back to step 2 or step 1, you can simply click over here or on the top over here. And after doing this, I'm simply going to click on 'Continue'.
Processing the Conversion and Previewing
And then you're going to need to enter the email of your WordPress account. Make sure that it is the same, because this plugin will send the information from Figma to your WordPress account. And the next step is we're going to wait for Yotako to finish creating our website. As you can see here, there's a series of steps that it's going to need to do, and it will do it for us, so that we no longer need to do a lot of things like complicated coding or any of that. So we're just simply going to wait for it to finish and I'll get back to you when it's done.
And as you can see right now, Yotako is finished creating our website. So we're going to click on 'Preview'. And this is the preview of our design.
Finalizing in WordPress
Now the next thing we're going to do is we're going to click this button on the top right, and this will redirect us to our WordPress dashboard. And right now we are currently at the dashboard of WordPress. And what we're going to do is we're going to look over here on the left side, and then we're going to click on 'Pages', and then select on 'All Pages'.
And as you can see over here, these are the different pages that we have. This is our Figma file over here. Although, if you check on the date, it's going to be a different date from your actual date because the different time zone of the server is going to reflect over here. So what we're simply going to do is we're going to click on 'View'.
And just like that, we can view our website that we have taken from Figma under our WordPress account. And that's it guys. Hope you enjoyed the video. Thanks for watching.
