Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma
Webdesign

Traspaso de Figma y consejos de prueba

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Figma Tips and Tricks.
Figma Layout Tips
Figma General and Miscellaneous Tips

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.

Output Via the Code Tab

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.

Generate Code Ready For Pasting

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.

Test on Mobile With Figmas Mirror App

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.

Use Figmas Mirror App in the Browser

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.

Turn on Pixel Preview to Check Raster Output

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:

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

Finance Mobile App Template UI Kit
Kit de interfaz de usuario de la aplicación móvil de Finanzas
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.