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
🎮 Source Code: https://www.buymeacoffee.com/fajarsiddiq/e/51330
🏝️ 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
Top comments (4)
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.
There are a bunch of plugins that you can use for this but most of the plugins create very poor quality and bloated code. So it's always good to use some Figma conversion service provider to do it who can convert designs by hand coding.
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...
figma.com/community/plugin/9469622...
figma.com/community/plugin/8453676...
figma.com/community/plugin/8964450...
figma.com/community/plugin/8938060...
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/
There are not that many tools and apps that reliably export figma to html/css and mostly because they export elements positioned absolutely, which is not so helpful when it comes to responsiveness.
You can try Desech Studio which will import your figma design file and create html elements with proper nesting and positioned with css grids. You still need to adjust margins after that, but a lot of the code is taken care of.
Have a look at this quick youtube tutorial