Spanish (Español) translation by Lina (you can also view the original English article)
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 usuarioIntroducción a FigmaAdi purdila
- FigmaMás allá de lo básico: FigmaAdi purdila
- FigmaUna guía de prototipos en FigmaAdi 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:

Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post