How to convert Figma Theme to WordPress Theme?

kevin2k21

Member

May 7, 2022

68

14

8

London

• Jun 23, 2022

• #1

First of Thanks Babiato for all the Resources and helps it provides.)

Now, as title says How to Convert Figma Theme to WordPress Theme? I've watched lots of videos on YouTube but the thing is I'm a complete newbie who doesn't even know what's that or this. Of course there's services that provide these things but! I already spent a lot for the design and theme, so is there any way to do this without coding shenanigans? Or someone is nice enough to show me how to do it step by step although I don't think I can do it

Any suggestions would mean a lot to me!

 

blackhole

Active member

Nov 17, 2020

281

117

43

• Jun 23, 2022

• #2

first you have to understand HTML and css, because usually after the design it must be changed to HTML and css so you have to learn that first

 

• 

Reactions: kevin2k21

Supipinn

Member

May 5, 2022

30

11

8

• Jun 23, 2022

• #3

blackhole said:

first, you have to understand HTML and CSS because usually after the design it must be changed to HTML and CSS so you have to learn that first

Click to expand...

Is this only applied to HTML and CSS, or other programming too?

Currently, I'm studying Figma right now.

 

blackhole

Active member

Nov 17, 2020

281

117

43

• Jun 23, 2022

• #4

Supipinn said:

Is this only applied to HTML and CSS, or other programming too?

Currently, I'm studying Figma right now.

Click to expand...

Yes, that's all, to be functional, of course you need something else

 

kevin2k21

Member

May 7, 2022

68

14

8

London

• Jun 23, 2022

• #5

blackhole said:

first you have to understand HTML and css, because usually after the design it must be changed to HTML and css so you have to learn that first

Click to expand...

So in short I've to hire some freelancer.

 

kevin2k21

Member

May 7, 2022

68

14

8

London

• Jun 23, 2022

• #6

Just checked and oh boy. I've 10 pages in total and it costs $500~1000 which is just absurd, if I had that kind of money, I didn't asked here what to do.

 

OSOS

Member

Babiato Lover

Trusted Uploader

Jan 23, 2019

30

37

18

• Jun 23, 2022

• #7

kevin2k21 said:

Just checked and oh boy. I've 10 pages in total and it costs $500~1000 which is just absurd, if I had that kind of money, I didn't asked here what to do.

Click to expand...

Nothing you can do actually, except learn to do it yourself. And it took you long enough to convert a figma to wordpress theme.
If you dont have absolutely anything about html and css, forget it, hire a dev.
If you have some basic, try to download elementor - your best guest since they support a lot of drag and drop thing.
And no, no body gonna able to show you step by step. Even if they do, they charge for money.
And cost will be more expensive than hire a dev.

My best advice, when asking for some dev to help with your theme, tell them directly your max budget. So may lucky enough to get someone to do for that price, or if no one does, you will know that your offer is way too cheap.

If you are a chef, you wouldnt cook for someone for free, same apply for car repairer and web dev.

If you dont have money, and want it free, LEARN.

 

• 

Reactions: harryexplore

kevin2k21

Member

May 7, 2022

68

14

8

London

• Jun 23, 2022

• #8

OSOS said:

Nothing you can do actually, except learn to do it yourself. And it took you long enough to convert a figma to wordpress theme.
If you dont have absolutely anything about html and css, forget it, hire a dev.
If you have some basic, try to download elementor - your best guest since they support a lot of drag and drop thing.
And no, no body gonna able to show you step by step. Even if they do, they charge for money.
And cost will be more expensive than hire a dev.

My best advice, when asking for some dev to help with your theme, tell them directly your max budget. So may lucky enough to get someone to do for that price, or if no one does, you will know that your offer is way too cheap.

If you are a chef, you wouldnt cook for someone for free, same apply for car repairer and web dev.

If you dont have money, and want it free, LEARN.

Click to expand...

Chill mate I'm not asking for free. That step by step was meant to where I should start and I got my answer HTML and CSS. You don't have to be passive aggressive about it. I'll just wait till my paycheck and see if someone from Babiato has something to offer and I'll hire them.

 

R

Rafnor

Member

May 13, 2022

41

20

8

• Jun 23, 2022

• #9

Easiest way will be making it from scratch with elementor or oxygen builder

 

• 

Reactions: andrejmb

blackhole

Active member

Nov 17, 2020

281

117

43

• Jun 23, 2022

• #10

kevin2k21 said:

Chill mate I'm not asking for free. That step by step was meant to where I should start and I got my answer HTML and CSS. You don't have to be passive aggressive about it. I'll just wait till my paycheck and see if someone from Babiato has something to offer and I'll hire them.

Click to expand...

Basically it's not easy, if you want to learn from the beginning of course it will take time.

These prices do not include the backend, and it will be even more expensive.
The stages are indeed, design, front end back end.


If you need something that might cost less than that try contacting me, maybe I can give you $50 per page to convert HTML and CSS

 

kevin2k21

Member

May 7, 2022

68

14

8

London

• Jun 23, 2022

• #11

blackhole said:

Basically it's not easy, if you want to learn from the beginning of course it will take time.

These prices do not include the backend, and it will be even more expensive.
The stages are indeed, design, front end back end.


If you need something that might cost less than that try contacting me, maybe I can give you $50 per page to convert HTML and CSS

Click to expand...

I'll definitely contact you, once I get my paycheck and figure my budget)

 

crish_86

Member

Jul 26, 2020

50

10

8

• Jun 23, 2022

• #12

You can convert v easily.

 

• 

Reactions: andrejmb

kevin2k21

Member

May 7, 2022

68

14

8

London

• Jun 23, 2022

• #13

crish_86 said:

You can convert v easily.

Click to expand...

How?

 

Groot

Well-known member

Jun 17, 2020

412

415

63

• Jun 23, 2022

• #14

Today, convert Figma or any other templates to WordPress, you just need learn how to design full site with Elementor, + a little bit CSS copy/paste skill if you want to get more perfect pixel.
But, there no easy way for newbies, you need time to learn many skills before take care that kind of work.

 

• 

Reactions: andrejmb and Supipinn

D

dreiday

New member

May 24, 2022

15

4

3

• Jun 26, 2022

• #15

kevin2k21 said:

Chill mate I'm not asking for free. That step by step was meant to where I should start and I got my answer HTML and CSS. You don't have to be passive aggressive about it. I'll just wait till my paycheck and see if someone from Babiato has something to offer and I'll hire them.

Click to expand...

Can do Figma to Bricks or Oxygen

 

• 

Reactions: andrejmb

daltonc

New member

Jun 9, 2018

5

0

1

• Jun 26, 2022

• #16

Can help you to convert from figma too wordpress for a reasonable cost lower than the devs asking. PM me if need help.

 

Zia Rahim

Member

Jan 12, 2021

48

19

8

• Sep 10, 2022

• #17

kevin2k21 said:

First of Thanks Babiato for all the Resources and helps it provides.)

Now, as title says How to Convert Figma Theme to WordPress Theme? I've watched lots of videos on YouTube but the thing is I'm a complete newbie who doesn't even know what's that or this. Of course there's services that provide these things but! I already spent a lot for the design and theme, so is there any way to do this without coding shenanigans? Or someone is nice enough to show me how to do it step by step although I don't think I can do it

Any suggestions would mean a lot to me!

Click to expand...

hey dude, i understand your problume, I am wordpress devloper have 8+ exp,
you just need plugin name Elementor builder and how to make website using elementor + figma
watch video in youtube channel called https://www.youtube.com/c/LivingWithPixels

"

 

B

badmarsh

New member

Jun 28, 2022

8

1

3

• Oct 8, 2022

• #18

I would suggest learning Elementor WP plugin but you can also try check pxcode plugin for figma.

 

• 

Reactions: andrejmb

B

Babf

New member

Sep 15, 2022

15

11

3

• Oct 8, 2022

• #19

Not perfect, try this plugin:

Locofy.ai - ship your products 5-10x faster — with low code

Turn your designs into production-ready frontend code for mobile apps and web. Ship products 5-10x faster with your existing design tools, tech stacks & workflows.

www.locofy.ai

 

B

Babf

New member

Sep 15, 2022

15

11

3

• Oct 8, 2022

• #20

Or this plugin:

Overlay | Design production ready code components

Forget about absolute positions and hundreds of HTML/CSS lines, just get clean code.

overlay-tech.com