Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Makers.so – A website builder inside Figma
180 points by johnthemaker on Feb 10, 2022 | hide | past | favorite | 45 comments
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

[1] - https://www.figma.com/community/plugin/991438050654881175




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!


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.


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 :)


I meant Framer Sites - their new product, currently in (private?) beta. It’s exactly the same as your product. But of course Figma has much bigger user base and it’s good there’s something directly in Figma.


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.


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. :)


> but if done correctly I believe that something like this can be useable for complex applications as well

I think this is one of the most fascinating "problems" in IT. There have been THOUSANDS of attempts to auto-convert design to code and it never works. It's been tried for at least 30 years now and still nobody solved this problem.. This leads me to believe we are solving the wrong problem.

I actually believe Flash was the closest thing to this holy grail. Except it was acquired by greedy Adobe that failed to evolve the product.

I am far from having a solution, I was just thinking that WASM is actually similar to Flash. What I mean is this: whole Figma can run in browser thanks to WASM. It has all the tools to visually create responsive websites in it. You can share Figma file as view-only. If I go to extreme, why not have Figma file in read-only mode on custom URL? No translation to HTML, just expose the Figma engine directly. (bandwidth and SEO problems are not impossible to solve)

At the end of the day, we are just trying to come up with different ways of adjusting same content for different screen sizes. It's a shame we are still losing this battle :-)


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...


Thought experiment below --

Setup: In the data warehouse world, there is a very interesting trend happening with the rise of the "Analytics Engineer". Historically, all data transformations had to happen with "handwritten python/hadoop/spark code" by a software engineer. This process is expensive and slow, because they are often translating SQL code written by a Data Analyst into python/spark code. But with dbt [1], we see Data Analysts becoming Analytics Engineers. They know a lot about SQL, a lot about the dbt framework, a bit about jinja macros, a bit about yaml, and a bit about the command line - now they can create some really powerful data transformations which is the underpinning of the "Modern Data Stack".

Thought experiment: Right now, we have a problem where any change to a figma design requires a software engineer to update the react application. What about if tools like makers enabled a "dbt-like" workflow, where a "Component Engineer" can turn a figma component into a "simple react component". A component engineer's work flow would be based on makers, storybook, and a cloud IDE.

The goal being that designers start to become "Component Engineers", in the same way that many "Data Analysts" have become "Analytics Engineers".

[1]: https://discover.getdbt.com


This is brilliant! We designers like freedom of thought, and Figma give us that. The goal with makers.so is: inside the same tool I use to lay out ideas, I can also publish them (i.e. use makers.so components) without ever depending on a developer or third party app.

A "Component Engineer" is this second stage of the process (after playing around, I can now publish this with some rules).


Congrats on makers - I think this will be very very cool! I'll give it a spin and show it to our designer.


Thanks Tom. I'd love to hear yours and your designer's thoughts about the plugin. Happy to answer any questions you might have.


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.


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.


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. :)


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 :)


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


Yes, great question.

Free forever means your site with live on a makers.so domain like "https://makers.so/s/{random_string}". Here's an example: https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/

$12/month is for publishing to a custom domain.


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).


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 :)


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?


> 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.


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.


DONE. It's fixed :)

Thank you so much, great feedback.


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.


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


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.


> 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.


Awesome, best of luck.


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


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


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


Thanks so much! Hopefully, this will give Figma designers superpowers :)


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.


Good, I will bookmark it


Thanks. Let me know if you need anything to help you get started.


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


Thanks! Happy to answer any questions to help you get started.


How does it work technically?

I would like to see the output code example.


Here's an example: https://makers.so/s/5b16df0f-17dc-4045-b048-5047182e2856/

The output code isn't suitable for sharing / exporting yet.


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.


Did you mean to reply to a comment here - https://news.ycombinator.com/item?id=30287172 ?


Oops, left this tab open and mind wandered :)


I am switching from adobeXD to figma / sketch


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




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: