Tutorial Figma

En este tutorial de Figma, aprenderemos a utilizar la herramienta para crear un prototipo sencillo y una guía de estilo básica. Además veremos la importancia de utilizar Figma y los tipos de cuenta que ofrece. Puedes acceder a tutoriales y guías sobre Figma para aprender todo su potencial en su página oficial, concretamente en las siguientes secciones: figma.com/resource-library/ y help.figma.com/hc/en-us.

1. Tutorial Figma: Introducción

Figma es una herramienta de diseño de interfaz de usuario (UI, User Interface) y experiencia de usuario (UX, User eXperience) que fue lanzada en 2016 por una startup con el objetivo de ofrecer a los diseñadores una plataforma colaborativa y basada en la nube para crear diseños y prototipos de alta calidad. A día de hoy Adobe ha adquirido Figma en busca de ampliar su oferta de herramientas para el sector del diseño.

Actualmente Figma está entre las herramientas mejor valoradas entre diseñadores. Otras herramientas populares son Adobe XD, Sketch o InVision.

Anteriormente, el diseño de interfaces solía realizarse en herramientas de diseño locales, lo que dificultaba la colaboración en tiempo real y la sincronización de los archivos de diseño entre los miembros del equipo. Figma resolvió este problema al permitir a los diseñadores trabajar en un solo archivo en la nube y colaborar de forma simultánea, lo que facilitó la comunicación y la iteración en el proceso de diseño.

Además de su enfoque en la colaboración, Figma también se destaca por su capacidad para crear prototipos interactivos. Los diseñadores pueden agregar interacciones, animaciones y transiciones a sus diseños, lo que les permite simular y probar la experiencia del usuario antes de la implementación.

Figma ha ganado una gran popularidad y ha sido ampliamente adoptado en la industria del diseño. Su uso se extiende a equipos de diseño de empresas grandes y pequeñas, agencias creativas, diseñadores independientes y profesionales de UX/UI en general. Esto se debe a sus numerosas ventajas, como la facilidad de uso, la accesibilidad basada en la nube, las poderosas capacidades de colaboración y la capacidad de integrarse con otras herramientas y flujos de trabajo existentes.

2. Por qué usar Figma

Hay varias razones por las que deberías considerar usar Figma como herramienta de diseño:

1. Colaboración en tiempo real: Permite a los equipos trabajar juntos de manera simultánea en un mismo proyecto. Puedes ver en tiempo real los cambios que realizan tus compañeros, comentar y colaborar de forma efectiva, lo que agiliza el proceso de diseño y mejora la comunicación entre los miembros del equipo.
2. Accesibilidad y compatibilidad: Es una aplicación basada en la nube, lo que significa que puedes acceder a tus diseños desde cualquier lugar y dispositivo con conexión a Internet. Además, Figma es compatible con diferentes sistemas operativos, incluyendo Windows, macOS y Linux, lo que facilita la colaboración entre equipos que utilizan diferentes plataformas.
3. Diseño responsive: Permite crear diseños adaptables a diferentes tamaños de pantalla y dispositivos. Puedes crear componentes y estilos reutilizables, y utilizar la función de diseño automático para ajustar fácilmente los elementos en diferentes resoluciones.
4. Bibliotecas y componentes: Cuenta con bibliotecas de componentes que te permiten crear y mantener una librería de elementos reutilizables en tus diseños. Esto ayuda a mantener la coherencia visual y a acelerar el proceso de diseño.
5. Prototipado interactivo: Permite crear prototipos interactivos y simular la experiencia de usuario. Puedes agregar transiciones, animaciones y enlaces a diferentes pantallas, lo que te permite probar y validar tus diseños antes de la implementación.
6. Integraciones y complementos: Ofrece numerosas integraciones y complementos que amplían su funcionalidad. Puedes conectar Figma con otras herramientas de diseño, desarrollo y colaboración, lo que te permite integrar tu flujo de trabajo existente y optimizar tus procesos.
7. Mercado laboral actual: Actualmente, se ha convertido en una herramienta muy demandada y valorada por las empresas y profesionales del diseño.
8. Handoff: El proceso de “handoff” se refiere a la transferencia de diseños desde el equipo de diseño al equipo de desarrollo. Figma facilita este proceso al permitir a los desarrolladores inspeccionar propiedades, copiar código y exportar recursos directamente desde la plataforma.

3. Tutorial Figma: Limitaciones en la versión gratuita

En la versión gratuita de Figma, existen algunas limitaciones que debes tener en cuenta:

1. Límite de proyectos: La versión gratuita de Figma tiene un límite de 3 proyectos que puedes tener activos simultáneamente. Si superas este límite, deberás archivar o eliminar proyectos antiguos para crear nuevos.
2. Colaboración en tiempo real: La colaboración en tiempo real con otros usuarios está disponible en la versión gratuita, pero solo para dos colaboradores por archivo.
3. Componentes y bibliotecas: La versión gratuita de Figma permite crear y utilizar componentes, pero no permite la creación de bibliotecas compartidas. Por tanto, no podrás compartir bibliotecas de componentes con otros colaboradores.
4. Versionado y historial de cambios: La versión gratuita de Figma no ofrece la función de historial de cambios y versionado avanzado. Solo podrás acceder a las versiones más recientes de tus archivos.
5. Integraciones y complementos: Algunas integraciones y complementos de terceros pueden no estar disponibles en la versión gratuita de Figma. Deberás revisar las opciones disponibles y asegurarte de que se ajusten a tus necesidades.

4. Tutorial Figma: Componentes

En Figma, los componentes son elementos reutilizables que te permiten crear y mantener consistencia en tu diseño. Los componentes son similares a los elementos maestros o símbolos en otras herramientas de diseño, y te permiten actualizar automáticamente todas las instancias de un componente cuando se realiza un cambio en él.

Algunas características y beneficios de los componentes en Figma incluyen:

1. Reutilización: Puedes crear componentes de botones, barras de navegación, tarjetas u otros elementos de diseño que se repiten en tu proyecto. Luego, puedes utilizar estos componentes en múltiples pantallas o diseños, lo que te ayuda a ahorrar tiempo y mantener la consistencia visual.
2. Actualizaciones automáticas: Cuando realizas un cambio en un componente, todas las instancias de ese componente se actualizan automáticamente. Esto es especialmente útil cuando necesitas realizar cambios globales en tu diseño.
3. Interacciones y variantes: Los componentes en Figma pueden incluir interacciones y variantes. Puedes definir diferentes estados o variaciones de un componente, como un botón con diferentes tamaños o estados activo/inactivo.
4. Bibliotecas compartidas: Si trabajas en equipo, puedes crear bibliotecas compartidas de componentes. Esto te permite colaborar de manera más efectiva y mantener la coherencia en tus diseños.
5. Organización y gestión: Figma te permite organizar tus componentes en carpetas y etiquetarlos para una fácil búsqueda y gestión. También puedes utilizar la función «Componentes maestros» para definir componentes globales que se pueden utilizar en varios archivos.

Los componentes son una característica poderosa en Figma que te ayuda a optimizar tu flujo de trabajo y mantener la consistencia en tus diseños. A medida que trabajas en tus proyectos, te recomiendo aprovechar al máximo esta funcionalidad para maximizar la eficiencia y la calidad de tu trabajo.

5. Tutorial Figma: Autolayouts

En Figma, los autolayouts son una característica clave que permite a los diseñadores crear diseños flexibles y adaptables. Los autolayouts permiten organizar y ajustar automáticamente los elementos dentro de un marco o componente en función de las reglas y restricciones establecidas.

Al utilizar autolayouts en Figma, los diseñadores pueden crear diseños responsivos y adaptativos que se ajustan automáticamente a diferentes tamaños de pantalla y contenido. Crear componentes autolayouts requieren una gran inversión de tiempo pero es muy interesante porque facilita poder tener un sistema de diseño duradero y adaptable.

Algunas de las funcionalidades y características clave de los autolayouts en Figma incluyen:

1. Distribución y alineación automática de elementos: Los autolayouts permiten alinear y distribuir automáticamente los elementos dentro de un marco o componente. Esto facilita mantener una estructura coherente y alineada en todo el diseño, sin necesidad de ajustar manualmente cada elemento.
2. Anidamiento de autolayouts: Los autolayouts se pueden anidar dentro de otros autolayouts, lo que permite crear diseños complejos y jerárquicos. Esto es útil para organizar elementos en secciones o grupos específicos, y mantener una estructura ordenada y flexible.
3. Cambios dinámicos: Los autolayouts son dinámicos y responden automáticamente a los cambios en el contenido o en el tamaño del marco. Si se agrega o elimina contenido, los elementos se ajustarán automáticamente para adaptarse al nuevo tamaño.
4. Restricciones y reglas: Los autolayouts permiten establecer restricciones y reglas para controlar el comportamiento de los elementos dentro del diseño. Esto incluye restricciones de tamaño, alineación y espaciado, entre otras.

6. Registro y creación de un proyecto en Figma

Para acceder a Figma entramos en su página oficial. Tras el registro y verificación del correo, tendremos que poner un nombre al equipo de trabajo y, opcionalmente, invitar a otros colaboradores. Posteriormente, escoger el plan gratuito.

7. Tutorial Figma: Cómo crear un prototipo

Veamos los pasos para crear un prototipo en Figma:

Crea un nuevo proyecto:

• Abre Figma y crea un nuevo proyecto en blanco (desde el botón + del menú lateral). En este proyecto verás un lienzo y diferentes menús con opciones para editar el lienzo. En este lienzo iremos creando los frames o marcos que componen nuestro proyecto. Estos frames son contenedores rectangulares que definen una página de un sitio web, una aplicación para móvil, etc.

Crea un frame o marco:

• Define las dimensiones y la orientación del frame (desde el botón «Frame» del menú superior y eligiendo el tipo de diseño: Phone, Tablet, Desktop…). Podrás crear todos los frames que quieras y después desde la pestaña «prototype» puedes crear interacción entre los distintos frames.

Añade elementos básicos:

• Utiliza la herramienta de formas (situada en el menú superior) para añadir bloques básicos como rectángulos, cajas de texto y botones.
• Arrastra y ajusta los elementos para crear la estructura general del frame.

Personaliza elementos:

• Cambia el color y el estilo de los elementos para representar diferentes secciones o elementos de la página (desde el menú lateral derecho, en la pestaña «Design«).

Agrega contenido y detalles:

• Rellena el frame con contenido relevante, como texto, imágenes y datos simulados (por ejemplo con Lorem Ipsum).
• Añade detalles adicionales, como iconos, enlaces y menús desplegables, para hacer el frame más interactivo.

Añade interacción entre varias páginas:

• Crea varios frames que representen distintas páginas.
• Selecciona uno de los contenedores o botones que hayas creado para hacer que cuando se haga clic te lleve a otra página. Es decir, para generar una interacción.
• En la barra superior, selecciona la pestaña «Prototype» para acceder a las opciones de prototipado.
• Haz clic en el botón «Add Interaction» para comenzar a crear la interacción.
• Aparecerá un punto de inicio en el botón seleccionado. Arrastra un conector desde ese punto y suéltalo en la página o sección a la que deseas enlazar.
• Ajusta las opciones de transición y animación según tus preferencias. Puedes elegir entre diferentes tipos de transiciones, como desvanecer, deslizar o mover. Puedes ver más información en help.figma.com/hc/en-us/articles/360039818874-Smart-animate-layers-between-frames
• Repite estos pasos para enlazar otros elementos o botones con diferentes páginas o secciones de tu diseño.
• Una vez que hayas terminado de configurar todas las interacciones, haz clic en el botón «Play» en la esquina superior derecha para ver una vista previa del prototipo interactivo.
• Puedes hacer clic en el botón enlazado para navegar a la página o sección correspondiente dentro del prototipo. Existen otros tipos de acciones, además de «Navigate to«, puedes ver más información en help.figma.com/hc/en-us/articles/360040035874.

Ejemplo de prototipo: También puedes utilizar los contenedores del siguiente ejemplo para realizar tu prototipo.

figma.com/file/nt2aRj0zte3XFCWq4C5E9k/Wireframing-(Copy)?type=design&node-id=0%3A394&mode=design&t=taY90RcY7fvLcFNr-1

Comparte y obtén comentarios:

• Utiliza la función de compartir de Figma para compartir tu frame con otros colaboradores (botón «share«).
• Permite que los usuarios realicen comentarios y sugerencias directamente en el frame.

8. Tutorial Figma: Cómo crear una guía de estilo

Para crear una guía de estilo en Figma (ver tutorial teórico sobre guía de estilo) seguiremos prácticamente los mismos pasos que para crear un prototipo. En el siguiente vídeo se muestra cómo crear una guía de estilo básica con Figma:

Otra opción muy interesante para ir cogiendo soltura con la herramienta, es editar una plantilla ya definida en Figma y modificarla a nuestro gusto. A continuación se muestran varios ejemplos de guías de estilo que se pueden editar en Figma (botón «Open in Figma») y que te pueden servir para crear tu primera guía de estilo. Hay que tener en cuenta que la versión gratuita sólo permite trabajar con 3 proyectos a la vez.

Ejemplo de guía de estilo básica en Figma: figma.com/community/file/1285302140550572429/Hacer-en-Figma-gu%C3%ADa-de-estilo-f%C3%A1cil-para-programador-estudiante%3A-Base-de-Dise%C3%B1o-para-tus-Proyectos

Ejemplo de guía de estilo con más detalle en Figma: figma.com/community/file/1262521864453665328/