11 ms·

Show HN: Makers.so – A website builder inside Figma

180 points by johndamaia 5y ago

Founder here. Makers.so is a Figma Plugin to build and publish sites without ever leaving Figma. Here’s a demo [0]. As a front-end developer I constantly go from Figma to code / site, but it’s tedious… I decided to automate the process with this plugin. It works great for simple projects like: - Landing Pages - Portfolio / Personal sites - Resume sites - Careers / Wiki sites So, not a Webflow / Framer competitor (yet). Webflow and Framer are amazing tools, but if you are in the Figma ecosystem, it's boring to duplicate your work on a different tool. I'm trying to make life easier for Figma users. If this seems interesting, you can install it here [1] and give it a try. — For a bit of context, I'm a solo-founder and I started Makers after sharing my idea on the Figma subreddit about how awesome it would be to have a button in Figma to publish my designs. A good amount of people seemed to agree, and that was enough to start working on it. This is turning out to be a super fun project, and I’ve been working full-time for the last two months. [0] - https://twitter.com/joaodmj/status/1488216877511884805?s=20 https://twitter.com/joaodmj/status/1488216877511884805?s=20 [1] - https://www.figma.com/community/plugin/991438050654881175 https://www.figma.com/community/plugin/991438050654881175

csmeder 5y ago
I tried this Figma plug-in a couple weeks ago. It is quite magical! What previously took me hours in Webflow, now only takes 30s (+ the extra 10-20 mins to format things correctly in Figma). I’m looking forward to using this next time I make a portfolio. The feature set still has some gaps but I’m quite impressed for how far it’s come in a few months.
- johndamaia 5y ago
  Thanks so much for the kind words. Yeah, it's still a super early version and the goal is to improve with as much feedback as possible from the users.
mdrzn 5y ago
Seems interesting. I've always seen Figma as an Illustrator alternative, but being able to instantly turn a sketch into a website makes it so much more. This is like having a button to turn a PSD mockup into a website, very cool! Loved the demo, will definitely give it a try in the next days.
- johndamaia 5y ago
  Wow, thanks so much for the support. I'm happy to answer any questions to help get started. Just let me know :)
t2hv33 5y ago
Good, I will bookmark it
- johndamaia 5y ago
  Thanks. Let me know if you need anything to help you get started.
roldie 5y ago
This demo is really impressive! I'm a ux designer and keeping my portfolio up to date is so tedious. For better or worse, I do a lot of "thinking" in Figma these days, so this would shorten my workflow considerably. I currently use Squarespace (and previously rolled own code because I felt like I needed to prove I could) and even though it's about as easy as a WYSIWYG could be, I still find it a chore to use and struggle to get things just how I want. All that to say, this is really exciting, and good luck!
- johndamaia 5y ago
  Thanks so much! You have no idea how happy your comment made me feel. After so many hours of endless coding, this is a breath of fresh air :) Also, you are actually my ideal customer: a Figma user who wants to have an easy and fast way of managing his / her portfolio or personal site. I'm more than happy to answer any questions and keep this conversation going.
- josefrichter 5y ago
  I have my portfolio on Squarespace as well. Once you start tweaking the template, you hit walls real quick. For most use cases it's not a problem, but for us designers unpolished details harm our reputation. Another thing I find annoying is paying $16/mo for a site that I update maybe twice a year. It's a famous problems for all designers we literally spend FIVE YEARS building new portfolio, because we want it "perfect", while the current one is terribly outdated and we hate since week 2 from launch :-) Makers.so could be an answer, it reminds me of Framer Sites which has similar value proposition.
  - johndamaia 5y ago
    This! This is exactly why I built makers.so. Framer is an amazing tool. But if you are in the Figma ecosystem, it's boring to duplicate your work on a different tool. Same for Webflow. I'm trying to make life easier for Figma users. Happy to help you get started with makers. Anything you need, just let me know :)
    - 5y ago
detritus 5y ago
This is the nudge I've needed to look into Figma, so thanks! :) (I'm an ex-webnik who always coded by hand and I've fallen behind a bit where responsive layouts are concerned, so Figma's always looked partially-interesting to me... up until the point it apparently falls short).
- johndamaia 5y ago
  Wow, thanks for sharing. It's great to know I'm actually making Figma more powerful. Please feel free to reach out, I'm happy to help you get started :)
tomhallett 5y ago
I know you try to couch this for "simple" projects, but if done correctly I believe that something like this can be useable for complex applications as well. From a super high level, we have "structure" and "components". Using anything computer generated for application structure is risky and a bad idea. BUT, for components, I believe there are certain contexts where a "react component" which is autogenerated, by makers.so for example, might work. While I acknowledge some components are foundational and need to be flexible, robust, interactive, configurable, and clean, there are some which don't. There are some components which level in "application space" which are one-offs, experimental, and somewhat rigid in their usage. For these types of components, as long as the computer generated html/css is encapsulated into the component, it might not matter what the implementation details are. If you just need to set it and forget it, you can save time by using a "Makers.so figma group => react component" process. Later on, if you do need that component to be "productized", then upgrade it to handwritten html/css later. Notes: * I built a proof of concept single page application with this approach (Sketch + www.animaapp.com) and it looked promising. Most of the wrinkles in that workflow are being solved at the figma level with variants and "flexbox" support. * Unless you use more advanced css approaches/sandboxing, you need to make sure the css boundary between your application and the autogenerated components aren't in conflict. This might mean that makers.so baseline css assumptions (reset, whitespace, etc) might drive the baseline css for your application. Which is a bit of the tail wagging the dog. Hence, the high level of experimentation with this approach. * And yes, I have been around long enough to have "created applications using Microsoft FrontPage" and done a "Photoshop export to HTML" to be very disappointed with the results. :)
- johndamaia 5y ago
  Such great feedback, Tom. Thank you for taking the time. I'm definitely going to distill all your notes and thoughts on this. It's funny you mentioned Microsoft FrontPage. Alexis Ohanian [0] also made the same comment :) [0] https://twitter.com/alexisohanian/status/1448288261172989960?s=20 https://twitter.com/alexisohanian/status/1448288261172989960...
  - tomhallett 5y ago
chrisfrantz 5y ago
This is great. How do you handle updates? How are menus and links handled? Do you allow exporting of code if users wanted to migrate away or self-host? Thanks and congrats, this is a slick implementation.
- johndamaia 5y ago
  > How do you handle updates? You change directly in Figma and click "Update Site" when you are ready. > How are menus handled? Modals and dropdowns aren't supported yet. Only the navigation bar pre-built component has a default dropdown for the links. I'm working on this feature already, and I'm thinking of using the Prototype features from Figma that already allow you to control menus. > How are links handled? Directly in the Plugin. You can link to different pages or first child sections > Do you allow exporting of code Not yet, but I have to add this soon. I'm having a lot of requests for this. Thank you! Happy to answer more questions.
  - chrisfrantz 5y ago
    Awesome, best of luck.
afsardo 5y ago
This is great for fast prototyping saves so much time! And done right has the potential to grow to much more for sure ^^
- johndamaia 5y ago
  Thanks so much! Hopefully, this will give Figma designers superpowers :)
freediver 5y ago
https://github.com/gorhill/uBlock/wiki/uBlock-Origin-works-best-on-Firefox https://github.com/gorhill/uBlock/wiki/uBlock-Origin-works-b... It would be good to have a way to reproduce these results on modern versions of browsers.
- ffpip 5y ago
  Did you mean to reply to a comment here - https://news.ycombinator.com/item?id=30287172 https://news.ycombinator.com/item?id=30287172 ?
  - freediver 5y ago
    Oops, left this tab open and mind wandered :)
ddubski 5y ago
This seems awesome. Just this morning I discussed 2-3 projects at work where we’d want to do something like this to save engineering time, without even knowing this existed. :)
- johndamaia 5y ago
  Wow, that's incredible to hear. I'm happy to help you get started. Let me know how can I help make those projects come to live :)
skilled 5y ago
This looks interesting. Can the designs be exported or are they locked-in to your platform? I looked at some of the demo pages on your website and they all seem to pull website content only through JavaScript. In fact, I didn't see anything inside <body> tags at all. But maybe I am looking at it wrong?
- johndamaia 5y ago
  > Can the designs be exported or are they locked-in to your platform? The designs live inside of Figma. The code is not exportable at the moment. But I'll definitely have to prioritize that. > But maybe I am looking at it wrong? Interesting feedback. I'm building the site with Vue, that's why the content is through JS. This is clearly one of the features I need to improve. Thanks for your feedback.
sockpuppet69 5y ago
paul7986 5y ago
Why don't more UX Designer know how to code mock ups (html/css/jQuery or Javascript) if their focus is building web apps?
- davidivadavid 5y ago
  Why don't more developers know how to design stuff if their focus is building web apps?
higgsbozo 5y ago
Wow, looks awesome. This is certainly something that is needed.
- johndamaia 5y ago
  Thanks! Happy to answer any questions to help you get started.
CitrusFruits 5y ago
Noticed something that could be reworded: "Use dozens of pre-built components fully responsive." would probably read better as "Use dozens of fully responsive pre-built components." That aside, this looks like a super fun idea and I'm curious to see how it develops.
- johndamaia 5y ago
  DONE. It's fixed :) Thank you so much, great feedback.
RadixDLT 5y ago
I am switching from adobeXD to figma / sketch
aemadrid 5y ago
looks like the site is down - HN can be a DOS nightmare...
Graffur 5y ago
How does it work technically? I would like to see the output code example.
- johndamaia 5y ago
  Here's an example: https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/ https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/ The output code isn't suitable for sharing / exporting yet.
app4soft 5y ago
Cany You explain how does "free forever" works according your pricing?[0] > $12/month per site. > Free forever for makers.so domains And how does "free forever" site example looks like? Any example of "free forever" site already? [0] https://makers.so/pricing https://makers.so/pricing
- johndamaia 5y ago
  Yes, great question. Free forever means your site with live on a makers.so domain like "https://makers.so/s/{random_string} https://makers.so/s/{random_string}". Here's an example: https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/ https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/ $12/month is for publishing to a custom domain.
youssefabdelm 5y ago
Someone needs to integrate AI into these Figma/Sketch conversion tools so it just makes a phone version of the site or takes care of the responsive end of things... it's really a hassle to deal with that stuff.

180 points by johndamaia 5y ago

csmeder 5y ago

I tried this Figma plug-in a couple weeks ago. It is quite magical! What previously took me hours in Webflow, now only takes 30s (+ the extra 10-20 mins to format things correctly in Figma). I’m looking forward to using this next time I make a portfolio. The feature set still has some gaps but I’m quite impressed for how far it’s come in a few months.

johndamaia 5y ago
Thanks so much for the kind words. Yeah, it's still a super early version and the goal is to improve with as much feedback as possible from the users.

mdrzn 5y ago

Seems interesting. I've always seen Figma as an Illustrator alternative, but being able to instantly turn a sketch into a website makes it so much more. This is like having a button to turn a PSD mockup into a website, very cool! Loved the demo, will definitely give it a try in the next days.

johndamaia 5y ago
Wow, thanks so much for the support. I'm happy to answer any questions to help get started. Just let me know :)

t2hv33 5y ago

Good, I will bookmark it

johndamaia 5y ago
Thanks. Let me know if you need anything to help you get started.

roldie 5y ago

This demo is really impressive! I'm a ux designer and keeping my portfolio up to date is so tedious. For better or worse, I do a lot of "thinking" in Figma these days, so this would shorten my workflow considerably. I currently use Squarespace (and previously rolled own code because I felt like I needed to prove I could) and even though it's about as easy as a WYSIWYG could be, I still find it a chore to use and struggle to get things just how I want. All that to say, this is really exciting, and good luck!

johndamaia 5y ago
Thanks so much! You have no idea how happy your comment made me feel. After so many hours of endless coding, this is a breath of fresh air :) Also, you are actually my ideal customer: a Figma user who wants to have an easy and fast way of managing his / her portfolio or personal site. I'm more than happy to answer any questions and keep this conversation going.
josefrichter 5y ago
I have my portfolio on Squarespace as well. Once you start tweaking the template, you hit walls real quick. For most use cases it's not a problem, but for us designers unpolished details harm our reputation. Another thing I find annoying is paying $16/mo for a site that I update maybe twice a year. It's a famous problems for all designers we literally spend FIVE YEARS building new portfolio, because we want it "perfect", while the current one is terribly outdated and we hate since week 2 from launch :-) Makers.so could be an answer, it reminds me of Framer Sites which has similar value proposition.
- johndamaia 5y ago
  This! This is exactly why I built makers.so. Framer is an amazing tool. But if you are in the Figma ecosystem, it's boring to duplicate your work on a different tool. Same for Webflow. I'm trying to make life easier for Figma users. Happy to help you get started with makers. Anything you need, just let me know :)
  - 5y ago

detritus 5y ago

This is the nudge I've needed to look into Figma, so thanks! :) (I'm an ex-webnik who always coded by hand and I've fallen behind a bit where responsive layouts are concerned, so Figma's always looked partially-interesting to me... up until the point it apparently falls short).

johndamaia 5y ago
Wow, thanks for sharing. It's great to know I'm actually making Figma more powerful. Please feel free to reach out, I'm happy to help you get started :)

tomhallett 5y ago

I know you try to couch this for "simple" projects, but if done correctly I believe that something like this can be useable for complex applications as well. From a super high level, we have "structure" and "components". Using anything computer generated for application structure is risky and a bad idea. BUT, for components, I believe there are certain contexts where a "react component" which is autogenerated, by makers.so for example, might work. While I acknowledge some components are foundational and need to be flexible, robust, interactive, configurable, and clean, there are some which don't. There are some components which level in "application space" which are one-offs, experimental, and somewhat rigid in their usage. For these types of components, as long as the computer generated html/css is encapsulated into the component, it might not matter what the implementation details are. If you just need to set it and forget it, you can save time by using a "Makers.so figma group => react component" process. Later on, if you do need that component to be "productized", then upgrade it to handwritten html/css later. Notes: * I built a proof of concept single page application with this approach (Sketch + www.animaapp.com) and it looked promising. Most of the wrinkles in that workflow are being solved at the figma level with variants and "flexbox" support. * Unless you use more advanced css approaches/sandboxing, you need to make sure the css boundary between your application and the autogenerated components aren't in conflict. This might mean that makers.so baseline css assumptions (reset, whitespace, etc) might drive the baseline css for your application. Which is a bit of the tail wagging the dog. Hence, the high level of experimentation with this approach. * And yes, I have been around long enough to have "created applications using Microsoft FrontPage" and done a "Photoshop export to HTML" to be very disappointed with the results. :)

johndamaia 5y ago
Such great feedback, Tom. Thank you for taking the time. I'm definitely going to distill all your notes and thoughts on this. It's funny you mentioned Microsoft FrontPage. Alexis Ohanian [0] also made the same comment :) [0] https://twitter.com/alexisohanian/status/1448288261172989960?s=20 https://twitter.com/alexisohanian/status/1448288261172989960...
- tomhallett 5y ago

chrisfrantz 5y ago

This is great. How do you handle updates? How are menus and links handled? Do you allow exporting of code if users wanted to migrate away or self-host? Thanks and congrats, this is a slick implementation.

johndamaia 5y ago
> How do you handle updates? You change directly in Figma and click "Update Site" when you are ready. > How are menus handled? Modals and dropdowns aren't supported yet. Only the navigation bar pre-built component has a default dropdown for the links. I'm working on this feature already, and I'm thinking of using the Prototype features from Figma that already allow you to control menus. > How are links handled? Directly in the Plugin. You can link to different pages or first child sections > Do you allow exporting of code Not yet, but I have to add this soon. I'm having a lot of requests for this. Thank you! Happy to answer more questions.
- chrisfrantz 5y ago
  Awesome, best of luck.

afsardo 5y ago

This is great for fast prototyping saves so much time! And done right has the potential to grow to much more for sure ^^

johndamaia 5y ago
Thanks so much! Hopefully, this will give Figma designers superpowers :)

freediver 5y ago

https://github.com/gorhill/uBlock/wiki/uBlock-Origin-works-best-on-Firefox https://github.com/gorhill/uBlock/wiki/uBlock-Origin-works-b... It would be good to have a way to reproduce these results on modern versions of browsers.

ffpip 5y ago
Did you mean to reply to a comment here - https://news.ycombinator.com/item?id=30287172 https://news.ycombinator.com/item?id=30287172 ?
- freediver 5y ago
  Oops, left this tab open and mind wandered :)

ddubski 5y ago

This seems awesome. Just this morning I discussed 2-3 projects at work where we’d want to do something like this to save engineering time, without even knowing this existed. :)

johndamaia 5y ago
Wow, that's incredible to hear. I'm happy to help you get started. Let me know how can I help make those projects come to live :)

skilled 5y ago

This looks interesting. Can the designs be exported or are they locked-in to your platform? I looked at some of the demo pages on your website and they all seem to pull website content only through JavaScript. In fact, I didn't see anything inside <body> tags at all. But maybe I am looking at it wrong?

johndamaia 5y ago
> Can the designs be exported or are they locked-in to your platform? The designs live inside of Figma. The code is not exportable at the moment. But I'll definitely have to prioritize that. > But maybe I am looking at it wrong? Interesting feedback. I'm building the site with Vue, that's why the content is through JS. This is clearly one of the features I need to improve. Thanks for your feedback.

sockpuppet69 5y ago

paul7986 5y ago

Why don't more UX Designer know how to code mock ups (html/css/jQuery or Javascript) if their focus is building web apps?

davidivadavid 5y ago
Why don't more developers know how to design stuff if their focus is building web apps?

higgsbozo 5y ago

Wow, looks awesome. This is certainly something that is needed.

johndamaia 5y ago
Thanks! Happy to answer any questions to help you get started.

CitrusFruits 5y ago

Noticed something that could be reworded: "Use dozens of pre-built components fully responsive." would probably read better as "Use dozens of fully responsive pre-built components." That aside, this looks like a super fun idea and I'm curious to see how it develops.

johndamaia 5y ago
DONE. It's fixed :) Thank you so much, great feedback.

RadixDLT 5y ago

I am switching from adobeXD to figma / sketch

aemadrid 5y ago

looks like the site is down - HN can be a DOS nightmare...

Graffur 5y ago

How does it work technically? I would like to see the output code example.

johndamaia 5y ago
Here's an example: https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/ https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/ The output code isn't suitable for sharing / exporting yet.

app4soft 5y ago

Cany You explain how does "free forever" works according your pricing?[0] > $12/month per site. > Free forever for makers.so domains And how does "free forever" site example looks like? Any example of "free forever" site already? [0] https://makers.so/pricing https://makers.so/pricing

johndamaia 5y ago
Yes, great question. Free forever means your site with live on a makers.so domain like "https://makers.so/s/{random_string} https://makers.so/s/{random_string}". Here's an example: https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/ https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/ $12/month is for publishing to a custom domain.

youssefabdelm 5y ago

Someone needs to integrate AI into these Figma/Sketch conversion tools so it just makes a phone version of the site or takes care of the responsive end of things... it's really a hassle to deal with that stuff.