1. Setup | Figma

Learning Goals

En esta unidad aprenderás

• Qué es Figma
• Cómo crear cuenta en Figma
• Las diferencias entre la versión de escritorio y la versión online
• Cómo crear archivos en Figma
• Cómo es la interfaz de Figma
• Cómo compartir tus archivos con quien quieras!

¿Qué es Figma?

Figma es un editor de gráficos en la nube. Esta aplicación es utilizada principalmente para crear interfaces de usuarios (sí, pantallas), pero además, puedes crear ilustraciones vectoriales y componentes para tus diseños y, además, genera algo de código para facilitar el traspaso a los equipos de desarrollo.

Entre sus principales características:

• Los proyectos se guardan en la nube con control de versiones (historial de cambios). Esto hace que estén disponibles todo el tiempo para todos los usuarios que estén invitados al archivo
• Funciona en el navegador, pero también puedes instalar la versión nativa para tu SO
• Los archivos se guardan automáticamente, no es necesario guardar
• Permite que varias personas se conecten a la vez y colaboren en el mismo archivo en tiempo real
• Permite para crear las interfaces visuales, pero también para diseñar interacciones y la navegación entre ellas
• No es necesario exportar los elementos del archivo, el documento se comparte a través de un enlace (y también se puede compartir directamente el prototipo con interacciones)

Crear cuenta en Figma

Comenzar a trabajar con Figma es muy fácil. Basta con crear una cuenta con cualquier correo electrónico. Una vez llenado el formulario, te llegará un correo para validar la dirección -puede que caiga en la bandeja de elementos no deseados- y ya estás listo para comenzar a trabajar.

Figma en el escritorio

Aunque puedes usar Figma directamente en el navegador, si lo usas mucho, vale la pena descargar la aplicación para escritorio. Solo tienes que ir a la sección de Features / Downloads y buscar tu sistema operativo. Descarga, instala 'et voilá'.

Figma Interface

Tools

Arriba a la izquierda aparece la barra de herramientas. El primer icono (la hamburguesa de menú) lista todas las opciones de Figma. Al hacer click, se puede buscar una acción en el campo de búsqueda libremente o navegando por las opciones del desplegable. Sin embargo, las herramientas que más se utilizan (como los Frames), se pueden acceder directamente en los iconos siguientes. Pasando el ratón por encima de los iconos, se muestra un tooltip con el nombre de cada herramienta.

Pages

Las páginas permiten tener múltiples canvas (o páginas) para cada proyecto. Para añadir una página nueva, es necesario hacer click sobre el caret (el triángulo) y seleccionar el botón de agregar (+). Al desplegar la lista de páginas se puede navegar por el documento

Layers/Assets

La lista de capas es el panel al izquierda. Lista todas las capas, páginas, frames y elementos que hay en una página. Lo usarás frecuentemente para organizar y nombrar las capas y los elementos de tus diseños y también para navegar a través de él.

Puedes ver los atributos de cada capa, si está escondido (con el ícono del ojo) o bloqueado (con el candado). Además, la indentación de los nombres de las capas te ayudará a saber de un vistazo qué elementos están anidados a otros.

Canvas

Es la sección principal de tu ventana. Aquí es donde verás tus diseños. Su tamaño es infinito y puedes moverte en cualquier dirección, así que tienes completa libertad para configurar tu área de trabajo.

Pro Tip: Crea el primer elemento o frame en la posición 0 para X y para Y. De esta manera, te será más fácil ubicar tus diseños. Recuerda que tendrás varios frames pues tendrás uno para cada vista (o incluso más de uno si tienes que mostrar estados diferentes de la aplicación).

Si tecleas la letra F en tu teclado, pero no haces click en el canvas, verás los tamaños predeterminados de cada soporte en el panel derecho.

Inspector

A la derecha de la pantalla conseguirás el Inspector. Se adapta al elemento que tengas seleccionado y cambiará mostrando los atributos del mismo para mostrar las herramientas que necesitas en determinado momento y ocultando las que no necesitas.

Por ejemplo, conseguirás las herramientas para editar texto, redimensionar y alinear objetos, así como también para trabajar con colores, rellenos, bordes y sombras.

Otro aspecto interesante son los tabs que aparecen en la parte superior, te permiten navegar por herramientas de diseño (Design), de interacción (Prototype) y de código (Inspect).

Más Recursos

• Figma - Sitio oficial de Figma
• Figma Finder - Colección de Kits y Recursos de Figma
• Figma Tutorial - Tutorial de principiantes para conocer las principales funcionalidades de Figma