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

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!

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.

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.

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

It's funny you mentioned Microsoft FrontPage. Alexis Ohanian [0] also made the same comment :)

[0] https://twitter.com/alexisohanian/status/1448288261172989960...

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

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

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.

That aside, this looks like a super fun idea and I'm curious to see how it develops.

Thank you so much, great feedback.

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?

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

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

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.

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