Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
How to convert a Figma design to WordPress website?
- Thread starter hgsinfotech
- Start date
- Sort by reaction score
This is going to depend massively on the nature of the design that someone has created. There isn't really a quick and easy way to do this sort of thing, you're going to need to manually build the wordpress site out to match it.
My recommendation is to find a good theme that is stylistically similar in terms of page structure (pay attention to things like the header, footer, navigation, etc, and find something that is fairly flexible and generally structured similarly to what's on Figma). Then manually make modifications to start making it match more. (You're not going to find a theme that matches exactly, the goal is to find a theme that is similar in terms of page structure so that it cuts down on the amount of work you need to do.)
For the pages, you're probably going to want to use something like Beaver Builder (or another similar page builder) to build out the individual pages. This will make it far easier than the built in editor, especially if there is a lot of detail in the pages you'll be building. I like Beaver Builder personally, but that's partly just because I'm more familiar with how to use it. There are plenty of good options that are ridiculously flexible in terms of what they allow you to do.
That's generally the way I've approached wordpress sites for clients I've done things for. There might be folks who have better suggestions than I do here, I'm someone who does this more as a side gig more than as a full time thing.
My recommendation is to find a good theme that is stylistically similar in terms of page structure (pay attention to things like the header, footer, navigation, etc, and find something that is fairly flexible and generally structured similarly to what's on Figma). Then manually make modifications to start making it match more. (You're not going to find a theme that matches exactly, the goal is to find a theme that is similar in terms of page structure so that it cuts down on the amount of work you need to do.)
For the pages, you're probably going to want to use something like Beaver Builder (or another similar page builder) to build out the individual pages. This will make it far easier than the built in editor, especially if there is a lot of detail in the pages you'll be building. I like Beaver Builder personally, but that's partly just because I'm more familiar with how to use it. There are plenty of good options that are ridiculously flexible in terms of what they allow you to do.
That's generally the way I've approached wordpress sites for clients I've done things for. There might be folks who have better suggestions than I do here, I'm someone who does this more as a side gig more than as a full time thing.
I agree with @ArkSingularity: it depends on the context and design.
It is possible to convert a Figma design directly to html with tools such as the Framer or Anima plugins for Figma or other plugins such as the free Figma to Code plugin (look on the plugins page for all of these).
But it will not automagically turn it in a good working responsive version and still has to be converted to a WordPress theme.
The generated html could in theory be imported into Pinegrow (a visual web editor) and converted manually to a working WordPress theme with its WordPress components plugin. All of this still requires skill and knowledge, even though most could be achieved with its visual tools. If you have no experience with how a WordPress theme actually works within the WP framework (or worse: you have little to no html/css skills), then the language spoken by Pinegrow's visual tools are not going to be of much help to you.
As explained by @ArkSingularity an alternative approach is to find a theme (a blank functional beginner's theme) and build your design step by step using a visual page builder in WordPress. The new visual page builder tools in WordPress may well suffice nowadays and it is often no longer necessary to rely on a visual page builder plugin (Elementor, SiteOrigin, BeaverBuilder, etc.). But you do still need good knowledge how WordPress themes actually work in theory and good basic knowledge of CSS and HTML.
I've seen abysmal client WP sites created by novices who had no clue how to properly set up a WP theme, and those sites were an absolute mess.
The short of it: no simple "instant gratification" method or process exists.
It is possible to convert a Figma design directly to html with tools such as the Framer or Anima plugins for Figma or other plugins such as the free Figma to Code plugin (look on the plugins page for all of these).
But it will not automagically turn it in a good working responsive version and still has to be converted to a WordPress theme.
The generated html could in theory be imported into Pinegrow (a visual web editor) and converted manually to a working WordPress theme with its WordPress components plugin. All of this still requires skill and knowledge, even though most could be achieved with its visual tools. If you have no experience with how a WordPress theme actually works within the WP framework (or worse: you have little to no html/css skills), then the language spoken by Pinegrow's visual tools are not going to be of much help to you.
As explained by @ArkSingularity an alternative approach is to find a theme (a blank functional beginner's theme) and build your design step by step using a visual page builder in WordPress. The new visual page builder tools in WordPress may well suffice nowadays and it is often no longer necessary to rely on a visual page builder plugin (Elementor, SiteOrigin, BeaverBuilder, etc.). But you do still need good knowledge how WordPress themes actually work in theory and good basic knowledge of CSS and HTML.
I've seen abysmal client WP sites created by novices who had no clue how to properly set up a WP theme, and those sites were an absolute mess.
The short of it: no simple "instant gratification" method or process exists.