Turn your Figma design
into a website
Paste the link to your Figma file and Macaly builds a responsive site from your frames, asking for screenshots of anything it can't open.
DraftsNorthline website
Live sitenorthline.studio
Ideas with a place in the world.
Strategy, identity and digital work for cultural and purpose led organizations.
Selected work
The studio
Six of us in a former print works in Leith, Edinburgh. We take on four projects at a time, so the people you meet are the people who do the work.
Your frames become the site's pages
Each frame that is a whole screen becomes a page named after it, and a narrower frame of the same screen becomes its phone layout. Pick a layer or use the site's menu, and the live frame opens that page.
DraftsNorthline website
Pages
Website
Home / MobileHome on a phone
Button
Live sitenorthline.studio
Ideas with a place in the world.
Strategy, identity and digital work for cultural and purpose led organizations.
Selected work
The studio
Six of us in a former print works in Leith, Edinburgh. We take on four projects at a time, so the people you meet are the people who do the work.
The states a frame can't show
A frame holds one version of a button. What it does under the cursor, how it looks when someone tabs onto it and what the form says about a half-typed address get decided with you in the chat, on a site that already runs.
Your fonts, photos and icons
Macaly pulls your styles, colors and components from the file and keeps your photos and icons where you placed them. A licensed font it can't load, it asks you for: upload the files or pick a web font you like.
Before you hand over the file
Yes, to read the file itself. After you sign in, connect Figma once and approve access in Figma; every project in your Macaly workspace then uses the same connection. The Figma connection is available on all plans.
Send screenshots instead. Drop PNG or JPG images of your frames into the chat with a short note on what each one is, and Macaly builds the site from those.
Close to it. Macaly keeps your layout, components and spacing and makes the page work at every width, which no fixed frame can match pixel for pixel. Then you check the details you care about and ask in the chat for the ones that are off.
The layout, components, spacing, colors and styles come from the file. What a fixed canvas can't say gets settled with you in the chat: where the layout changes on a phone, how the menu opens, what hover and keyboard focus look like, and what a form checks before it sends.
Every frame that is a whole screen does, with an address named after it, so a frame called Services becomes the Services page. A frame that shows the same screen at phone size becomes that page's phone layout. Name the frames you want in the notes and Macaly leaves the rest alone.
No. Your Figma file is where the site starts, and the two don't stay linked. Once the site exists you change it in Macaly, and the file stays as you left it.
Name the frames you want first, say which screen sizes matter and mention anything that has to stay exact. If a button is meant to open a form or scroll somewhere, write that down too.
Macaly uses the ones it can reach in the file and can export frames as images. A licensed font it can't load, it asks you for: upload the font files or pick a web font you're happy with.
Getting started is. Connecting Figma works on every Macaly plan, the first draft comes with a free account, and you can publish on a free macaly.app address. Your own domain needs a paid plan.
Yes. Keep shaping it in the chat: new pages, different spacing on a tablet, a section that moves up. On a computer you can also click any text or photo on the page and change it yourself.
