Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
La colaboración fluida con los desarrolladores en una parte importante de lo que ofrece Figma a los diseñadores. Por ello, en este tutorial de Figma vamos a descubrir consejos y trucos sobre cómo transferir y testear nuestros diseños.
Mira los trucos en este video sobre Figma y diseño
1. Salida a través de la pestaña código
En este primer consejo de nuestro tutorial de Figma vamos a ver cómo exportar tu documento a código. Cuando creas que tus diseños han alcanzado un punto en el que deben ser transferidos y trasladados a código, fíjate en la pestaña Code (Código) de la parte izquierda de la pantalla. Allí encontrarás todo tipo de código que puede ser generado automáticamente para ti. Con un elemento seleccionado serás capaz de ver código CSS, código para iOS, y código para Android.
2. Genera código preparado para ser pegado
Figma te permite generar código y pegarlo directamente en tu portapapeles de modo que esté listo para ser pegado en el editor de código. Para ello, selecciona un objeto y a continuación dirígete a Menu > File > Copy as (Menú > Archivo > Copiar como), después Copy as CSS (Copiar como CSS), Copy as Text (Copiar como texto), o Copy as SVG (Copiar como SVG).
3. Testea en dispositivos móviles con la aplicación Figma Mirror
Figma proporciona una aplicación "espejo" denominada Figma Mirror (disponible para Android e iOS) que te ayuda a comprobar tu diseño en dispositivos móviles. Una vez descargada, inicia sesión en la app usando la misma cuenta que estás usando en tu ordenador. Selecciona un marco Figma de diseño en tu ordenador y lo verás "reflejado" en tu dispositivo móvil.
4. Utiliza la aplicación de Figma Mirror en el navegador
También puedes usar la aplicación Figma Mirror en el navegador visitando www.figma.com/mirror (la URL figma.com/mirror-app mencionada en el video ya no es válida). De la misma manera que en la aplicación móvil Figma Mirror, selecciona un marco de Figma del diseño y visualízalo a través de emulador del navegador móvil en una nueva pestaña del mismo.
5. Activa la “Previsualización de pixel” para comprobar la salida rasterizada
También puedes revisar tus gráficos vectoriales para ver qué aspecto tendrán una vez exportados como gráficos rasterizados. Para ello, asegúrate de no tener nada seleccionado en Figma del diseño (lo que te dará acceso a los ajustes universales para el documento), después marca la Previsualización de pixel en el panel Diseño.
Por defecto la previsualización resultante te proporcionará una versión 1x, pero también puedes seleccionar 2x para obtener una previsualización de como serán renderizados los píxeles en dispositivos de alta resolución (DPI).
Recursos para aprender cómo usar Figma
Aquí concluimos con nuestro tutorial de Figma con trucos para el testeo y sobre cómo trasladar a código, aprende más con nuestra serie de cursos sobre Figma y diseño:
- Recopilación de consejos de Carmel DeAmicis y Valerie Veteto para su fiel comunidad de seguidores. ¡Échales un vistazo!
- blog.figma.com
- www.figma.com
- Aplicación Figma Mirror
El kit UI usado en este tutorial es completamente compatible con Figma y está disponible en Envato Elements:
Aprende cómo usar Figma
Hemos creado una guía completa para ayudarte y enseñarte cómo usar Figma para diseño, con independencia de que seas un principiante en el uso de las herramientas de Figma, o quieras llevar tus habilidades al siguiente nivel.
By
