Figma: una visión general y revisión


Figma es una herramienta de diseño UI / UX con capacidades de generación de códigos, maquetas de alta fidelidad y creación de prototipos interactivos que se utilizan 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 hay versiones de escritorio para Mac y Windows.

Figma siempre se ejecuta en línea, incluso si descarga la aplicación, razón por la cual es tan buena para la distribución regular y distribuida. equipos que quieren colaborar en diseños en tiempo real. Varios miembros del equipo pueden hacer cambios en un proyecto en vivo y sus diseños siempre estarán sincronizados y actualizados para quien acceda 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 basado en el navegador, la interfaz se verá como las que has 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 listo para usar y para qué necesita complementos. También manejan proyectos como maquetas de alta fidelidad y creación de prototipos de manera diferente.

Todo en Figma está basado 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 su proyecto en lugar de enfocarse 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.

Figma

Es posible que el panel de información sea 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 difícil, especialmente cuando se trata de reutilizar componentes y agregarlos desde 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 (unión, intersección, unión, sustracción)
  • Selector de color
  • Modo de fusión
  • Múltiples rellenos
  • Efectos (caída / sombra interior, desenfoque de fondo / capa)
  • Herramienta de marcos con tamaños personalizados o específicos del dispositivo
  • Mascaras
  • Elementos de forma
  • Herramientas de pluma y doblado
  • Herramienta de texto
  • Bloquear y ocultar capas
  • Mover herramienta (puntero / clicker para agarrar elementos)
  • Fijación
  • Herramienta de zoom

Una cosa que debes saber sobre la herramienta de texto es que no puedes desplazarte por las opciones de fuente o ver vistas previas de la topografía. Es mejor conoce la topografía que quieres usar cuando comienzas a diseñar.

Características notables de Figma

Vamos a profundizar un poco más sobre algunas de las características destacadas de Figma:

  • Bibliotecas: Cree bibliotecas con componentes reutilizables y brinde acceso a todo el equipo. Las bibliotecas de componentes están definidas por 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 utiliza. Al actualizar un componente en la biblioteca, confirmará publicar el cambio para que no realice ningún cambio accidentalmente. (Las funciones de "Biblioteca del equipo" son solo para planes pagos).
  • Moverse: Al mover un objeto alrededor del 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 un individual herramienta. No tiene que mantener presionada la tecla Mayús mientras lo usa. También puede escalar desde el panel de información si lo prefiere.
  • VRedes de ectores: Cree formas complejas, llamadas redes de vectores, uniendo múltiples segmentos a un nodo en un vector (en lugar de solo dos, que es el estándar).
  • Curva: Con la herramienta de plegado, puede agarrar y manipular una forma por cualquier borde, no solo por un punto.
  • Imagen a forma: Suelta una imagen en la forma que crees. A medida que transforma la forma, la imagen se mantendrá proporcionada dentro.
  • Colocar herramienta de imagen: Las imágenes no solo caen 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 mantener presionada la tecla Mayús), recortará la imagen en lugar de cambiar su tamaño.

Figma

Beneficios de Figma

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

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

Ideación y diseño colaborativo

Figma es excelente para la ideación, gracias a sus capacidades confiables para compartir y sincronizar. Si bien hay otras herramientas más adecuadas para la colaboración de pizarra digital, como Mural, Figma lo hace bien en comparación con otras herramientas de diseño. Los equipos de Figma pueden incluir a todos los involucrados en un proyecto, como diseñadores, desarrolladores, gerentes de proyectos e incluso clientes.

Figma

Fuente: Figma

La naturaleza siempre en línea de Figma lo convierte en una especie de herramienta para compartir pantallas similar a Google Docs. Vea quién está viendo el documento en tiempo real. Los cursores están etiquetados para que sepa quién está haciendo 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.

Figma

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 Professional, que es de $ 12 por editor por mes, o el plan de la Organización, que es de $ 45 por editor por mes.

Cada plan viene con almacenamiento ilimitado de archivos 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 la Organización tiene características que las compañías más grandes encontrarán útiles, como la creación de equipos ilimitados, controles de acceso para enlaces y registros de actividad. Aprenda más sobre planes aquí.

Pensamientos finales

La accesibilidad multiplataforma y las características de colaboración 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 con las herramientas que cabría esperar, y también tiene algunas ventajas adicionales. Si bien puede ser utilizado por el diseñador en solitario, es realmente útil y 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 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