Code Connect

O Code Connect é a ponte do desenvolvedor entre a sua base de código de componentes e o Figma. Com o Code Connect, você leva seu código de componentes de sistema de design diretamente para o Dev Mode do Figma. Visualize exemplos de componentes que refletem a estrutura do seu código de produção.

Ao usar o Code Connect, o Dev Mode exibe trechos de códigos reais, definidos pelo seu sistema de design em vez de trechos de códigos gerados automaticamente que o Dev Mode fornece por padrão. Além de conectar definições de componentes, o Code Connect também consegue mapear propriedades do código para o Figma, proporcionando trechos dinâmicos e corretos.

O Code Connect é especialmente útil se você já tem um sistema de design e deseja promover a adoção consistente e correta dele em design e engenharia.

Visão geral

As etapas específicas a serem seguidas para configurar o Code Connect dependem da arquitetura do seu sistema de design e da sua base de código. Por exemplo, se você usa o SwiftUI, você deverá planejar sua abordagem para usar os recursos de SwiftUI que fornecemos.

Geralmente, sua organização seguirá estas etapas para começar:

1. Planejar a implementação. Normalmente isso inclui:
   • Identificar os requisitos dos desenvolvedores front-end, por exemplo, se há necessidade de suporte a React ou SwiftUI.
   • Identificar os componentes da sua base de código que você deseja integrar ao Dev Mode.
   • Planejar a configuração do Code Connect e os mapeamentos dos seus componentes.
2. Obter o repositório do Code Connect. O Code Connect é compatível com:
   • React
   • SwiftUI
   • Jetpack Compose
   • Implementações personalizadas
3. Implementar os mapeamentos dos componentes. O modo específico como você cria os mapeamentos dependerá da sua base de código e do seu sistema de design, mas amplamente o processo envolve o mapeamento de propriedades dos componentes do sistema de design para propriedades no Figma. Assim, o Code Connect consegue gerar trechos de códigos que mapeiam os valores no Figma para a arquitetura dos seus componentes e depois exibir esses trechos dentro do Dev Mode.
4. Revisar no Dev Mode. No Dev Mode, analise a produção do Code Connect com seus desenvolvedores e designers para garantir a usabilidade real dos exemplos de componentes e a precisão das representações.

Para aproveitar todas as possibilidades do Code Connect, os desenvolvedores responsáveis pelos componentes do seu sistema de design devem trabalhar junto com os designers para implementar os mapeamentos da sua base de código de produção para o Figma.

O que está disponível?

Para começar a usar o Code Connect, confira os READMEs detalhados que disponibilizamos no  repositório do Code Connect no GitHub.

O Code Connect é compatível com:

• React →
• SwiftUI →
• Jetpack Compose →

Privacidade e Code Connect

O Figma apenas coleta os dados mínimos necessários para habilitar o Code Connect na interface. Quando você executa o figma connect usando a interface de linha de comando Code Connect, o Figma obtém os seguintes dados:

• Os caminhos para os componentes que são adicionados
• O URL do repositório no qual os componentes Code Connect são implementados
• As propriedades e o código nos arquivos .figma

O Figma apenas registra eventos básicos para entender o uso do Code Connect: quando os componentes são publicados ou não publicados e chamadas para obter dados do Figma ao usar a interface de linha de comando.

Para obter mais informações sobre a abordagem de privacidade do Figma, consulte a Política de privacidade do Figma.