FIGMA PARA DESENVOLVIMENTO WEB
Vá da ideia ao site rapidamente
O Figma ajuda as equipes de desenvolvimento web a fazer brainstorm, projetar e construir juntas mais rápido.
![Uma representação gráfica da alternância do Modo de desenvolvimento, um modelo de caixa CSS e noodles prototipados. Também há um rosto sorridente.](https://cdn.sanity.io/images/599r6htc/regionalized/ed9594ace473af842a0a7515419b8c01557ff757-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)
Equipes que confiam no Figma
![logo da vercel](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)
Criar ótimas experiências web é difícil. O Figma facilita o processo.
O Figma une as equipes de design e desenvolvimento web numa única plataforma.
Lance o site que foi idealizado
Com protótipos, os designers podem comunicar aos seus parceiros de desenvolvimento toda a visão de design, incluindo animações e interações, reduzindo idas e vindas e falhas na comunicação.
![Painéis destacando ícones, estilos de cores e estilos de letras e de layouts para uma tela de dispositivo móvel em um site de e-commerce.](https://cdn.sanity.io/images/599r6htc/regionalized/ab3268938592549a5a2de059c1610bfbb080091e-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Alinhe design e código
Use um sistema de design compartilhado com temas e componentes alinhados ao código para reduzir inconsistências e acelerar o desenvolvimento.
![Uma visualização em modo claro e em modo escuro de cenas de produtos de aplicativos para exportação](https://cdn.sanity.io/images/599r6htc/regionalized/8aba504f624298af854a8e5a4ce2b4c1d4a25746-1560x1248.png?w=780&h=624&q=75&fit=max&auto=format)
Torne o handoff mais eficiente
Com o Dev Mode, os desenvolvedores têm um espaço dedicado no Figma onde podem ver o que está pronto para ser construído, comparar alterações entre versões e ver anotações dos designers.
Explore recursos para desenvolvimento web
![A visualização de um painel de propriedades booleanas para um componente do botão “Adicionar à cesta”.](https://cdn.sanity.io/images/599r6htc/regionalized/b9cff110ea99245b350325ed17628a2594d54422-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Conecte componentes ao código
Use propriedades de componentes para torná-los mais personalizáveis e mapeá-los para propriedades do React.
![Representação de um widget da Asana no FigJam em um plano de fundo roxo.](https://cdn.sanity.io/images/599r6htc/regionalized/21e1a20b163e2e8b16397715b0df778fec42ce62-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Integre com seu stack tecnológico
Conecte seus arquivos Figma a outras ferramentas, como Asana e Microsoft Teams, com integrações úteis para manter tudo organizado e eficiente.
![Um diagrama conectando um ícone roxo do FigJam, um ícone azul do Figma e um ícone verde de alternância do Dev Mode.](https://cdn.sanity.io/images/599r6htc/regionalized/41f228a7719550ec384841e0ad7735244132856a-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Crie fluxos de trabalho personalizados
Automatize tarefas, traga dados para seus designs e aprimore a colaboração com uma ampla variedade de plugins e widgets criados pela nossa comunidade.
Não importa a área, todos têm um local centralizado para visualizar, compreender e contribuir com o trabalho.
Levon Sharrow, diretor de design de experiência na Patagonia
Saiba mais sobre melhores práticas de desenvolvimento web
![O logotipo da Figma em um plano de fundo multicolorido, com a palavra “Sweeeeet!” dentro de um balão de cursor amarelo.](https://cdn.sanity.io/images/599r6htc/regionalized/6f9cdd24ac0f698c60d972961280426b972d9d7c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Como construímos o sistema de design para nosso site
Veja como a equipe de marketing do Figma construiu e continua a construir o sistema de design para figma.com.
![Resultados da pesquisa para “web” na Figma Community.](https://cdn.sanity.io/images/599r6htc/regionalized/292a176971797f12180ba6bedddfea3f92adc28e-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Recursos para desenvolvimento web
Encontre inspiração, ferramentas e modelos para desenvolvimento web criados e selecionados pela Figma Community.
![Um cursor de desenvolvedor selecionando um círculo verde e visualizando códigos hexadecimais para cores de marcas em uma biblioteca de sistemas de design.](https://cdn.sanity.io/images/599r6htc/regionalized/339a85a7edb268c4ae323eb8038b25f351e8d676-720x720.png?w=360&h=360&q=75&fit=max&auto=format)
Guia para melhorar o handoff ao desenvolvedor
Leia uma coleção de boas práticas segundo especialistas.