Skip to main content

Figma for web design

Create beautiful, responsive web designs

Figma is the free online platform where people design the world’s best websites together. From wireframe to design to prototype to development—Figma makes web design seamless.

Try for free
A graphic representation of web design screens filled with rainbow illustrations.A graphic representation of web design screens filled with rainbow illustrations.

Trusted by teams at

puma logospotify logopatagonia logostripe logothe new york times logonetflix logo

Responsive web design for any device

Go from idea to implementation fast with designs that work well everywhere.

Team cursors select color styles and auto layout on a webpage.Team cursors select color styles and auto layout on a webpage.

Design faster with the right tools

Jump start your project and design consistently at scale with tools like auto layout, components, styles, and more.

Bring it to life, before development

Show off your vision with interactive no-code prototypes. Get realistic web experience in just a few clicks.

Go from design to live site, faster

Dev Mode adds structure to handoff and makes it easy for developers to find what they need.

Explore features for web design

Design better web experiences, faster, with features that help you build together from start to finish.

A Component Design Kit file with a purple background, button text examples, and color styles.A Component Design Kit file with a purple background, button text examples, and color styles.

Get started with UI kits and templates

Speed up your website design workflow with free component-based wireframe kits built by the Figma Community

Browse the Community

Team cursors surround a mobile app design. A comment says “This direction feels really solid, let’s start prototyping.”Team cursors surround a mobile app design. A comment says “This direction feels really solid, let’s start prototyping.”

Invite collaborators

Invite cross-functional partners and stakeholders to add contextual comments to your web designs for instant feedback.

Start collaborating

A cursor choosing from a menu of custom variables for a buttonA cursor choosing from a menu of custom variables for a button

Align design systems to code

Easily create, maintain, and share components and styles and use the same language across design files and code with tokens.

Learn more about design systems

Two teammate cursors using annotations to document design notes for engineering on an e-commerce product page.Two teammate cursors using annotations to document design notes for engineering on an e-commerce product page.

Build with Dev Mode

Bring clarity to your web designs and give developers the tools they need to translate them into code.

Dive into Dev Mode

No matter the discipline, everyone has a centralized location to view, understand, and contribute to the work.

Lauren LoPrete, Design Systems Lead Dropbox

dropbox logo
Read the story

More resources for web developers

The Figma logo on a multi-color background, with a yellow cursor chat that says “Sweeeeet!”The Figma logo on a multi-color background, with a yellow cursor chat that says “Sweeeeet!”

How we built our website design system

A look at how the Figma marketing team built, and continues to build, the design system for figma.com.

Read the article

Search results for “web” in Figma’s community.Search results for “web” in Figma’s community.

Community resources for web design

Browse inspiration, tools, and templates for web design—created and curated by the Figma community.

Explore the Community

Cursor creating a prototype link connecting a purple product landing page to a detail page.Cursor creating a prototype link connecting a purple product landing page to a detail page.

Figma's guide to prototyping

Learn how to get started with prototyping features in Figma.

Get the guide

FAQs