Publish Your Designs On The Web With Figma Sites | Figma Blog (opens in new tab)

Figma Sites is an all-in-one tool for designing, building, and publishing responsive websites directly within Figma. It replaces the traditional handoff-heavy workflow with an iterative process that combines design, prototyping, interaction, and production. The product is aimed at both designers and teams with limited development resources, while offering advanced customization through responsive layouts, animations, and upcoming AI-powered features.

Design and Publish Directly in Figma

• Users can create live websites without exporting designs or switching to separate development tools.
• The workflow supports portfolios, event websites, landing pages, and other interactive web experiences.
• Templates, responsive web elements, and ready-made interactions provide starting points for teams with limited design or development resources.
• A planned chat-to-code feature, powered by Figma Make, will let users describe interactions or animations for Figma to generate.
• Published design libraries can be connected through the inserts panel, allowing teams to reuse components and styles from their design systems.
• Figma also provides common building blocks such as navigation, hero sections, and complete page layouts.

Responsive Design and Prototyping

• Figma Sites automatically adapts layouts, text, and designs across breakpoints.
• Multi-edit enables simultaneous changes across multiple screen sizes.
• Text styles can define different sizing and spacing for each breakpoint without relying on variables.
• Designers can preview a fully responsive site rendered in HTML and CSS before publishing.
• The preview supports resizing the browser window, observing layout reflow, and switching between breakpoints.
• Interactive previews can be shared with collaborators for feedback.

Built-In Interactions and Motion

Figma Sites includes pre-built effects for creating more dynamic websites, including:

• Mouse parallax
• Lightboxes
• Infinite spinning objects
• Draggable elements
• Typewriter text
• Scrambled text reveals
• Marquee, reveal, and scroll-based effects

The product also introduces interactions not currently available in Figma Design, such as scroll parallax, scroll transforms, and hover or pressed states that do not require interactive components.

Future Customization and AI Features

• Upcoming code layers will allow designers to create interactive experiences without plugins or external tools.
• AI chat will help turn static frames into interactive elements, such as draggable lists or geographically accurate clocks.
• Code layers will eventually support reusable components and instances, similar to Figma Design libraries.
• These features are intended to let designers create increasingly complex web experiences while staying within the Figma workflow.

Figma Sites is best suited to teams that want a direct path from visual design to a published, responsive website. Its templates and built-in interactions simplify production, while code layers and AI features are intended to expand its capabilities for more advanced experiences.