-
How the work actually goes.
Five steps, and the third one is the real job.
Pick the finished frame in Figma.
Send it over with the plugin.
Rebuild the two narrower layouts.
Fill in the per-page SEO fields.
Connect a domain and publish.
-
The import, precisely
It runs one way, and there is no re-sync. After a frame reaches the canvas the two files are separate things: change the Figma frame and nothing moves on the site. That sets the working method cleanly — keep designing in Figma, send frames across once they are finished, and treat the canvas as where a page gets completed rather than drafted.
Prototype work does not travel. Animations and interactions wired in Figma’s prototype tab do not come over with the frame. Siter.io has its own on-canvas animations, so the movement is available — it is just built here, as separate work. Budget the hours rather than finding the gap the night before a handover.
Send finished frames, not sketches. With no round-trip, a frame sent while you are still deciding something is a page you finish twice.
Export images at the size they are shown. What the platform does to an image on the way out is not documented, so rely on the part you control. A hero sized for a wide desktop column is otherwise the file a phone downloads.
Siter.io for designers
You already made every decision the site needs. The layout, the type, the spacing, the states. Siter.io takes the Figma frame you drew those decisions in and publishes it, instead of asking you to make them again in somebody else’s editor.
Start for free -> See the Figma plugin
The short answer.
The usual route to the web hands your design to a second tool and asks you to rebuild it there, in that tool’s idea of a grid and a text style. Here the file is the source: send a frame across, finish it on the canvas, publish. Three things to know first — the import runs one way, the site lays out at three fixed widths, and the free plan previews privately rather than publishing.
-
Right tool if…
The site is a handful of designed pages that already exist in Figma — a portfolio, a studio site, a launch page for a client. The layout is the point, the content is written, and nobody will be adding posts to it every week.
-
Look elsewhere if…
You need a blog or any other content the client keeps adding to, a shop, or a second language. None of the three exists here, and none is a workaround away. The section below says so without hedging.
Three fixed layouts, and how to draw for them.
The constraint most worth understanding first, because it changes how you set the Figma file up rather than how you use the builder.
Siter.io lays a site out at three fixed breakpoints: a desktop layout and two narrower ones, arranged by you. There is no fourth width and no breakpoint at a number of your choosing. Predictable rather than fluid — you place things at each width instead of writing rules and hoping they hold; less controllable than a developer-grade tool, and the wrong shape for an interface that has to respond at any width.
Draw all three in Figma
Make the desktop frame the one that carries the decisions, then draw the two narrower ones rather than assuming anything reflows on its own. Keep the count of independently positioned elements low while you do: anything placed by eye rather than by a stack is placed again in each narrower layout, so a hero of nine floating pieces is three times the work of one built from three.
Reset the display type per width. A headline sized for a wide canvas is a wall of letters on a phone, and three to six words a line is the target at the narrowest layout. Then hunt the one block that still reaches past the right edge, because a single wide element drags the whole page sideways.
Five minutes worth spending first
Whether an edit at one width carries down to the others is not documented, and it decides whether you work top-down or treat each width separately. Establish it on a throwaway page. More on the three widths.
The parts designers ask about.
Not a feature list. Six things that decide whether a project can live here — from what survives the import to what you can still fix after publishing.
-
Your own font files
Upload the fonts the design is actually set in, on every plan. Whether a hosted library is available instead is not documented, so plan on bringing the files and licensing them for web use.
-
Components
A button you have already settled is not something you rebuild on every page. What a component carries across the three layouts is not documented, so test that before committing a system to it.
-
Version history
Version history is part of the product, so there is somewhere to look after a bad afternoon. How far back it reaches and what a restore covers are not published, so test it before you rely on it.
-
Per-page SEO fields
Title, description, slug and share image, set per page, on paid plans. The difference between a portfolio that shares as itself in a link preview and one that shares as a filename.
-
Animation on the canvas
On-canvas animations and interactions are where movement gets built. Nothing wired in Figma's prototype tab comes over with the frame, so budget that work again rather than assuming it travels.
-
Custom code
Site-wide head code on paid plans, plus an embed element placed on the canvas. There are no per-page body scripts, so a different widget snippet at the foot of each page is out.
What a live site costs.
The free plan builds and previews privately. Publishing to a public address is what the paid plans buy.
Solo is $7/mo billed yearly for 1 published website and 10 pages. Plus is $12/mo for 3 sites and 50 pages. Pro is $24/mo for 5 sites with unlimited pages, and is the only plan that can download a page as HTML. Month to month costs more on each: $8, $14 and $28 a month.
Hosting comes with every paid plan, a domain you already own points at the site at no extra cost, and the badge is removable. For a designer carrying several small client sites the number that matters is the extra site rather than the headline one, because that is the line the bill grows along: the pricing page lists an extra website at $4 on Solo, $6 on Plus and $8 on Pro, added to the subscription rather than moving you up a tier. Which billing cycle those add-ons follow is not stated, so price the whole roster in the checkout before you commit to it.
Every plan in full · connecting a domain · the whole feature matrix.
Where this stops being the right tool.
Read this part before the trial, not after it.
There is no CMS and no blog. Nothing here manages a collection of entries, so no news section, no case-study index a client updates, no article template with a list page in front of it. If the brief includes anything the client adds to weekly, no clever page structure fixes it.
There is no e-commerce. It is listed as upcoming with no date attached, which is not a thing to plan a client project around. A designer selling prints needs a different tool, or a checkout hosted elsewhere.
There is one language per site. A bilingual site means building and maintaining it twice, and paying for the second site.
Real-time co-editing is not there. It is listed as upcoming, so a studio splits the work by page and agrees out loud who is editing one before both people open it. It is the simultaneity that is missing, not the collaboration — roles that organise who changes what are listed on every plan, and the paid plans include editor seats. Exactly what each role is allowed to do is not documented, so check it in the app before you hand a client site to somebody.
The Pro HTML download is not a documented escape hatch. Pro can download a page as HTML; what comes down with it is not published. Test it before you promise a client the site is portable.
Frequently asked.
Does it stay in sync with my Figma file?
Not in either direction. The import runs one way with no re-sync, so once a frame is on the canvas the two files are independent. Finish a frame in Figma, send it once, complete the page here.
Will my prototype animations come across?
They do not. Anything wired in Figma’s prototype tab stays in Figma. Siter.io has its own on-canvas animations and interactions, so the movement can exist on the published site — it is authored here rather than carried over.
Can I publish for free?
The free plan builds and previews privately and does not put a site on a public address. A live site starts from $7/mo billed yearly. Hosting is included, and a domain you already own points at the site at no extra cost. An SSL certificate is listed as included on every plan; whether one is issued automatically for a custom domain is not documented, so confirm it in the browser once the address resolves.
Can I get the code out?
Pro, at $24/mo billed yearly, can download a page as HTML. What comes down with it is not documented, so if handing a client the files is part of the deal, test it before the deal is written down.
Is it worth it if I already know how to build sites?
Probably not, if the site is complicated and you enjoy that part. The case here is narrow and worth stating narrowly: it removes the second build for pages whose design is already finished. For judging the fit yourself, how small sites are put together and the templates in the app are the quickest reads.
Who else it is for
-
For photographers
Galleries, image weight and the print-sales question, answered honestly.
-
For artists
A portfolio that looks like the work, and what it cannot do yet.
-
For nonprofits
What a small organisation can build here, and where donations have to live.
-
For agencies
Several client sites, handoff, and what each extra site costs.
-
For freelancers
One designer, a few client sites, and a bill that stays small.
-
For studios
Editor seats, roles and how a small team shares a file.
Also useful: the Figma plugin, the plans in full and how it compares with other tools.
-
Start from the file you already made.
Open the plugin, send a finished frame across, and see what lands on the canvas. Building and previewing costs nothing; putting a site on a public address needs a paid plan.
Get the plugin -> -
Start for free with Siter.io
Start for free ->