Your Figma File Is Already a Website. Here's How to Publish It in 8 Steps..

By the end of this tutorial, you'll have a live URL you can share with clients today. No developer handoff. No waiting. No explaining to someone else what "that button should look blue" means. We're taking your Figma design into Framer and publishing it — in 8 steps. Step 4 is where every tutorial cuts away. We're not cutting away.

What you'll need: a Figma account (free works), a Framer account (free tier handles this whole tutorial), a Figma file with at least one page designed, and 45 minutes. What you don't need: code, a developer, or anything in your Figma file to be "ready."

Step 1: Prep your Figma file — 10 minutes that save 45

Open your Figma file. Before you touch the Framer plugin, fix two things. Name your layers — Framer reads Figma layer names as element IDs. "Frame 47" becomes unusable; "hero-section" becomes useful. Rename your top-level frames to match what they are: header, hero, features, footer. Then flatten your vectors — any path built from multiple overlapping shapes needs a Union or Flatten (Path menu > Flatten). Framer can't interpret stacked shapes the same way Figma renders them.

Common mistake: skipping the rename step. Every Framer component then gets auto-named from the Figma layer name. "Frame_47__copy_3" in your properties panel later is 100% your fault.

Step 2: Install the Figma to Framer plugin

In Figma: go to Resources (grid icon, top center) → Plugins → search "Framer". Install the official Framer plugin by Framer Inc. — the one with the Framer logo, not third-party clones. Open the plugin, connect your Framer account, and select the frames you want to export (Cmd-click each top-level frame). Run Export to Framer. You'll see a preview before it sends anything.

Pro tip: export one section first. Don't send your entire 12-page Figma file on the first run — the plugin chokes on overly complex files. Start with your hero section, verify it lands cleanly, then export the rest.

Step 3: Land in Framer — what you're looking at

Your exported section appears on the Framer canvas. It looks close to your Figma design but probably not exact — that's expected. Framer is converting your static Figma frames into live HTML and CSS components. Some things translate perfectly: typography, colors, images, spacing. Some things break: complex gradients, clip masks, nested auto layout with conflicting constraints. Don't panic. The next step handles the breaks.

Step 4: Fix the breaks — the part every other tutorial skips

Issue A: Clipped text. Your headline looks cut off at the right edge. In Framer: select the text layer → Layout panel (right sidebar) → set Width to Auto. The clipping disappears.

Issue B: Broken mobile layout. Your hero looks great at 1440px and like a fever dream at 375px. In Framer: click the phone icon to switch to the 375px breakpoint. Find the horizontal flex container that's breaking → Layout panel → Flex Direction → toggle from Row to Column. Add 24px bottom padding between stacked elements. That fixes roughly 80% of mobile breaks.

Issue C: Missing fonts. Inter and DM Sans come through automatically. Adobe Fonts or custom families won't. Select broken text → Typography panel → substitute from the built-in list, or upload your font in Project Settings > Fonts. Work through A → B → C in that order. Fixing responsive before fixing fonts means debugging a layout that still has invisible text.

Step 5: Add one scroll animation

Select your hero headline. Open the Interactions panel (right sidebar, arrow icon) → + Add Scroll Effect → Fade In Up. Set offset to 0, duration to 0.5s, delay to 0. Select the hero subtext and add the same effect with a 0.1s delay. The headline fades in. The subtext follows 100 milliseconds later. That stagger is the difference between "I made a website" and "this feels professional." Don't animate everything — one to three scroll effects per page, maximum.

Step 6: Set up one reusable component

Your CTA button exists in six places on your page. Right now, changing the color in one place changes it in one place. Select your button in Framer → right-click → Create Component → name it CTA-Primary. Delete the other five instances and replace each with your CTA-Primary component from the Components panel. Change the button color in the Master Component — all six update simultaneously. This isn't just a timesaver. It's the minimum setup so that when a client asks to change "all the buttons" at 11pm, you're done in 30 seconds.

Step 7: Connect a domain and configure the basics

In Framer: Publish (top right) → Custom Domain. Framer gives you CNAME records to enter in your registrar's DNS settings — takes about 5 minutes to set up, usually propagates within 30. While you're in Publish settings: set your Page Title (main keyword phrase, not just your brand name), Meta Description (150 characters max, make it specific not clever), Social Image (your 1200×630 thumbnail for WhatsApp and LinkedIn shares), and verify noIndex is OFF. If you published a staging version with noIndex enabled, you're invisible to Google.

Step 8: Publish and verify

Click Publish. Framer builds and deploys in under 60 seconds. Open the URL in a private window and check three things: Does the page load without layout breaks? Does the scroll animation play on the first viewport? Does the mobile view look intentional, not broken? Yes to all three — share the URL. Each failure maps to exactly one fix: mobile breaks go back to Step 4, animation issues go back to Step 5, a missing section means one frame wasn't selected during export in Step 2. Fix the specific thing, republish, done.

If you get stuck

Most common dead-end: the plugin export fails silently — nothing happens when you click Export to Framer. This almost always means the selected Figma file is too complex or has a corrupt layer reference. Fix: select only the specific frame you want, export that frame alone. If it still fails, duplicate the frame into a fresh Figma file and export from there. Takes 2 minutes. Works every time.

Next tutorial: We'll take this live Framer site and connect a CMS collection — so your portfolio updates without ever opening Framer again.