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 Modo de Desarrollo de Figma. Vista previa de componentes de ejemplo que reflejan el marco de tu código de producción.

Al utilizar Code Connect, el Modo de Desarrollo 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 Modo de Desarrollo 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 Modo de Desarrollo.
   • 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
   • SwiftUI
   • Jetpack Compose
   • Aplicaciones personalizadas
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 Modo de Desarrollo.
4. Revisión en el Modo de Desarrollo. En el Modo de Desarrollo, 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 empezar a utilizar Code Connect, consulta los LÉEME detallados que proporcionamos en el repositorio de Code Connect en GitHub.

Code Connect es compatible con lo siguiente:

• React →
• SwiftUI →
• Jetpack Compose →

Privacidad y Code Connect

Figma solo recoge los datos mínimos necesarios para habilitar Code Connect en la interfaz. Al ejecutar figma connect mediante 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.