Antes de você começar

Quem pode usar este recurso

Disponível em todos os planos pagos

É necessário ter uma licença completa do Design ou uma licença de modo de desenvolvimento

A extensão Figma para VS Code oferece uma forma fácil para que desenvolvedores tenham acesso e inspecionem designs diretamente no VS Code. Você pode navegar e inspecionar arquivos de design, colaborar com designers, monitorar alterações e acelerar a implementação de designs, tudo isso sem sair do seu ambiente de desenvolvimento.

Use a extensão Figma para VS Code para:

• Ver e responder comentários e atividades em tempo real
• Obter sugestões de códigos com base nos designs
• Vincular arquivos de códigos para criar componentes

Abrir designs do Figma no VS Code

Existem algumas maneiras de abrir um arquivo de design por meio da extensão VS Code:

No modo de desenvolvimento

1. Defina CSS como sua linguagem preferencial nas configurações de Código ou na seção Código no painel Inspeção.
2. Clique na estrutura de nível superior.
3. No painel Inspeção, clique em Opções, próximo ao nome da camada.
4. Selecione Abrir no VS Code.

No VS Code

1. Abra o VS Code.
2. Clique em Figma na barra de atividades ou encontre Figma para VS Code em sua lista de extensões.
3. Na barra lateral principal abaixo de Arquivos, clique no design que deseja abrir.

Inspecionar designs do Figma no VS Code

Explorar um arquivo de design no VS Code

A extensão Figma para VS Code estende a funcionalidade dos recursos de inspeção no modo de desenvolvimento e leva os arquivos de design diretamente para seu editor de texto. Ao selecionar um arquivo de design no VS Code, você verá estruturas no arquivo agrupadas por seção, status (por exemplo, pronto para desenvolvimento) e página. Se uma estrutura não tiver uma seção pai ou um status atribuído, ela não ficará visível.

Inspecionar uma estrutura

Selecione em uma grade de estruturas e as veja individualmente com visualização em foco. Pesquise estruturas e filtre os resultados para encontrar rapidamente o que procura.

Veja quais designs estão prontos para desenvolvimento

Clique em Camadas na barra de ferramentas para visualizar as seções marcadas como Prontas para desenvolvimento.

Visualizar trechos de códigos

Visualize trechos de código e informações relevantes, como modos e estilos, na aba Código.

Escolha seu idioma preferencial e a unidade para trechos de código na parte superior direita da barra de ferramentas Inspeção.

Acessar os recursos de desenvolvimento

Acesse links de desenvolvimento relevantes na aba Recursos de desenvolvimento. Clique em Adicionar recursos de desenvolvimento para adicionar um link a um arquivo de código ou recurso de desenvolvimento.

Se um link tiver uma implementação correspondente em sua base de código atual, ele abrirá o arquivo no VS Code e não no navegador.

Vincular recursos de desenvolvimento a camadas no modo de desenvolvimento →

Visualizar as propriedades do componente

Caso tenha um componente selecionado, você pode visualizar suas propriedades na aba Componente.

Exportar ativos

Baixe e exporte ativos para uma camada selecionada na aba Ativos.

Saiba mais sobre seleções de exportação no Figma →

Completar automaticamente sugestões de códigos

A extensão Figma para VS Code oferece sugestões para completar automaticamente com base na camada selecionada. Isso é útil se você deseja criar componentes que não tenham uma implementação existente na sua base de códigos.

Visualizar notificações de comentários

É possível visualizar notificações de comentários em tempo real em Notificações na barra lateral principal. Clique em uma notificação para visualizar e adicionar um comentário ao design por meio do VS Code.

Guia para comentários no Figma →

Executar plug-ins no VS Code

Aproveite ferramentas de terceiros e código personalizado sem sair do editor de código. Confira nossa documentação para aprender como fazer seu plug-in privado funcionar no VS Code →

Sair do Figma para VS Code

1. Dentro do VS Code, pressione Shift Command P para Mostrar e executar comandos.
2. Selecione Figma: sair na lista de opções na barra de pesquisa.