Pular para o conteúdo principal

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.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.

Equipes que confiam no Figma

logo da Netflixlogo da patagonialogo da Stripelogo da Spotifylogo da vercellogo da vercel

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.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.

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çãoUma visualização em modo claro e em modo escuro de cenas de produtos de aplicativos para exportação

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”.A visualização de um painel de propriedades booleanas para um componente do botão “Adicionar à cesta”.

Conecte componentes ao código

Use propriedades de componentes para torná-los mais personalizáveis ​​e mapeá-los para propriedades do React.

Saiba mais

Representação de um widget da Asana no FigJam em um plano de fundo roxo.Representação de um widget da Asana no FigJam em um plano de fundo roxo.

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.

Veja todas as integrações

Um diagrama conectando um ícone roxo do FigJam, um ícone azul do Figma e um ícone verde de alternância do Dev Mode.Um diagrama conectando um ícone roxo do FigJam, um ícone azul do Figma e um ícone verde de alternância do Dev Mode.

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.

Explore os plugins

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

logo da patagonia
Leia a história

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.O logotipo da Figma em um plano de fundo multicolorido, com a palavra “Sweeeeet!” dentro de um balão de cursor amarelo.

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.

Leia o artigo

Resultados da pesquisa para “web” na Figma Community.Resultados da pesquisa para “web” na Figma Community.

Recursos para desenvolvimento web

Encontre inspiração, ferramentas e modelos para desenvolvimento web criados e selecionados pela Figma Community.

Explore os recursos

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.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.

Guia para melhorar o handoff ao desenvolvedor

Leia uma coleção de boas práticas segundo especialistas.

Obtenha o guia

Perguntas frequentes