Figma: una descripción general y una revisión

Figma es una herramienta de diseño UI / UX con generación de código, maqueta de alta fidelidad y capacidades de creación de prototipos interactivos que se utiliza para diseñar aplicaciones, pantallas e ilustraciones vectoriales. Si bien es principalmente una herramienta basada en navegador que se puede usar en cualquier sistema operativo, también existen versiones de escritorio para Mac y Windows.

Figma siempre se ejecuta en línea, incluso si descarga la aplicación, por lo que es tan excelente para equipos regulares y distribuidos que desean colaborar en diseños en tiempo real. Varios miembros del equipo pueden realizar cambios en un proyecto en vivo y sus diseños siempre estarán sincronizados y actualizados para quienes accedan a ellos.

Cómo funciona Figma

Figma tiene una funcionalidad que es familiar para Adobe XD, Gravit, Sketch y otras herramientas de diseño similares. A pesar de estar basada en un navegador, la interfaz se verá como las que ha visto antes. Muchas de estas herramientas funcionan de la misma manera y difieren cuando se trata de características específicas, como lo que se incluye de fábrica y para qué necesita complementos. También manejan proyectos como maquetas de alta fidelidad y prototipos de manera diferente.

Todo en Figma se basa en capas y cada mesa de trabajo está representada por una capa. Aléjese de la mesa de trabajo para obtener una vista panorámica de todo el proyecto en lugar de centrarse en un solo archivo a la vez. Hay un panel de información a la derecha y herramientas y un panel de capas a la izquierda.

Puede encontrar el panel de información un poco complicado, ya que a veces se requieren clics o pasos adicionales para manipular un objeto después de crearlo; de esta manera, Figma no es tan intuitivo como podría ser. El flujo de trabajo también puede ser un poco complicado, especialmente cuando se trata de reutilizar componentes y agregarlos de su biblioteca.

Herramientas Figma

Figma tiene las herramientas que esperaría del software de diseño, que incluyen:

• Alineación
• Cuadrícula de restricciones
• Comandos booleanos (unir, intersecar, unir, restar)
• Selector de color
• Modo de fusión
• Múltiples rellenos
• Efectos (gota / sombra interior, desenfoque de fondo / capa)
• Herramienta de marco con tamaño personalizado o específico del dispositivo
• Mascaras
• Elementos de forma
• Pluma y herramientas para doblar
• Herramienta de texto
• Bloquear y ocultar capas
• Mover herramienta (puntero / clicker para agarrar elementos)
• Fijación
• Herramienta de zoom

Una cosa que debe saber sobre la herramienta de texto es que no puede desplazarse por las opciones de fuente o ver vistas previas de la topografía. Es mejor conocer la topografía que desea utilizar cuando comience a diseñar.

Características destacadas de Figma

Veamos un poco más en profundidad sobre algunas de las características destacadas de Figma:

• Bibliotecas: cree bibliotecas con componentes reutilizables y dé acceso a todo el equipo. Las bibliotecas de componentes las definen los equipos, por lo que un equipo puede tener una biblioteca y otro equipo puede tener la suya propia. Cuando se actualiza un componente en la biblioteca, se realizan cambios en cada diseño que lo usa. Al actualizar un componente en la biblioteca, confirmará publicar el cambio para no realizar ningún cambio accidentalmente. (Las funciones de "Biblioteca de equipo" son solo para planes pagos).
• Mover: al mover un objeto por el lienzo, las reglas mostrarán su altura y anchura.
• Escala: como de costumbre, la herramienta de escala mantiene todo en proporción. Lo que es exclusivo de Figma es que la escala es una herramienta individual . No es necesario que mantenga presionada la tecla Mayús para usarla. También puede escalar desde el panel de información si lo prefiere.
• Redes de vectores: construya formas complejas, llamadas redes vectoriales, uniendo múltiples segmentos a un nodo en un vector (en lugar de solo dos, que es el estándar).
• Doblar: con la herramienta de doblar, puede agarrar y manipular una forma por cualquier borde, no solo por un punto.
• Imagen a forma: coloque una imagen directamente en la forma que cree. A medida que transforma la forma, la imagen se mantendrá proporcionada por dentro.
• Colocar la herramienta de imagen: las imágenes no caen simplemente en su diseño. En su lugar, mantendrá la imagen en el cursor y luego hará clic para colocarla en su lugar. Si cambia el tamaño mientras lo mantiene presionado (sin presionar la tecla Mayús), recortará la imagen en lugar de cambiar su tamaño.

Beneficios de Figma

Además de sus herramientas y algunas de sus capacidades únicas, los beneficios de Figma incluyen:

• Comenta directamente en el lienzo
• Genere código CSS y SVG, iOS y Android
• Exportar como JPG, PDF, PNG o SVG
• Importar múltiples imágenes simultáneamente
• Importar archivos de Sketch
• Vinculación de objeto a mesa de trabajo
• Los atajos son similares a otras plataformas
• El historial de versiones está disponible

Ideación y diseño colaborativos

Figma es excelente para la creación de ideas, gracias a sus capacidades confiables para compartir y sincronizar. Si bien existen otras herramientas más adecuadas para la colaboración en pizarras digitales, como Mural, Figma lo hace bien en comparación con otras herramientas de diseño. Los equipos de Figma pueden incluir a todas las personas involucradas en un proyecto, como diseñadores, desarrolladores, gerentes de proyectos e incluso clientes.

Fuente: Figma

La naturaleza siempre en línea de Figma lo convierte en una especie de herramienta para compartir pantalla similar a Google Docs. Vea quién está viendo el documento en tiempo real. Los cursores están etiquetados para que sepa quién realiza los cambios. También puede hacer clic en un avatar en la barra de herramientas para ver la perspectiva de ese miembro del equipo, lo que puede mejorar la comunicación. Compartir funciona de manera similar a Dropbox y puede establecer permisos para editar o solo ver.

Fuente: Figma

Precios de Figma

Figma es gratis si tiene un pequeño equipo de dos y solo necesita trabajar en hasta tres proyectos a la vez. Más allá de eso, querrá el plan Profesional, que cuesta $ 12 por editor por mes, o el plan de Organización, que cuesta $ 45 por editor por mes.

Cada plan viene con almacenamiento de archivos ilimitado y visores gratuitos. Los dos planes pagos también tienen editores y proyectos ilimitados, así como la capacidad de realizar proyectos solo por invitación. El plan de organización tiene características que las empresas más grandes encontrarán útiles, como la creación de equipos ilimitados, controles de acceso para enlaces y registros de actividad. Obtenga más información sobre los planes aquí.

Pensamientos finales

Las funciones de colaboración y accesibilidad multiplataforma hacen de Figma un ganador y un fuerte competidor de otras herramientas de diseño líderes. El historial de versiones y la edición en tiempo real sin la necesidad de compartir archivos son particularmente útiles. Aunque el hecho de que sea una herramienta basada en navegador puede causar problemas de seguridad para las empresas más grandes, el plan de la Organización tiene características que abordan algunos de esos problemas.

En general, Figma es una herramienta de diseño con todas las funciones y las herramientas que esperarías, y también tiene algunas sutilezas adicionales. Si bien puede ser utilizado por el diseñador en solitario, está realmente pensado y es muy útil para los equipos de diseño. También es excelente para los equipos de diseño que crean muchas versiones del mismo proyecto, así como para los nuevos diseñadores que desean sentirse cómodos con estas herramientas y controles sin tener que pagar por el software.

¿Listo para explorar más herramientas gratuitas? Consulte nuestro artículo sobre GIMP, una alternativa gratuita de Photoshop de código abierto.

Imagen destacada a través de PureSolution / shutterstock.com