
Let's be fair up front: Framer is excellent. If you want scroll effects, CMS-driven pages, and a polished hosted platform — and you're happy to make Framer your new home — it's a strong choice.

But "make Framer your new home" is the actual price. The Figma-to-Framer path is a *migration*: you copy your design over, then re-learn layout the Framer way (breakpoints, stacks, components that behave almost-but-not-quite like Figma's), and from that day on your website's real source of truth lives in Framer, not Figma. Your design file and your website drift apart again — the exact problem you were trying to solve.

## The Two Philosophies

- **Framer:** import your Figma design once, then live in Framer. Powerful, and sticky by design.
- **Figment:** Figma *stays* the source of truth. Design there, publish from a plugin, update by editing the same file forever. No second tool to learn, no drift.

Rule of thumb: if your site needs Framer's CMS and animation engine, use Framer. If your site is a designed site — portfolio, business site, product landing — publishing the Figma file directly is the shortest honest path, and every future edit stays a Figma edit.

## Pricing Reality Check

Framer's free tier carries its branding on a framer.website subdomain; custom domains start at a monthly per-site fee, and features like CMS pages climb the tiers from there. Nothing wrong with that — but if all you need is "my design, on my domain," you're paying for an engine you don't drive. Figment's [pricing](/plans) is built around exactly that simpler job.

## Migrating a Figma-First Site to Figment

If your design already lives in Figma (including "I imported it into Framer but the original file is still around"):

1. **Open the original Figma file** — this is the whole migration. No copying between tools.
2. Check you have a desktop and mobile frame per page; tidy anything you changed only on the Framer side.
3. Install the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so), select frames, publish, review the live URL.
4. Point your domain's DNS at the new site, then wind down the Framer subscription.

If the design *only* exists in Framer, screenshot each page and rebuild the frames in Figma once — after that you're drift-proof.

## Where This Is Heading

Both products are racing toward AI. The difference is where the AI operates: Framer's works inside Framer's world; Figment's AI website builder is being built to work on your open Figma canvas — proposing sections, rewriting copy, refreshing layouts — with you approving changes on a file you own outright.

Choosing between the two for a real project? Describe it to us on [Discord](https://discord.gg/NwnzC2Uara) and we'll tell you honestly if Framer is the better fit.


Framer is a great product - and it is also another platform to learn, another place your design lives, and another subscription that scales against you. If Figma is already your source of truth, here is the case for publishing it directly.

Framer and Figment both turn designs into websites, but they work very differently. Here is an honest comparison, and how to migrate a Figma-first site to Figment without rebuilding it in another tool.

Framer vs Figment - Publishing a Figma Design Without Rebuilding It

Framer vs Figment: Which Should Publish Your Figma Design?


GoDaddy Website Builder exists so that buying a domain ends with *something* online ten minutes later. For a placeholder, it's great. But it is the most template-bound builder in common use — sections you can't move, layouts you can't escape, and a design ceiling you hit the first time you think "could the site look more like *us*?"

Good news: this is the easiest migration on our list, and **your domain stays right where it is.**

## What Moves and What Stays

- **Stays at GoDaddy:** your domain registration and your email if you have it there. Nothing about this migration requires leaving GoDaddy as a registrar.
- **Moves:** the website itself — from GoDaddy's builder to a design you control.

## Step 1: Collect Your Content

GoDaddy Website Builder has no export. Open each page of your live site, paste the text into a doc, and save your images (right-click, save; use your originals where you have them). Most GoDaddy sites are 3–6 pages — this takes an evening, not a week.

## Step 2: Design the Site You Actually Wanted

Open [Figma](https://figma.com) (free) and either:

- rebuild your current layout from screenshots, or
- start from a [free template](https://www.figma.com/community/web_design) that actually fits your business, and drop your content in.

If you've never used Figma: it's boxes and text on a canvas. If you can arrange slides, you can do this. Make one desktop and one mobile frame per page.

## Step 3: Publish with the Figment Plugin

Install the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so), select your frames, publish, and click through the live preview URL it gives you.

## Step 4: Point Your GoDaddy Domain at the New Site

In GoDaddy's DNS settings for your domain, update the record to the value Figment shows you. That single change swaps the old site for the new one — usually within minutes. Then cancel the Website Builder subscription (keep the domain!).

## The Real Upgrade

It isn't just looks. On GoDaddy's builder, the template owns your site. In Figment, a Figma file you own *is* your site — every future change is a design edit away, and no platform can strand it. When you want AI help ("rewrite this section", "draft a services page"), you can use any AI tool on your copy today, and Figment's built-in AI website builder is coming to do it directly on your canvas.

Stuck on a step? Ask us on [Discord](https://discord.gg/NwnzC2Uara).


GoDaddy Website Builder is fine until the day you want your site to look like your business instead of a template with your logo on it. The move to Figment is simpler than you expect - and your domain does not have to go anywhere.

Outgrown GoDaddy Website Builder? Here is how to move your site to Figment for full design control - and keep your GoDaddy domain exactly where it is.

Migrate from GoDaddy Website Builder to Figment - Outgrow the Template

How to Migrate from GoDaddy Website Builder to Figment


Weebly deserves some respect: it put millions of small businesses online with zero fuss. But since Square bought it, the product has been coasting — no real feature work, an aging editor, and Square's own attention pointed at Square Online. Nobody can tell you the date, but every Weebly owner eventually faces the same choice: move on your schedule, or move on theirs.

Moving on your schedule is much nicer. Here's how.

## 1. Save Everything First

- **Text:** open each page and paste the copy into a doc.
- **Images:** download originals where you have them; otherwise save each image from the live site.
- **Weebly's export:** Settings → General → Archive gives you a zip of your site's HTML. It's not something you can edit usefully, but it's a complete snapshot — keep it.
- **Domain:** note where it's registered. Weebly-registered domains can stay registered there (you'll just change one DNS record) or transfer to a registrar you prefer.

## 2. Rebuild as a Figma Design

Your new site lives as a design file in [Figma](https://figma.com) (free). Two routes:

- **Keep your current look:** take full-page screenshots of your Weebly site and recreate the layout in Figma. Tracing is fast — most Weebly sites are a handful of straightforward sections.
- **Take the upgrade:** your site probably looks like 2015. Grab a modern [free Figma template](https://www.figma.com/community/web_design), drop your content in, and come out ahead of where Weebly ever let you go.

Make a desktop and a mobile frame for each page.

## 3. Publish with Figment

Install the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) in Figma, select your frames, and publish. You get a live URL immediately — check every page before switching anything.

## 4. Move the Domain, Then Cancel

Point your domain's DNS at your new Figment site (one record at your registrar). Once it propagates and you've confirmed the new site answers on your domain, cancel the Weebly subscription. Keep the archive zip from step 1 forever; storage is free.

## Why Figment and Not Another Site Builder?

Because the next Weebly is always another Weebly: a proprietary editor that owns your design until the day the platform loses interest. A Figma file is yours — every pixel editable, portable, and future-proof. Figment publishes it; and as we build out AI website building on top, your site gets smarter without another migration.

Questions? We're on [Discord](https://discord.gg/NwnzC2Uara).


Weebly has not shipped a meaningful update in years, and Square has been quietly steering owners elsewhere. If your site lives there, moving it is a when, not an if. Here is the calm, no-drama way to do it.

Weebly has been in maintenance mode for years. Here is how to move your Weebly site to Figment - content, images, and domain - before the platform sunsets around you.

Migrate from Weebly to Figment Before Your Site Gets Stranded

How to Migrate from Weebly to Figment


Webflow is genuinely powerful. It is also a lot: classes and combo classes, breakpoint cascades, CMS collections, and a bill that grows with every site and every seat. Plenty of people who signed up to "build a website visually" end up watching Webflow tutorials on a Saturday instead.

If your site is fundamentally a *designed page* — a portfolio, a business site, a landing page — you may not need a visual development platform at all. You need a design and a way to publish it. That's the entire Figment idea: design in Figma, publish with a plugin, done.

## Should You Actually Leave Webflow?

Stay on Webflow if you rely on its CMS collections for hundreds of items, need complex interactions, or hand the site to a team that lives in it.

Consider moving if:

- You use a fraction of the Designer and dread opening it.
- The site plan + account plan math keeps creeping up.
- Your real design work already happens in Figma, and rebuilding it in Webflow feels like doing the job twice.

That last one is the tell. Many Webflow sites start life as a Figma file. Figment just skips the second build.

## The Migration, Step by Step

1. **Inventory your pages.** List every page in your Webflow project. Copy each page's text into a doc; download images from the Assets panel.
2. **Get your design into Figma.** If the site started as a Figma file, dust it off — you're nearly done. If not, take full-page screenshots of your Webflow site and rebuild the frames in Figma; tracing an existing design goes much faster than designing from scratch. Make a desktop and a mobile frame per page.
3. **Publish with the Figment plugin.** Install the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so), select your frames, publish, and review the live URL it gives you.
4. **Point your domain.** Update your domain's DNS to Figment (one record). Webflow keeps serving until the switch completes, so there's no downtime window.
5. **Downgrade or cancel the Webflow site plan** once the new site is live.

## What About Webflow's Code Export?

Webflow can export static HTML/CSS on paid plans, and it's fine as a backup. But exported code is a dead end for a non-technical owner — you can't edit it without a developer. A Figma file, by contrast, stays fully editable by you. Keep the export as an archive; make the design file your working copy.

## What You Trade, Honestly

You give up Webflow's CMS and its interaction engine. You gain a canvas you already know, updates that take minutes, and one less subscription tier ladder. And as Figment rolls out its AI website builder on the same Figma foundation, "make the hero section warmer" becomes something you type rather than something you learn.

Stuck mid-move? [Discord](https://discord.gg/NwnzC2Uara) — we answer.


Webflow is a professional tool with a professional learning curve and professional pricing. If you spend more time fighting the Designer than shipping pages, here is a practical path from Webflow to a plain Figma-to-website workflow.

Webflow too complex or too expensive for what you actually ship? Here is how to move your site to Figment and keep a design-first workflow without the learning curve or the per-site pricing.

Migrate from Webflow to Figment - A Simpler Design-First Workflow

How to Migrate from Webflow to Figment


Websites don't fail loudly - they go stale quietly. Prices drift out of date, the team photo shows someone who left last year, and the "new" product badge is eighteen months old. On a traditional platform, fixing this means logging into an editor you barely remember. On a Figma-published site, it's a design edit: change the canvas, republish, done.

Here's a routine that keeps a Figment site fresh in under an hour a month.

## The Monthly Fifteen-Minute Pass

Open your site (the live one, not the design) and skim it like a first-time visitor:

- **Facts:** prices, hours, dates, phone numbers, addresses.
- **Freshness signals:** copyright year in the footer, "latest" anything, seasonal references.
- **Proof:** does your best recent work or newest testimonial appear? Your latest project should not only live on Instagram.

Note what's stale, fix it in Figma, select the frames, and republish with the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so). The whole point of the Figma-to-website workflow is that this loop takes minutes.

## The Quarterly Content Refresh

Once a quarter, go one level deeper:

1. **Rewrite one page.** Pick the page that matters most (usually the homepage or your main service page). Paste its copy into ChatGPT or Claude and ask for a tighter version in your voice - "keep the meaning, cut a third of the words" is a reliable prompt. Paste the winner back into your Figma frames.
2. **Swap tired images.** Anything you're bored of, your visitors were bored of months ago.
3. **Add one new section.** A recent project, a new FAQ answer, an updated offer. In Figma this is duplicate-frame, edit, done - no template will tell you the section "isn't supported."
4. **Check mobile.** After editing desktop frames, give your mobile frames the same changes. Two minutes now saves a squished-looking site later.

## Let AI Draft, You Approve

You don't have to write refreshes yourself. The workflow that works:

- **AI drafts** - new headlines, updated descriptions, seasonal copy.
- **You curate** - pick, trim, adjust tone on the canvas.
- **Figment publishes** - the site updates the moment you're happy.

And this is exactly the direction Figment is heading as a product: AI that proposes updates directly in your website's design - "refresh the homepage for spring", "update the pricing section" - with you approving changes on the canvas before they go live. The open design file is what makes that possible; sites locked inside template editors can't offer it.

## A Note on Redesigns

A refresh routine also tells you when it's time for a real redesign: when you notice you're fighting the layout instead of the words. When that day comes, you're in the best possible position - your entire site is already a Figma file. Restyle it, or drop your content into a new [community template](https://www.figma.com/community/web_design), and republish. No migration, no rebuild, no developer.

Stale site and not sure where to start? Show it to us on [Discord](https://discord.gg/NwnzC2Uara) and we'll point at the three things to fix first.


The best thing about a website published from Figma is that updating it is a design edit, not a development project. Here is a lightweight routine for keeping your site fresh - what to review, how often, and how AI can do the drafting.

Your Figma-built website should never go stale. Here is a simple workflow for refreshing copy, images and sections on a site published from Figma - plus how AI can draft the updates for you.

Refresh Your Figma Website Content - A Simple Update Workflow

How to Refresh and Update Your Figma-to-Website Content


You have a Squarespace site, you've seen what AI can do, and you're wondering: can I just have AI update my website for me?

Honest answer: **inside Squarespace, only partially.** Squarespace is a closed platform - there's no way for an outside AI to open your site, restyle a section, or rearrange a page. What you can do inside Squarespace, and what needs a different foundation, breaks down like this.

## What AI Can Do for Your Squarespace Site Today

- **Write and rewrite your copy.** Paste any page into ChatGPT or Claude and ask for tighter, clearer, more on-brand text - then paste it back. This is the highest-value AI move available to you, and it works with any website platform.
- **Draft new pages and posts.** Outlines, service descriptions, FAQs, blog posts. AI drafts, you edit, Squarespace hosts.
- **Squarespace's own AI features.** Squarespace has built-in AI for generating text sections and starting layouts. It's fine for a first draft - but it only rearranges Squarespace's own blocks, inside Squarespace's own templates.

## What AI Can't Do Inside Squarespace

- Redesign your site to match something you saw and loved.
- Make sitewide visual changes ("make the whole site feel more premium").
- Update your design on your behalf, on a schedule or from a prompt.

None of that is a missing feature you can enable. The design simply isn't accessible to outside tools - it belongs to the template system.

## The Setup Where AI Actually Gets Control

For AI to genuinely work on your website, the website has to live in a format AI (and you) can fully see and edit. That's the idea behind Figment:

1. **Your site becomes a design file** in Figma - every page, visible on one canvas, editable by dragging things around. No code.
2. **Figment publishes that design** as your live website. Edit the design, hit publish, the site updates.
3. **AI works on the design layer.** Because the whole site is an open canvas rather than a locked template, AI tools can draft sections, restyle pages, and propose full layouts you can accept or tweak - and Figment is building this in as a first-class AI website builder experience.

The migration is more straightforward than it sounds: save your copy and images, rebuild the layout in Figma (screenshots of your current site make this fast), publish with the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so), and point your domain at the result. We wrote a full walkthrough here: [How to Migrate from Squarespace to Figment](/blog/migrate-from-squarespace-to-figment).

## The Bottom Line

- Want AI-written **content** on Squarespace? You can have that today - copy and paste.
- Want AI to actually **build and update your website**? That needs a platform where the design is open. Move the site to Figment, and AI gets a canvas it can genuinely work on - with you approving every change.

Questions about whether your site would survive the move? Ask us on [Discord](https://discord.gg/NwnzC2Uara) - short answer, it will.


AI can write your Squarespace copy, but it cannot touch your Squarespace design - the platform is closed to it. Here is what you can realistically do with AI inside Squarespace today, and how to move to a setup where AI can actually build and update your site.

Want AI to redesign or update your Squarespace site? Here is what AI can and cannot do inside Squarespace, and the migration path that gives AI real control over your website.

Using AI With Squarespace - What Works and What Doesn't

How to Use AI With Your Squarespace Website


Wix got your business online. But if you're reading this, something is nagging you - the editor feels heavy, the site looks like every other Wix site in your industry, or you've watched an "AI website builder" demo spit out a finished homepage in thirty seconds and thought: *why am I still dragging widgets around?*

Before you migrate anywhere, it helps to understand what AI website builders really do well - and what they don't.

## What AI Website Builders Are Actually Good At

- **The blank page problem.** Describing your business and getting a structured draft site in seconds is genuinely magical. No more staring at an empty template.
- **Copywriting.** AI writes serviceable headlines, service descriptions and about-page copy far faster than most business owners.
- **Iteration.** "Make it warmer", "add a testimonials section" - conversational edits beat hunting through settings menus.

## Where They Fall Short

- **Sameness, again.** Most AI builders assemble sites from the same section library. You escaped the Wix-template look only to get the AI-template look.
- **The last 10%.** When the AI's version is *almost* right, fixing that one stubborn detail often means fighting the tool - the same frustration that made you want to leave Wix.
- **Ownership of the design.** In most AI builders, the design isn't really yours to inspect or edit. It lives inside the tool, on the tool's terms.

That last point is why we're building Figment the way we are: your website is a **real design file in Figma** that you own, and Figment publishes it as a live site. AI helps you draft and revise, but the canvas is yours - down to the pixel. (The full AI builder experience is rolling out on top of the same Figma-to-website engine Figment runs today.)

## Migrating Off Wix: The Practical Steps

Wix has no real export - your site can't be zipped up and moved. What you migrate is your **content, your domain, and your ideas**. That's less painful than it sounds:

1. **Save your content.** Copy each page's text into a doc; download your images (originals if you have them).
2. **Capture the layout.** Take full-page screenshots of every page. Whatever builder you land on, this is your reference.
3. **Rebuild in a design canvas.** With Figment, that means Figma: trace your old layout, or take the opportunity to start from a fresh [template](https://www.figma.com/community/web_design). Use AI (ChatGPT or Claude) to rewrite and tighten your copy as you go - it's very good at "make this paragraph half as long."
4. **Publish.** The [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) turns your frames into a live website with a URL you can review.
5. **Move the domain.** Point your domain's DNS at your new site. If the domain is registered through Wix, you can keep it there and just change the DNS record, or transfer it to a registrar you prefer.
6. **Cancel Wix** once the new site is live and your email (if any) is safely moved.

## Should You Wait for AI Builders to Get Better?

No - because the winning setup isn't "AI instead of you", it's **AI plus a canvas you control**. Draft with AI, refine by hand, publish instantly. You can have that workflow today, and every AI improvement that ships lands on top of a site you already own.

If you get stuck mid-move, ping us on [Discord](https://discord.gg/NwnzC2Uara) - we've helped a lot of people out of Wix.


AI website builders promise a finished site from a single prompt. Here is what they are actually good at, where they fall short, and a realistic path for moving your existing Wix site to a design-first, AI-assisted workflow.

Thinking about moving your Wix site to an AI website builder? Here is what AI builders actually do, what to watch out for, and how to migrate your Wix site without losing your content or your domain.

Migrate from Wix to an AI Website Builder - What to Know First

How to Migrate from Wix to an AI Website Builder


Squarespace makes it easy to get a website online. But most people who search for "how to leave Squarespace" have hit the same wall: every site looks like the same template, small design changes fight you, and the subscription keeps billing whether or not you touch the site.

Figment takes a different approach. Your website is a **design** - built in Figma, published by Figment - so you own the look completely. If you can drag boxes around a canvas, you can maintain your own site. No code, no template boundaries.

Here's how to make the move without losing anything.

## 1. Take Inventory of Your Squarespace Site

Before touching anything, list what your site actually contains:

- **Pages** - home, about, services, contact, and anything hiding in your navigation.
- **Copy** - open each page and paste the text into a doc. This is also the perfect moment to trim words you've been meaning to rewrite.
- **Images** - download the originals if you have them. If you only have the versions on Squarespace, open each image in a new tab and save it.
- **Your domain name** - note where it's registered. If you bought it through Squarespace, it lives there; you can transfer it out or simply point it somewhere new (step 5).

Squarespace also has an export tool (Settings → Advanced → Import / Export), but it's built for WordPress and skips most design elements - treat it as a text backup, not a migration.

## 2. Rebuild the Design in Figma (or Start From a Template)

Figma is a free design tool, and it's where your new site will live as a design file.

- **If you liked your Squarespace look:** recreate the layout in Figma. Screenshots of your old pages make perfect tracing paper.
- **If you were leaving because of the template:** this is your unlock. Grab any of the thousands of [free Figma website templates](https://www.figma.com/community/web_design) and make it yours, or design from a blank canvas.

Design both a desktop and a mobile frame for each page - Figma makes duplicating and resizing frames easy, and Figment will serve the right one to the right visitor.

## 3. Drop In Your Content

Paste the copy from step 1 into your Figma frames and place your images. Because it's a design canvas rather than a page editor, nothing snaps back or fights you - text sits exactly where you put it.

## 4. Publish With the Figment Plugin

Install the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) inside Figma, select your frames, and publish. Figment turns the design into a live, working website - links, buttons, forms and all. You get a live URL immediately, so you can review the whole site before your visitors ever see it.

## 5. Point Your Domain at the New Site

This is the moment the migration actually "happens", and it's one setting:

1. In Figment, add your custom domain to your published site.
2. At your domain registrar (Squarespace, GoDaddy, Namecheap...), update the DNS record to the value Figment shows you.

DNS changes usually take minutes, occasionally a few hours. Your old Squarespace site keeps serving until the switch completes, so there's no gap where your site is down.

## 6. Cancel Squarespace (After Checking Two Things)

Before you cancel the subscription:

- **Email:** if you use Google Workspace through Squarespace, move the billing for it first so your email keeps working.
- **Domain:** if the domain is registered at Squarespace, you can keep it registered there (just change the DNS) or transfer it to another registrar. Don't let the registration lapse.

Then cancel, and stop paying a monthly fee for a template.

## What You Get on the Other Side

- **Total design freedom** - your site is a Figma file. If you can design it, you can ship it.
- **Instant updates** - edit the design, hit publish, done.
- **No template ceiling** - and as Figment grows into a full AI website builder, you'll be able to describe changes in plain English and let AI draft them in your design for you.

Questions mid-migration? We're at [support](mailto:nikita.jerschow@gmail.com) and on [Discord](https://discord.gg/NwnzC2Uara).


Squarespace is great until you want your site to look like you, not like a template. Here is a practical, non-technical walkthrough for moving your website from Squarespace to Figment - content, design, domain and all.

Leaving Squarespace? Move your website to Figment and get a design-first site you fully control - no coding, no template lock-in, no monthly template tax.

Migrate from Squarespace to Figment - Step-by-Step Guide

How to Migrate from Squarespace to Figment


Figma is a popular [no-code](https://kissflow.com/low-code/no-code/no-code-overview/) tool used by designers and creators to prototype websites. In Figma, you can layout your entire design down to the exact pixel. This tool is great for crafting unique web designs that break the mold of boring website templates. 

The problem with using [Figma](http://figma.com) is that you can spend hours creating the perfect web design but you still  don't have a working website. Now you must spend even more time building or outsourcing the development of your website design.

**With [Figment](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) you can build your website directly from a Figma design, without coding.** Here's how it works:

## 1. Create A Design in Figma

The first step to creating your new website is designing it in Figma. If you are already familiar with Figma this should be a breeze. Even if Figma is new to you, it's easy to learn. 

To speed up the process, there are tons of [free Figma templates](https://www.figma.com/community/web_design) available online. You can grab one of these and customize the design or start fresh and bring your vision to life.

### Design For Both Mobile and Desktop

While you are busy creating your design, consider if you plan to support both mobile and desktop users. Mobile users make up a [large portion of internet traffic](https://www.theguardian.com/technology/2016/nov/02/mobile-web-browsing-desktop-smartphones-tablets), so it is likely that you will have both mobile and desktop visitors. This means you need to create a design for each screen size. 

Don't worry, in Figma it is easy to copy components so you can easily duplicate your design for the other size screen. You can also make use of the [screen frames in Figma](https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma) to make your design the perfect size.

## 2. Install the Figment Plugin

When your design is complete, it is time to generate your website. To do this, [install the Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) from the Figma Community page. On the Figment plugin page, click 'Install' in the upper right corner.

Now you have everything you need to create your website from Figma.

## 3. Launch the Figment Plugin

With the Figment plugin installed, go ahead and open up your design in Figma. Next, launch the Figment plugin. To do this, right click on your design and select Plugins and then click the Figment plugin. 

![Launch Figment Plugin](/blog/launch-figment-plugin.png)

This will launch the Figment plugin window inside the Figma app. Figma plugins work in both the browser and desktop version of Figma so you can use the Figment plugin on either platform.

You've just opened up the Figment plugin with your design. You now have everything you need to add hover effects, animations, links, and media to your design before publishing it to your live website. 

To get started let's walk through the layout of the Figment plugin and how to use it.

### Figment Plugin Layout Tour

The Figment plugin provides the ability to fully customize your Figma design before turning it into a website. With the plugin window open, you will notice 3 sections. 

![Figment Plugin Layout](/blog/figment-plugin-screen.png)

The top of the window contains the plugin menu bar. You can use this to navigate the plugin and get quick links to resources.

The main area contains the element editor. This will display the name of the Figma node that you currently have selected and are editing, along with a preview of what that element looks like. This is handy for keeping track of which element you are customizing while using the plugin and letting you see your changes in real time. 

Below that is a list of effects that you can add to any element. Click on one of the rows to select that effect and a new menu will open. Inside this menu you can customize the effect you add to the element and preview it in the editor before adding it.

Each effect type let's you quickly add an effect with default settings or you can customize the effect to your needs.

At the bottom are buttons to publish your site or export the code. You will want to come back to these so you can publish after you finish customizing your design with effects.

## 4. Publish your website

When you are done putting the final touches and are ready to publish your website, Figment makes it so easy to do. Navigate back to the home screen and look for the **Publish to website** or **Export code** buttons at the bottom. 

These give you two options for how you can turn your design into a website.

### Publish Figma Design to a Website

Click **Publish to website** to open the publish menu and you will see a screen like this:

![Figment Plugin Publish Website Screen](/blog/figment-plugin-publish-website-screen.png)

Here you can select the frame you want to export as a website. (**Hint:** To publish multiple frames, place them inside a single frame container)

Next you can view the domain that your new website will be hosted on. If you are on a hobby plan, a domain will be generated for you. If you are on a Pro or Team plan, you can connect your own custom domain by clicking **Use Custom Domain**.

To add metadata to your webpage for SEO purposes, fill in the page title and description. You can even see the Google preview for your webpage.

When you are ready to launch, press **Build & Publish!** and watch your site appear before your eyes. When your site is done building, click the button again to view your new gorgeous website in the browser.

Your website is now officially launched 🚀  and ready for the world to see. Start sharing the URL to show off your new master piece.

### Export Figma Design to HTML and CSS Code

Alternatively, if you want to host your website yourself, Figment let's you export the code for your design. On the home screen, click **Export Code** to open the export code page. 

![Figment Plugin Export Code Screen](/blog/figment-plugin-export-code-screen.png)

You instantly have access to the CSS code for any element you click inside your design. You can copy the code from the code window right below the previewed element. 

To export the full code for the website you will need a Pro or Team plan. Click **Export full page** at the bottom of the screen to get the full HTML and CSS code for your design.


## You're All Set 😆

And with that you are good to go! [Figment](/) makes it easy to build a website from Figma with no coding required. The time to create a website using Figma is cut in half so you can spend more time designing and less time coding.

Host your website with Figment and keep making updates to your site. Make changes in your Figma design and use the plugin to upload your design again. Make any changes in the editor and publish the updated version to your domain. 

Figment is your one stop shop for designing and deploying websites without code. We are excited to see the wonderful things you create with Figment!

The problem with using Figma is that you spend hours creating the perfect web design but you still don't have a working website. With Figment you can build your website directly from a Figma design, without coding.

Transform your Figma Design into a website without coding. Our Figma plugin allows you to export your design as a live website.

How to Turn a Figma Design into a Website - Figment

How to Create a Website with Figma


Figma power users spend hours at a time working in the Figma app to craft their imaginative designs. One easy way to save time, is adding keyboard shortcuts to your Figma workspace.

If you spend lots of time in Figma, speeding up your workflow is essential to maximizing your efficiency. Moving your hands from the keyboard to the mouse to find the menubar and plugin is slow. Keyboard shortcuts are one of the simplest ways to speedup your workflow. 

Shortcuts can take a little bit of time to get used to until you memorize them. Once they become muscle-memory (or finger-tip memory), you will be lightning fast while working in Figma. 

In this article, I'll show you how you can create a keyboard shortcut in the Figma Mac app. I'll be using the [Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) for this example but you can do this with any [Figma community plugin](https://www.figma.com/community/explore).

![Figment Plugin Homepage](/blog/figment-plugin-homepage.png)

## 1. Install a Figma Plugin

Go to the plugin page and click install in the upper right corner (leave a ❤️ for your favorite plugins). 

With the plugin installed, open up any Figma file to start.

To use a plugin, right click on the screen. In the cursor menu go to plugins and choose your plugin to run it.

![Figment Plugin Right-click Menu](/blog/figma-plugin-menu.png)

Figma plugins can also be accessed in the menubar at the top of the screen. 

![Figment Plugin Menubar](/blog/figma-plugin-menubar.png)

## 2. Open System Preferences

With your plugin installed, it is time to create the keyboard shortcut. MacOS allows you to create custom keyboard shortcuts for actions inside of apps installed on your computer.

To start open System Preferences (⌘ + spacebar to open spotlight and search 'System Preferences'). In System Preferences, go to Keyboard then click the Shortcuts tab at the top, and choose App Shortcuts in the side menu.

![MacOS System Preferences Keyboard Shortcuts](/blog/system-preferences-keyboard-shortcuts.png)

## 3. Create a Mac Keyboard Shortcut

To add the keyboard shortcut, press the + button. In the pop up, choose Figma from the Application drop down menu. 

In menu title, enter the name of the plugin from the menubar exactly as it appears. In our example, the menubar reads "Figment.so", so I'll enter that in the menu title field.

Next, you need to choose the shortcut on the keyboard. It is important to choose a keyboard combination that will not interfere with any other existing keyboard shortcuts. 

Using a combination of ⌘ Command,⇧ Shift, ⌥ Option (or Alt), or ⌃ Control (or Ctrl) is a good idea. Choose two of those and a letter. 

I choose to use ⌘ Command + ⌥ Option + F, for my shortcut. With the popup menu open, type your shortcut and click Add.

![Figment Keyboard Shortcut Setting](/blog/figment-keyboard-shortcut.png)

I checked that this would not interfere with any existing shortcuts by opening the Figma app and pressing this shortcut before I added it. If the shortcut was already in use, I would need to choose another one.

Now that the shortcut is added, let's make sure it worked. Go back to Figma and open the plugins menu from the menubar. The shortcut I just created now appears next to the plugin in the menubar. Success!

![Figment Keyboard Shortcut in Menubar](/blog/figma-plugin-keyboard-shortcut-menubar.png)

To test that our keyboard shortcut works, select an element and run the plugin by pressing ⌘ Command + ⌥ Option + F. Sweet, the plugin works!

## Check out the Figment Plugin

Keyboard shortcuts are great for saving time and so is [Figment](/). We built Figment to save you time when creating a website. Designing your webpages in Figma and then coding them or handing your design to a developer is a slow process. 

With Figment, you can design in Figma and create your website without coding. 

Read our post about [how to use Figment](/blog/how-to-create-website-figma) or [install the Figment plugin](https://www.figma.com/community/plugin/1003000718170427134/Figment.so) right now to see for yourself. Figment is easy to use and in seconds you can turn a Figma design into a website.

Keyboard shortcuts are an awesome way to speed up efficiency when working in Figma. Adding a few keyboard shortcuts for your favorite Figma plugins saves you tons of time.

Add a keyboard shortcut for a Figma plugin in the Figma Mac App to improve your Figma workflow.

How to Make a Figma Plugin Keyboard Shortcut



The Figment affiliate program is designed for influencers, educators, bloggers, and others to get paid for the designers and developers they refer to Figment. Affiliates get paid a 50% commission on all subscription payments for 24 months – for every customer they refer to Figment.

We at Figment love our affiliate partners, no matter where they are or how they're allowed to take payments. In this guide we'll go over how to take full advantage of our program.

#### Read in this guide

 * [Getting Started](#getting-started)
    * [Affiliate Link](#affiliate-link)
 * [Affiliate Commission](#affiliate-commission)
 * [Affiliate Window](#affiliate-window)
 * [Taking Payments](#taking-payments)
    * [PayPal](#paypal)
    * [Stripe](#stripe)
    * [Fiverr/Upwork](#fiverr-upwork)

## Getting Started
To become a Figment affiliate partner, please fill out the form here: https://share.hsforms.com/1ors4ANG8Rb6aLYj-meze6wc0m3b.

We are in touch with new applicants within 2-3 business days. 

### Affiliate Link
Once approved, we will send you an email with a special link that will be your affiliate link. This link will be unique to you. This link will send users to a specific page where we will register them as referred by you. See eligibility details in the [affiliate window](#affiliate-window) section.

## Affiliate Commission
The commission for affiliates is 50% of subscription payments for the first 24 months – for each subscription made within the [affiliate window](#affiliate-window), or until the subscription(s) is canceled. Each time a customer you referred subscribes to an account or site plan, a Figment team member will review the conversion, and once approved you’ll receive an email confirmation.

## Affiliate Window
Your [affiliate referral link](#affiliate-link) has a 90-day tracking cookie. That means that any person who clicks on your [affiliate link](#affiliate-link), will be tagged as referred by you with a tracking cookie. From the moment they are tagged, you will be commissioned for all subscriptions made until that cookie window expires on day 90. The subscriptions made within those 90 days will be paid out for the defined 24 months, or until those subscriptions are canceled.

## Taking Payments
Affiliate earnings will be paid out on the 15th of each month, or more often in some cases. If you did not receive a payment that you believe you should have, please contact us.

### PayPal
PayPal is temporarily disabled while we work through some issues with our integration. On-demand payments via PayPal can still be requested.

### Stripe
Taking payments with Stripe is the most straightforward payout method. You can simply link your Stripe account in your affiliate dashboard, and we will handle the rest. You will get emails when each payment comes through. 

### Fiverr/Upwork
For our affiliates over at Fiverr or Upwork, we schedule payouts each month with the native subscription feature of both platforms. The set up for this will be handled directly by one of our team members through the Fiverr/Upwork platform directly.

## Advertising guidelines
As a Figment affiliate, the FTC requires that you tell your audience you are using affiliate links. You can make the disclosure within the content itself, or you can provide a page to your audience where they can read a full disclosure.

_Please make sure to review the [FTC guidelines](https://www.ftc.gov/tips-advice/business-center/advertising-and-marketing/endorsements) regarding affiliate links._

------

Contact us if you have any questions regarding our affiliate program.

The Figment affiliate program allows you to get paid for the designers and developers you refer to Figment. Affiliates get paid a 50% commission on all subscription payments for 24 months – for every customer referred.

The Figment affiliate program is designed for influencers, educators, bloggers, and others to get paid for the designers and developers they refer to Figment. Affiliates get paid a 50% commission on all subscription payments for 24 months – for every customer they refer to Figment.

Figment.so

Framer vs Figment: Which Should Publish Your Figma Design?

9/13/2026 • Nikita Jerschow

How to Migrate from GoDaddy Website Builder to Figment

9/13/2026 • Nikita Jerschow

How to Migrate from Weebly to Figment

9/13/2026 • Nikita Jerschow

How to Migrate from Webflow to Figment

9/13/2026 • Nikita Jerschow

How to Refresh and Update Your Figma-to-Website Content

9/13/2026 • Nikita Jerschow

How to Use AI With Your Squarespace Website

9/13/2026 • Nikita Jerschow

How to Migrate from Wix to an AI Website Builder

9/13/2026 • Nikita Jerschow

How to Migrate from Squarespace to Figment

9/13/2026 • Nikita Jerschow

How to Create a Website with Figma

3/5/2022 • Tyler Kennedy

How to Make a Figma Plugin Keyboard Shortcut

9/18/2021 • Tyler Kennedy

Figment | Become an Affiliate

9/1/2021 • Nikita Jerschow

Figment.so