loading...
Cover image for Gatsby + Figma + Netlify = Free Landing Page
Euphorya

Gatsby + Figma + Netlify = Free Landing Page

fajarsiddiq profile image Fajar Siddiq Updated on ・1 min read

So i've been using figma.com for 2 years and i enjoy designing it. I learn how to make a simple landing page design. One of my maker friend @mddanishyusuf (founder of nocodeapi.com) help me out in the coding for gatsbyjs.com and open source the code.

A year ago i made a no-code game called "supermakers" and got #4 product of the day on producthunt.com I enjoy making the no-code game and share it with the community. I use withkoji.com to make the game. Bought a domain on namecheap.com and also deploy the website on netlify.com and upload my repo on github.com

You can download this landing page template for free.
What's included? - Gatsby Source code & Figma Design File

✅ Official Website: www.supermakers.xyz

🎮 Github Open Source Code: https://github.com/fajarsiddiqfs/SuperMakers

🏝️ Figma File Design: https://www.figma.com/community/file/796832352118720161/Supermakers-2.0-Gatsby-Landing-Page

💯 Fajar Siddiq Community: https://fajarsiddiq.substack.com/p/gatsby-figma-netlify-free-landing

Posted on by:

fajarsiddiq profile

Fajar Siddiq

@fajarsiddiq

👨🏻‍💻 Serial Entrepreneur + Indie-Maker + Influencer + Producer + Professional Yo-Yo Player + Digital Nomad + Designer & Developer ⚡🚀🛠️

Euphorya

Creative Design Agency based in Singapore

Discussion

pic
Editor guide
 

On this topic, I would like to ask if figma can reliably convert design into html now? I know there are plugins but they always seems to have issues.

 

I spent time about 2 years trying that out, searching best plugins and also there is some productized services are doing it so you have to hire. But nothing yet so far i came across that could convert design to html easily. Is still messy and some is the other way round too.

tools/plugins:
animaapp.com/figma
figma.pizza/
avocode.com/
audacitus.com/figpress
figma-html.netlify.app/
figma.com/community/plugin/7479851...
figma.com/community/plugin/7531958...

Productized services:
ui2html.net/services/figma-to-html...
nextbigtechnology.com/figma-to-html/
xhtmlchop.com/figma-to-html.html
mockuptocode.com/
imado.co/figma-to-html
xfive.co/service/figma-to-html/
fiverr.com/gigs/figma-to-html
reliablepsd.com/figma-to-html-and-wp/