Direct answer: Build with auto-layout and constraints first, add tablet and mobile breakpoints second, then resize-test every section for overlap before you publish.

Why Does a Desktop Design Break on Mobile?

Absolute positioning. If a heading sits at a fixed offset and a logo floats at a fixed coordinate, neither reacts when the viewport shrinks — they just collide. Figma Sites renders your layout faithfully, including its flaws.

The fix is upstream: replace fixed positions with auto-layout frames that define direction, gap, and padding, and let content dictate size.

How Should You Structure Frames for Responsiveness?

Think in vertical stacks of horizontal rows.

• Page level: vertical auto-layout, one child per section.
• Section level: vertical auto-layout with consistent padding.
• Row level: horizontal auto-layout with wrap enabled.
• Cards: fixed-ish width with a min, so they wrap instead of squeezing.

Use fill container for widths that should stretch and hug contents for widths that should not. Mixing those two carelessly is the most common cause of weird stretching at tablet size.

How Do Breakpoints Work in Figma Sites?

You define breakpoints and then adjust the layout at each one. Figma Sites does not magically reflow a two-column layout into one — you set that yourself.

Do not create five breakpoints. Three cover the vast majority of traffic and are far easier to keep consistent.

What Should You Check Before Publishing?

Run this list at each breakpoint. It catches almost everything.

1. No text overlaps an image or another text block.
2. Buttons are at least 44px tall for touch.
3. Body text stays at 16px or larger on mobile.
4. Long headings wrap instead of overflowing the frame.
5. Images keep their aspect ratio rather than stretching.
6. Horizontal scroll does not appear anywhere.

Number six is the tell. If a page scrolls sideways, something has a fixed width wider than the mobile viewport.

How Do Animations Affect Responsiveness?

Scroll and hover animations are set per breakpoint, and hover is meaningless on touch. If an interaction relies on hover to reveal content, mobile users will never see it. Set those elements to a visible default state on the mobile breakpoint.

Heavy scroll animations also hit performance on older phones. Test on a real device, not just the Figma preview, before shipping a page full of parallax.

What Is Still Hard?

Truly fluid typography — text that scales smoothly between breakpoints — needs manual per-breakpoint sizes rather than a smooth curve. And complex grids with mixed column counts per section stay fiddly. Budget extra time for any layout that is not a straightforward stack.

Quick Summary

• Auto-layout, not fixed positioning, is what makes a page responsive.
• Define three breakpoints: desktop, tablet, mobile.
• Explicitly reflow multi-column layouts to single column on mobile.
• Check overlap, tap size, and horizontal scroll before publishing.
• Never hide content behind hover on the mobile breakpoint.

Direct answer: Turn your frame into a Site, add responsive breakpoints and interactions in Figma, then publish to a figma.site subdomain or connect a custom domain.

What Is Figma Sites, Exactly?

It is a publishing layer inside Figma. You mark a frame as a site, and Figma renders it as HTML with layout that responds to screen size. It supports scrolling pages, sticky elements, and a simple content system so repeated blocks can pull from data.

The key word is inside. You do not leave Figma, and the file remains editable design rather than generated code you must maintain separately.

How Do You Publish Your First Site?

1. Design the page in a normal Figma frame.
2. Select the frame and choose Create Site.
3. Set breakpoints — desktop, tablet, mobile — and fix layout at each.
4. Add interactions and any scroll or hover animation.
5. Click Publish and pick a subdomain, or add your own domain.

Step three is the one people skip. A design that looks right at 1440px can overlap badly at 375px, and Figma Sites will not fix that for you.

What Features Should You Expect?

Marketing pages, portfolios, and landing pages fit comfortably. Applications and anything needing server logic do not.

Does It Cost Extra?

Figma Sites publishing is tied to paid Figma plans. The free plan lets you design but limits who can publish and where. Check your seat type before promising a client a live URL — discovering you cannot publish on deadline is a bad afternoon.

How Does It Compare to a Traditional Site Builder?

Against Webflow or Framer, Figma Sites wins on one thing: zero translation loss. What you designed is what ships. It loses on depth — no advanced form handling, limited custom code, and a smaller ecosystem of integrations.

If your team already lives in Figma, the workflow win is real. If your site needs e-commerce, logins, or complex CMS relations, you will hit the ceiling fast.

Where It Falls Short

Search engine control is thin compared with a real CMS. There is minimal custom code, so analytics scripts and third-party widgets are awkward. And the CMS is simple — multi-reference collections that Webflow handles easily are not there yet.

Another limit: heavy animations can hurt load time, and you have few tools to optimize them.

Who Should Use It

Designers who want to ship a portfolio without a developer, and marketing teams producing landing pages that change often. Skip it for content-heavy blogs, web apps, or anything where the site is the product. This is a publishing surface for design work, not a platform for building software.

Quick Summary

• Figma Sites publishes design frames as real responsive web pages.
• Set breakpoints manually — layout is not auto-fixed per screen.
• Publishing requires a paid Figma plan.
• Strong for landing pages and portfolios, weak for apps and complex CMS.
• Best when your team already designs in Figma.