FIGMA FOR WEB DEVELOPMENT
Go from idea to website fast
Figma helps web development teams brainstorm, design, and build faster, together.
![A graphic representation of the Dev Mode toggle, a CSS box model, and prototyping noodles. There’s a smiley face, too.](https://cdn.sanity.io/images/599r6htc/regionalized/ed9594ace473af842a0a7515419b8c01557ff757-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Trusted by teams at
![vercel logo](https://cdn.sanity.io/images/599r6htc/regionalized/926e3cc5c12733ada700593e419dc2c5b522a95f-292x66.png?rect=0,1,292,64&w=137&h=30&q=75&fit=max&auto=format)
Building great web experiences is hard. Figma makes it easier.
Figma brings web design and development teams together on one platform.
Ship the site you envisioned
With prototyping designers can communicate the full design vision, including animations and interactions, to their development partners—reducing back and forth and miscommunication.
![Panels outlining icons, color styles, and type and layout styles for a mobile screen from an e-commerce site.](https://cdn.sanity.io/images/599r6htc/regionalized/ab3268938592549a5a2de059c1610bfbb080091e-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Align design and code
Use a shared design system with code-aligned components and styles to reduce inconsistencies and speed up development.
![A light mode and dark mode view of app product shots for exporting](https://cdn.sanity.io/images/599r6htc/regionalized/8aba504f624298af854a8e5a4ce2b4c1d4a25746-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Make handoff efficient
With Dev Mode developers get a dedicated space in Figma where they can see what is ready to be built, compare changes across versions, and see annotations from designers.
Explore features for web development
![A panel view of boolean properties for an “Add to Basket” button component.](https://cdn.sanity.io/images/599r6htc/regionalized/b9cff110ea99245b350325ed17628a2594d54422-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Connect components to code
Use component properties to make components more customizable and map to React properties.
![A representation of the Asana widget in FigJam on a purple background.](https://cdn.sanity.io/images/599r6htc/regionalized/21e1a20b163e2e8b16397715b0df778fec42ce62-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Integrate with your tech stack
Connect your Figma files to other tools, like Asana and Microsoft Teams, with helpful integrations that keep you organized and efficient.
![A diagram connecting a purple FigJam icon, blue Figma icon, and green Dev Mode toggle icon.](https://cdn.sanity.io/images/599r6htc/regionalized/41f228a7719550ec384841e0ad7735244132856a-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Create custom workflows
Automate tasks, bring data into your designs, and boost collaboration with a wide range of plugins and widgets created by—and for—the community.
No matter the discipline, everyone has a centralized location to view, understand, and contribute to the work.
Levon Sharrow, Patagonia's Director of Experience Design
![patagonia logo](https://cdn.sanity.io/images/599r6htc/regionalized/0e7e7d779266f598289928976e8b4a3798234310-1202x556.png?w=160&h=74&q=75&fit=max&auto=format)
Learn more about web development best practices
![The Figma logo on a multi-color background, with a yellow cursor chat that says “Sweeeeet!”](https://cdn.sanity.io/images/599r6htc/regionalized/6f9cdd24ac0f698c60d972961280426b972d9d7c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
How Figma built our website design system
A look at how the Figma marketing team built, and continues to build, the design system for figma.com.
![Search results for “web” in Figma’s community.](https://cdn.sanity.io/images/599r6htc/regionalized/292a176971797f12180ba6bedddfea3f92adc28e-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Web development resources
Browse inspiration, tools, and templates for web development—created and curated by the Figma community.
![A developer cursor selecting a green circle and viewing hex codes for brand colors in a design system library.](https://cdn.sanity.io/images/599r6htc/regionalized/339a85a7edb268c4ae323eb8038b25f351e8d676-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Guide to better developer handoff
Read a collection of best practices from the experts.