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.

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.

1. Deselecciona todos los objetos del lienzo.
2. Selecciona una opción del menú desplegable Idioma:
   • CSS (Sitio web)
   • SwiftUI o UIKit (iOS)
   • Compose o XML (Android).
3. 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.

1. En la parte superior derecha de la sección Código, selecciona un idioma en el menú desplegable.
2. 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:

1. Selecciona un objeto en el lienzo.
2. 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.
3. Selecciona Configurar la escala de unidad...
4. En función de la unidad preferida, introduce o selecciona la escala en el modal Escala de unidades.
5. 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 ->

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:

1. Selecciona el objeto para el que deseas generar código.
2. Busca el fragmento de código que deseas copiar en la sección Código del panel Inspeccionar.
3. 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.

Consulta el centro de Code Connect para aprender a sincronizar fragmentos de código personalizados con componentes →

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.