Code Connect

Code Connect es una herramienta para desarrolladores que sirve de puente entre tu código base y Figma. Con Code Connect, puedes integrar el código de componentes de sistema de diseño en el Dev Mode de Figma. Obtén una vista previa de los componentes que coinciden con el marco de trabajo de tu código de producción.

Al usar Code Connect, Dev Mode muestra fragmentos de código reales definidos por tu sistema de diseño en lugar de los fragmentos autogenerados que Dev Mode proporciona por defecto. Además de conectar las definiciones de componente, Code Connect también puede asignar propiedades del código a Figma, lo que da lugar a fragmentos dinámicos y correctos.

Code Connect es especialmente útil si ya tienes un sistema de diseño y quieres promover una adopción coherente y correcta de dicho sistema en las funciones de diseño e ingeniería.

Resumen

Los pasos concretos que deberás seguir para configurar Code Connect dependerán de la arquitectura de tu sistema de diseño y del código base. Por ejemplo, si usas SwiftUI, deberás utilizar los recursos de SwiftUI que proporcionamos.

Por lo general, deberás seguir estos pasos para ponerte en marcha:

1. Planifica la implementación. Normalmente, implica lo siguiente:
   • Identifica los requisitos de tus desarrolladores front-end, como la compatibilidad con React o SwiftUI.
   • Identifica los componentes de tu código base que deseas integrar con Dev Mode.
   • Planifica la configuración de Code Connect y de las asignaciones de los componentes.
2. Accede al repositorio de Code Connect. Code Connect es compatible con lo siguiente:
   • React
   • SwiftUI
   • Jetpack Compose
   • Implementaciones personalizadas
3. Implementa las asignaciones de componentes. La forma exacta en la que desarrolles las asignaciones dependerá de tu código base y del sistema de diseño, pero en general el proceso implica asignar propiedades de los componentes de tu sistema de diseño a Figma. De esta manera, Code Connect puede generar fragmentos de código que asignan valores de Figma a la arquitectura de tus componentes, fragmentos que luego aparecen en Dev Mode.
4. Revisa en Dev Mode. En Dev Mode, revisa los resultados de Code Connect con tus desarrolladores y diseñadores para garantizar la validez práctica de los ejemplos de componentes y asegurarte de que las representaciones son precisas.

Para sacar el máximo partido de Code Connect, los desarrolladores responsables de los componentes del sistema de diseño deben colaborar con los diseñadores para implementar las asignaciones de tu código base de producción en Figma.

¿Qué hay disponible?

Para empezar a trabajar con Code Connect, echa un vistazo a los archivos README detallados que proporcionamos en el repositorio de Code Connect en GitHub.

Code Connect es compatible con:

• React →
• SwiftUI →
• Jetpack Compose →

Privacidad y Code Connect

Figma únicamente recopila los datos mínimos necesarios para activar Code Connect en la interfaz. Cuando ejecutas Figma connect mediante la interfaz de línea de comandos de Code Connect, Figma recibe los siguientes datos:

• Las rutas de los componentes que se añaden
• La URL del repositorio donde se implementan los componentes de Code Connect
• Las propiedades y el código de los archivos de Figma

Figma registra únicamente eventos básicos para comprender el uso de Code Connect: cuándo se publican o despublican los componentes, así como las llamadas para obtener datos de Figma al utilizar la interfaz de línea de comandos.

Para obtener más información sobre el enfoque de privacidad de Figma, consulta la Política de privacidad.