Dominar la herramienta de diseño de Figma: consejos útiles e instructivos

Todos los que han trabajado con Google Docs saben lo conveniente que es: fácil de editar, colaborar y guardar sus archivos en la web. ¿Y si los diseñadores web tuvieran la misma herramienta para sus proyectos? Bueno, en realidad tienen uno y es Figma. En esta revisión de Figma, lo guiaremos a través de las características más brillantes de la plataforma que la convierten en la herramienta elegida por los diseñadores.

Que es Figma

Figma es una herramienta de diseño basada en la nube que, a diferencia de otras herramientas de diseño populares que funcionan exclusivamente en Mac OS o Windows, también puede funcionar en Linux. Así, esta plataforma permite la colaboración de diseñadores que utilizan diferentes sistemas operativos y necesitan generar código SVG, CSS y código iOS o Android para su trabajo.

La plataforma permite a sus usuarios crear diseños, hacer prototipos y recopilar comentarios en una sola plataforma.

Por qué utilizar Figma

Antes de adentrarnos en las bellezas de la herramienta de diseño Figma, echemos un vistazo a lo que hace que esta plataforma sea tan atractiva para los diseñadores.

1. Está basado en la web. Figma se ejecuta en su navegador y puede trabajar en sus proyectos sin tener que guardarlos como archivos separados en su computadora; todas las ediciones se guardan automáticamente en su nube. Pero recuerde, necesitará una conexión a Internet activa para guardar todos los cambios.
2. Permite el trabajo en equipo . Con Figma, puede tener un equipo de dos a un número ilimitado de editores, todo dependiendo de su plan de precios. Siempre podrá ver cuántos miembros del equipo están trabajando en un solo proyecto y qué cambios están haciendo.
3. Es gratis para diseñadores en solitario. Todas las funciones son de uso absolutamente gratuito sin ningún período de prueba.

En general, Figma tiene tres planes de precios. Descubramos qué funcionalidad proporciona la plataforma para cada uno de ellos.

Planes de precios de Figma

Empezando con Figma

Al registrarse, el usuario recibe un correo electrónico de bienvenida con los enlaces necesarios para la incorporación: centro de ayuda, tutoriales en video, foro y recursos útiles.

Además, cuando los usuarios comienzan a trabajar con la herramienta, se les ofrece un recorrido rápido por la plataforma. Puede trabajar en línea y descargar la versión de escritorio de Figma para configurar su flujo de trabajo fuera de línea. De hecho, la interfaz es bastante intuitiva, con el Panel de capas, que incluye los elementos de su proyecto, una barra de herramientas con herramientas y opciones disponibles, y el Panel de propiedades, todo en el lado derecho.

Ahora describamos las características y opciones más destacadas de Figma y veamos cómo puede aplicarlas.

Funciones de Figma y opciones útiles

Creación de prototipos

Figma le permite crear una versión en la que se puede hacer clic de un sitio web o una aplicación creando tantas pantallas como necesite. De esta manera, podrá probar, editar o ajustar cualquier función (funcionalidad de botón, desplazamiento de elementos, animación de ventana modal) sin tener que cambiar entre las pestañas. Podrá crear conexiones y puntos de acceso para su diseño para simular cómo se verá en un entorno real.

Simplemente cambie a Prototipo en el Panel de propiedades y comience a crear rutas e interacciones.

Componentes

Estos son elementos de la interfaz de usuario que se pueden reutilizar en sus proyectos. Esta función le permite crear componentes simétricos volteándolos o repetir patrones colocando en mosaico los componentes. Puede crear componentes a partir de botones, campos o menús. Para crear un componente maestro, haga clic en el botón Crear componente en el menú de opciones o haga clic con el botón derecho en la capa y elija la opción Crear componente.

Puede reutilizar componentes maestros creando instancias. También puede crear estos componentes a partir de elementos de la interfaz de usuario como colores, bloques, botones, formas y páginas de destino como componentes separados.

Para crear componentes de instancia, elija el componente maestro, mantenga presionada la tecla de acceso rápido (Alt o D para Windows y Mac OS respectivamente), arrastre la instancia desde el componente y péguela en otra ubicación si es necesario.

Recuerde, las instancias que crea están vinculadas a los componentes maestros, lo que significa que todos los cambios que realice en este último se aplicarán a todos los primeros. Por ejemplo, al actualizar la forma o el color del botón en el Componente maestro, actualizará sus componentes secundarios en el diseño de su sitio web.

Redes vectoriales

Esta función de Figma le permite crear formas vectoriales complejas ya que ya no está limitado por solo dos líneas que provienen de dos puntos. Puede utilizar la herramienta Pluma para dibujar líneas adicionales desde cualquier punto de la forma que ha creado.

Además de eso, Vector Networks puede facilitar su rutina HTML, ya que puede copiar el código SVG de una fuente externa y pegarlo como una capa vectorial directamente en Figma. También puede copiar vectores Figma como códigos SVG. Para hacer esto, simplemente haga clic derecho en el elemento, elija copiar como SVG y pegue el código en el HTML o en cualquier proyecto web que esté creando.

Comentarios, edición y uso compartido integrados

Con Figma, puede crear un equipo y seleccionar lo que cada miembro del equipo tiene permiso para hacer con sus proyectos: ver o ver y editar también. También puede ver cómo los miembros del equipo actualizan o cambian el diseño en tiempo real.

Su equipo puede dejar comentarios o discutir cualquier elemento del proyecto directamente en el área de trabajo y fijarlo en cualquier lugar del lienzo, como en Google Docs. Para dejar sus comentarios, elija el bocadillo en el menú superior, haga clic en el elemento que le gustaría comentar y escriba sus comentarios.

Control de versiones

Con Figma, puede realizar un seguimiento del historial de cada colaborador e incluso volver a la versión anterior. El servicio guarda automáticamente las versiones cuando los usuarios cierran la pestaña con el proyecto o si no se han realizado cambios en 30 minutos. Para acceder rápidamente a esta opción, seleccione el icono desplegable a la izquierda del nombre del proyecto en la barra de herramientas. Verá el historial de versiones a su derecha con una opción para nombrar, restaurar o duplicar una versión específica.

Herramienta de diseño Figma en acción

Al familiarizarnos con la plataforma y su funcionalidad, decidimos probar las opciones de diseño de Figma y crear una página simple para un libro electrónico. Primero, hicimos clic en el signo "+" en el menú superior. A continuación, hicimos clic en el icono "Marco" en la barra de herramientas para crear un marco y organizar nuestro diseño en el lienzo. A continuación, llenamos nuestro proyecto con las capas necesarias (bloques de texto, rectángulos e imágenes) y configuramos todos los espacios entre los elementos.

Esto es lo que logramos crear:

Tenga en cuenta que no podrá realizar una impresión de calidad, ya que la plataforma carece de la paleta principal para pintar, la paleta CMYK, o el cambio de tamaño entre milímetros y centímetros.

Toma final

Figma se siente como una herramienta que ha sido cuidadosamente pensada por diseñadores para diseñadores. La plataforma te permite

• trabaje en línea y guarde sus diseños en una nube sin tener que depender del almacenamiento de su computadora;
• crear diseños en varios sistemas operativos;
• colaborar con el equipo en tiempo real, comentar, editar y compartir los archivos;
• disfrute de funciones útiles como creación de prototipos, redes vectoriales, creación de componentes y sus instancias para editar, probar, ajustar su diseño y ampliar sus posibilidades.

Esperamos que nuestra revisión de Figma haya aclarado los trucos internos de la plataforma y que se haya inspirado lo suficiente para probarla. Crea tus diseños con Figma y proyectos de marketing con SendPulse. ¡Nos vemos!