Los fragmentos de código aparecen en el panel Inspección 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 en función de las preferencias de selección e idioma establecidas en Inspección:

• Cuando se selecciona texto, la sección Código muestra una vista previa tipográfica, seguida de información sobre el diseño, la tipografía y el contenido.
• Con todas las demás selecciones, se muestra un modelo de caja con detalles de margen, borde y espaciado, junto con información de diseño y estilo.

Establecer preferencias de idioma

Puedes configurar el idioma y la unidad que prefieras para los fragmentos de código en Configuración de código, en el panel Inspección. 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. Anula la selección de todos los objetos del lienzo.
2. Selecciona una opción del menú desplegable Idioma:
   • CSS (Web)
   • SwiftUI o UIKit (iOS)
   • Compose o XML (Android).
3. En el menú desplegable Unidad, selecciona una unidad. Las unidades disponibles dependen del idioma elegido.

Cambiar el idioma y las preferencias de unidades

Una vez que hayas seleccionado un objeto, puedes cambiar la selección de idioma y unidad en la sección Código del panel Inspección.

1. En la esquina superior derecha de la sección Código, selecciona un idioma del menú desplegable.
2. Click Inspect settings and select a unit from the dropdown.

Establecer la escala de la unidad

La escala 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 los rems de CSS o establecer un factor de escala para adaptar las dimensiones a 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 Inspección, haz clic en [icono de inspeccionar ajustes] Configuración de Inspección junto al menú desplegable de idiomas.
3. Selecciona Establecer escala de la unidad...
4. Según la preferencia de unidad, introduce o selecciona la escala en el modal Escala de la unidad.
5. Click .

Ver fragmentos de código

Los fragmentos de código se generan al seleccionar un objeto en el lienzo mientras se está en Dev Mode. La sección Código muestra información relevante en función del tipo de objeto y el idioma seleccionados.

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 caja, seguida de fragmentos de código con información tipográfica relevante.

Todas las variables asignadas a un objeto seleccionado también aparecerán en el fragmento de código. La sintaxis de código permite representar variables en el código utilizando nombres de variables válidos, favoreciendo así una experiencia de entrega fluida.

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 Inspección.
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 equipos de ingeniería y sistemas de diseño puedan trasladar el código de los componentes a Dev Mode. Al inspeccionar un componente con fragmentos de código conectados, los desarrolladores verán el código del sistema de diseño de sus bibliotecas en lugar del código generado automáticamente.

Code Connect se basa en la API de Figma, es totalmente personalizable y es compatible con varios sistemas de diseño, productos e idiomas.

Echa un vistazo al centro de Code Connect para aprender a sincronizar fragmentos de código personalizados y componentes →

Una vez que Code Connect esté implementado, tus fragmentos de código de Dev Mode indicarán conectado y mostrarán fragmentos de la biblioteca de tu organización.