Code Connect

Code Connect es el puente para desarrolladores entre el código fuente de tus componentes y Figma. Con Code Connect, lleva el código de los componentes de tu sistema de diseño directamente al Dev Mode de Figma. Vista previa de componentes de ejemplo que reflejan el marco de tu código de producción.

Al utilizar Code Connect, el Dev Mode muestra fragmentos de código del mundo real definidos por tu sistema de diseño en lugar de los fragmentos de código autogenerados que el Dev Mode proporciona por defecto. Además de conectar definiciones de componentes, Code Connect también puede asignar propiedades del código a Figma, lo que permite mostrar fragmentos de código dinámicos y correctos.

Code Connect resulta especialmente útil cuando ya se dispone de un sistema de diseño y se desea impulsar la adopción coherente y correcta de dicho sistema en todo el ámbito del diseño y la ingeniería.

Resumen

Los pasos exactos que debes seguir para configurar Code Connect dependen de la arquitectura de tu sistema de diseño y tu código fuente. Por ejemplo, si utilizas SwiftUI, planificarás tu enfoque para utilizar los recursos de SwiftUI que proporcionamos.

Por lo general, tu organización seguirá estos pasos para empezar:

1. Planificar la implantación. Suele incluir lo siguiente:
   • Identificar los requisitos de tus desarrolladores frontend, como si necesitas soporte para React o SwiftUI.
   • Identificar los componentes de tu código fuente que deseas integrar con el Dev Mode.
   • Planificar la configuración de Code Connect y el mapeo de tus componentes.
2. Obtén el repositorio de Code Connect. Code Connect es compatible con lo siguiente:
   • React (o React Native)
   • HTML (Web Components, Angular, Vue, etc.)
   • SwiftUI
   • Jetpack Compose
3. Implementa los mapeos de componentes. La forma exacta de crear los mapeos dependerá de tu código fuente y de tu sistema de diseño, pero, a grandes rasgos, el proceso implica asignar propiedades de los componentes de tu sistema de diseño a propiedades de Figma. Esto permite a Code Connect generar fragmentos de código que asignan los valores de Figma a la arquitectura de los componentes y, a continuación, mostrar dichos fragmentos en el Dev Mode.
4. Revisión en el Dev Mode. En el Dev Mode, revisa el resultado de Code Connect con tus desarrolladores y diseñadores para garantizar la utilidad práctica de los ejemplos de componentes y que las representaciones sean precisas.

Para sacar el máximo partido de Code Connect, los desarrolladores responsables de los componentes del sistema de diseño deben trabajar con los diseñadores para implementar los mapeos del código fuente de producción a Figma.

¿Qué hay disponible?

Para comenzar con Code Connect, echa un vistazo a los pasos detallados que proporcionamos en la documentación para desarrolladores de Code Connect.

Code Connect es compatible con lo siguiente:

• React (o React Native)
• HTML (Web Components, Angular, Vue, etc.)
• SwiftUI
• Jetpack Compose

Además, Code Connect ofrece algunas funciones avanzadas:

• Integración con Storybook
• Analizadores personalizados
• API de plantilla

El repositorio de Code Connect está disponible en GitHub.

Privacidad y Code Connect

Figma solo recopila los datos mínimos necesarios para habilitar Code Connect en la interfaz. Cuando ejecutas figma connect con la interfaz de línea de comandos de Code Connect, Figma obtiene 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 .figma

Figma solo registra los eventos básicos para comprender el uso de Code Connect: cuándo se publican o no se publican los componentes, y las llamadas para obtener datos de Figma cuando se utiliza la interfaz de línea de comandos.

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