Code Connect

Code Connect est un outil qui permet aux développeurs de relier votre base de codes de composants à Figma. Code Connect vous permet d’importer directement les codes de composants de votre design system dans le Dev Mode de Figma. Consultez des exemples de composants qui illustrent la structure de votre code de production.

Lorsque vous utilisez Code Connect, Dev Mode affiche des fragments de code réels définis par votre design system à la place des fragments de code générés automatiquement, fournis par défaut dans Dev Mode. En plus de relier des définitions de composants, Code Connect peut également faire correspondre des propriétés de code dans Figma, pour obtenir des fragments de code dynamiques et exacts.

Code Connect est particulièrement utile si vous disposez d’un design system existant et que vous souhaitez favoriser l’adoption correcte et cohérente de ce design system au sein de vos équipes de design et d’ingénierie.

Présentation

Les étapes précises pour configurer Code Connect dépendent de l’architecture de votre design system et de votre base de codes. Par exemple, si vous utilisez SwiftUI, planifiez votre approche pour utiliser les ressources SwiftUI que nous proposons.

Dans la plupart des cas, votre organisation suivra les étapes suivantes pour débuter :

1. Planifier l’implementation. Cette étape comprend généralement :
   • l’identification des besoins de vos développeurs front-end, par exemple la prise en charge de React ou de SwiftUI ;
   • l’identification des composants de votre base de codes que vous souhaitez intégrer au Dev Mode ;
   • la planification de la configuration de Code Connect et la modélisation de vos composants.
2. Télécharger le registre Code Connect. Code Connect prend en charge :
   • React
   • SwiftUI
   • Jetpack Compose
   • Custom implementations
3. Implémenter la cartographie des composants. La manière précise de créer cette cartographie dépend de votre base de codes et de votre design system, mais le processus inclut généralement la mise en correspondance des propriétés de cartographie des composants de votre design system dans Figma. Cette étape permet à Code Connect de générer des fragments de code qui mettent en correspondance les valeurs de Figma dans l’architecture de vos composants, puis importent ces fragments de code dans Dev Mode.
4. Passer en revue les résultats dans Dev Mode. Dans Dev Mode, passez en revue les résultats de Code Connect avec vos développeurs et designers pour garantir l’utilité pratique des exemples de composants et l’exactitude des représentations.

Pour profiter pleinement de Code Connect, les développeurs responsables des composants de votre design system doivent collaborer avec vos designers pour implémenter les configurations de votre base de codes de production dans Figma.

Quelles fonctionnalités sont disponibles ?

Avant de commencer à utiliser Code Connect, consultez les fichiers README que nous mettons à votre disposition dans le registre Code Connect repository sur GitHub.

Code Connect prend en charge :

• React →
• SwiftUI →
• Jetpack Compose →

Confidentialité et Code Connect

Figma ne recueille que les données minimales nécessaires pour activer Code Connect dans l'interface. Lorsque vous exécutez Figma Connect en utilisant l'interface en ligne de commande Code Connect, Figma obtient les données suivantes :

• Les chemins d'accès des composants ajoutés
• L'URL de registre dans lequel les composants Code Connect sont mis en place
• Les propriétés et le code des fichiers .figma

Figma n'enregistre que les événements de base pour comprendre l'utilisation de Code Connect : lorsque les composants sont publiés ou dépubliés, et les appels pour obtenir des données Figma lors de l'utilisation de l'interface en ligne de commande.

Pour en savoir plus sur l'approche de Figma en matière de confidentialité, consultez la Politique de confidentialité de Figma.