Os trechos de código aparecem no painel de inspeção do Dev Mode quando um objeto é selecionado na tela. A seção Code fornece detalhes relevantes do componente e gera código com base na seleção e nas preferências de idioma definidas no painel de inspeção:

• Quando o texto é selecionado, a seção Code exibe uma visualização tipográfica, seguida de informações sobre layout, tipografia e conteúdo.
• Com todas as outras seleções, é exibido um modelo de caixa com detalhes de margem, borda e espaçamento interno, além de informações de layout e estilo.

Definir as preferências de idioma

Você pode definir seu idioma e unidade preferidos para trechos de código em Code settings no painel de inspeção. As configurações de idioma e unidade serão aplicadas a todos os trechos de código gerados para objetos selecionados no canvas.

1. Desmarque todos os objetos na tela.
2. Selecione uma opção no menu suspenso Language:
   • CSS (Web)
   • SwiftUI ou UIKit (iOS)
   • Compose ou XML (Android).
3. No menu suspenso Unit, selecione uma unidade. As unidades disponíveis dependem da seleção do idioma.

Alterar preferências de idioma e unidade

Depois de selecionar um objeto, você pode alterar a seleção de idioma e unidade na seção Code do painel de inspeção.

1. No canto superior direito da seção Code, selecione uma linguagem no menu suspenso.
2. Click Inspect settings and select a unit from the dropdown.

Definir escala da unidade

O dimensionamento de unidades permite definir as dimensões da unidade em relação a um tamanho especificado. Por exemplo, você pode definir um tamanho de fonte raiz para rems de CSS ou um fator de escala para ajustar dimensões em pontos do iOS.

Para ajustar a escala da unidade para o idioma e a unidade selecionados:

1. Selecione um objeto no canvas.
2. Na seção Code do painel de inspeção, clique em [ícone de configurações de inspeção] Inspect settings ao lado do menu suspenso de idioma.
3. Selecione Set unit scale…
4. Dependendo da preferência de unidade, insira ou selecione a escala no modal Unit scale.
5. Click .

Visualizar trechos de códigos

Os trechos de código são gerados quando você seleciona um objeto no canvas enquanto está no Dev Mode. A seção Code exibe informações relevantes, dependendo do tipo de objeto e do idioma selecionado.

Embora a maioria dos objetos na tela gere trechos de código semelhantes, as seleções de texto variam um pouco. A seção Code exibe uma visualização tipográfica em vez de um modelo de caixa, seguida por trechos de código de informações tipográficas relevantes.

Todas as variáveis atribuídas a um objeto selecionado também aparecem no trecho de código. A sintaxe de código permite representar variáveis no código usando nomes de variáveis válidos para oferecer suporte a uma experiência de transferência contínua.

Saiba mais sobre a sintaxe de código e variáveis no Figma Design →

Copiar trechos de código

Você pode copiar um trecho de código e transferi-lo para um editor de texto. Para copiar um trecho de código:

1. Selecione o objeto para o qual deseja gerar o código.
2. Localize o trecho de código que deseja copiar na seção Code do painel de inspeção.
3. Passe o mouse sobre o trecho de código e clique em Copy no canto superior direito.

Code Connect

O Code Connect é uma ferramenta destinada a equipes de engenharia e sistemas de design para levar o código do componente ao Dev Mode. Ao inspecionar um componente com trechos de códigos conectados, os desenvolvedores veem o código do design system de suas próprias bibliotecas, não um código gerado automaticamente.

O Code Connect é construído na API do Figma e é totalmente personalizável para dar suporte a múltiplos design systems, produtos e linguagens.

Confira o hub Code Connect para aprender como sincronizar trechos de código personalizados a componentes →

Depois que o Code Connect for implementado, seus trechos de código do Dev Mode dirão que estão conectados e mostrarão trechos da biblioteca da sua organização.