Usar fragmentos de código en Dev Mode
Antes de empezar
Quién puede utilizar esta función
Included in a full Design seat on Professional, Organization, and Enterprise plans.
Anyone with access to Dev Mode can use Dev Mode features.
Code Connect está disponible en los planes Organización y Empresa, y requiere un puesto completo de diseño o de Dev Mode.
Los fragmentos de código aparecen en el panel Inspeccionar de Dev Mode cuando se selecciona un objeto en el lienzo. La sección Código proporciona detalles relevantes de los componentes y genera código basado en la selección y las preferencias de idioma establecidas en Inspeccionar:
- Cuando se selecciona texto, la sección Código muestra una vista previa tipográfica, seguida de información sobre la disposición, la tipografía y el contenido.
- Con todas las demás selecciones, se muestra un modelo de cuadro con detalles de margen, borde y margen interior, junto con información de disposición y estilo.
Nota: Puedes usar la herramienta Code Connect de Figma para personalizar fragmentos de código para los componentes del sistema de diseño. Con Code Connect, los desarrolladores verán el código del sistema de diseño conectado de sus bibliotecas en lugar de código generado automáticamente al inspeccionar componentes en Dev Mode.
Obtén más detalles sobre la implementación de Code Connect en nuestros documentos de API →Establecer preferencias de idioma
Puedes establecer tu idioma y unidad preferidos para los fragmentos de código en Configuración de código en el panel Inspeccionar. La configuración de idioma y unidad se aplicará a todos los fragmentos de código generados para los objetos seleccionados en el lienzo.
- Deselecciona todos los objetos del lienzo.
- Selecciona una opción del menú desplegable Idioma:
- CSS (Sitio web)
- SwiftUI o UIKit (iOS)
- Compose o XML (Android).
- En el menú desplegable Unidad, selecciona una unidad. Las unidades disponibles dependen de la selección de idioma.
Cambiar el idioma y las preferencias de la unidad
Una vez que hayas seleccionado un objeto, puedes cambiar el idioma y la selección de unidades en la sección Código del panel Inspeccionar.
- En la parte superior derecha de la sección Código, selecciona un idioma en el menú desplegable.
- Click Inspect settings and select a unit from the dropdown.
Configura la escala de unidad
El escalado de unidades te permite establecer dimensiones de unidades en relación con un tamaño especificado. Por ejemplo, puedes establecer un tamaño de fuente raíz para CSS rems o un factor de escala para escalar dimensiones en puntos de iOS.
Para ajustar la escala de unidades para el idioma y la unidad seleccionados:
- Selecciona un objeto en el lienzo.
- En la sección Código del panel Inspeccionar, haz clic en [icono de inspección de configuración] Inspeccionar configuración junto al menú desplegable de idioma.
- Selecciona Configurar la escala de unidad...
- En función de la unidad preferida, introduce o selecciona la escala en el modal Escala de unidades.
- Click .
Ver fragmentos de código
Los fragmentos de código se generan cuando seleccionas un objeto en el lienzo mientras está en Dev Mode. La sección Code (Código) muestra información relevante en función del tipo de objeto y el idioma que selecciones.
Aunque la mayoría de los objetos del lienzo generarán fragmentos de código similares, las selecciones de texto varían ligeramente. La sección Código mostrará una vista tipográfica en lugar de un modelo de cuadro, seguida de fragmentos de código de información tipográfica pertinente.
Cualquier variable asignada a un objeto seleccionado también aparecerá en el fragmento de código. La sintaxis de código permite representar variables en el código empleando nombres de variables válidos para favorecer una experiencia de entrega sin inconvenientes.
Obtén más información sobre la sintaxis del código y las variables en Figma Design ->
Consejo: Puedes ampliar la funcionalidad de los fragmentos de código con plugins o crear fragmentos de código personalizados para el desarrollo utilizando la API de Plugin de Figma.
Copiar fragmentos de código
Puedes copiar un fragmento de código y transferirlo a un editor de texto. Para copiar un fragmento de código:
- Selecciona el objeto para el que deseas generar código.
- Busca el fragmento de código que deseas copiar en la sección Código del panel Inspeccionar.
- Coloca el cursor sobre el fragmento de código y haz clic en Copiar en la esquina superior derecha.
Code Connect
Code Connect es una herramienta para que los sistemas de diseño y los equipos de Ingeniería lleven el código de los componentes a Dev Mode. Al inspeccionar un componente con fragmentos de código conectados, los desarrolladores verán código del sistema de diseño procedente de sus bibliotecas en lugar de código generado automáticamente.
Code Connect se basa en la API de Figma y es totalmente personalizable para admitir múltiples sistemas de diseño, productos e idiomas.
Una vez implementado Code Connect, los fragmentos de código de Dev Mode dirán conectado y mostrarán fragmentos de las bibliotecas de tu organización.