La colaboración fluida con los desarrolladores es una gran parte de lo que Figma ofrece a los diseñadores, ¡por lo que en esta colección de consejos y trucos, veremos el traspaso y las pruebas!

Ver consejos

1. Salida a través de la pestaña Código

Cuando tus diseños hayan alcanzado un punto en el que deben ser entregados y codificados, mira en la pestaña Código a la izquierda de la pantalla. Encontrarás que hay todo tipo de código que se puede generar automáticamente para ti. Con un elemento seleccionado, podrás ver el código CSS, el código de iOS y el código de Android.

2. Generar código listo para pegar

Figma te permite generar código y hacer que se coloque directamente en tu portapapeles para que esté listo para pegar en un editor de código. Para hacerlo, selecciona y objeta, luego ve a Menú> Archivo> Copiar como, luego Copiar como CSS, Copiar como texto o Copiar como SVG.

3. Prueba en el móvil con la aplicación de espejo de Figma

Figma proporciona una aplicación de espejo (disponible en Android e iOS) que ayudará a probar tu diseño en dispositivos móviles. Una vez descargada, inicia sesión en la aplicación con la misma cuenta que usas en tu computadora. Selecciona un marco de tu diseño en tu computadora y lo verás "reflejado" en tu dispositivo móvil.

4. Usa la aplicación espejo de Figma en el navegador

También puedes usar la aplicación espejo de Figma en el navegador visitando www.figma.com/mirror (ya no figma.com/mirror-app como se menciona en el video). Al igual que con la aplicación móvil real, selecciona un marco en tu diseño de Figma y miralo en el emulador del navegador móvil en otra pestaña del navegador.

5. Activa "Vista previa de píxeles" para verificar la salida de raster

Puedes revisar tus gráficos vectoriales para ver cómo se verán exportados como gráficos de raster. Para hacerlo, asegúrate de que no hayas seleccionado nada en tu diseño (lo que te dará acceso a la configuración universal del documento), luego marca Vista previa de píxeles en el panel Diseño.

De forma predeterminada, la vista previa resultante te dará una versión de 1x, pero también puedes seleccionar 2x para obtener una vista previa de cómo se procesarán los píxeles en dispositivos de alto DPI.

Recursos de aprendizaje de Figma

Eso es todo para el traspaso y los consejos de prueba: amplía tu aprendizaje de Figma con nuestra serie de cursos:

• Diseño de interfaz de usuario
  Introducción a Figma
  Adi purdila
• Figma
  Más allá de lo básico: Figma
  Adi purdila
• Figma
  Una guía de prototipos en Figma
  Adi Purdila

• Recibe una lista de sugerencias de Carmel DeAmicis y Valerie Veteto por sus resúmenes de consejos para la comunidad: ¡ve y revísalos!
• blog.figma.com
  
• www.figma.com
  
• Aplicación Figma Espejo

El kit de interfaz de usuario utilizado en este tutorial es totalmente compatible con Figma y está disponible en Envato Elements: