FIGMA

FIGMA

1. Proceso de Diseño:

   • Figma es una herramienta muy buena para colaborar en tiempo real, lo que permite observar fácilmente el trabajo de nuestros colegas. También tiene un historial de versiones, lo que nos ayuda a regresar a versiones anteriores si cometemos un error. Además, Figma ofrece tres modos principales: diseño, prototipo y desarrollador. El modo de desarrollador nos proporciona la opción de inspeccionar el código y exportar los recursos.

2. Integración del Diseño

   • Figma como ya pudimos ver en el proceso de diseño Figma facilita la colaboración entre diseñadores, desarrolladores y stakeholders además de que ayuda a mantener la coherencia visual mediante bibliotecas y estilos.

3. Método de diseño

   • Figma inicia el diseño con wireframes de baja fidelidad para definir la estructura básica. Luego se aplica Auto Layout para crear una interfaz flexible y responsiva. Finalmente, se crean componentes y variantes para organizar los distintos estados de los elementos, como botones en modo normal, hover o desactivado.

4. Croquis y bocetos

   • Figma permite crear bocetos digitales utilizando frames y formas vectoriales. Luego se emplea la pluma vectorial para diseñar íconos o ilustraciones básicas. Finalmente, los bocetos se organizan por pantallas o secciones dentro de los frames para mantener una estructura clara en el diseño.

5. Operaciones

   • Figma permite editar vectores modificando nodos y combinando formas. También facilita la gestión de capas mediante agrupación y ordenamiento. Con Auto Layout, los componentes se adaptan automáticamente. Además, se pueden crear prototipos conectando frames e incorporar comentarios en tiempo real para trabajar de forma colaborativa.

6. Ensamblajes

   • Figma permite crear componentes anidados para construir elementos más complejos. También utiliza variantes para agrupar los diferentes estados de un componente y emplea Auto Layout dentro de ellos para organizar su contenido. Además, facilita la creación de un sistema de diseño global mediante librerías compartidas.

7. Dibujos

   • Figma ofrece herramientas vectoriales como la pluma, las formas básicas y la edición de nodos. También permite usar máscaras para recortar imágenes o vectores y aplicar estilos como colores, bordes y efectos. Además, cuenta con plugins que facilitan la creación de ilustraciones avanzadas o iconografía.

8. Edición de modelos

   • Figma permite ajustar prototipos modificando interacciones y animaciones. También actualiza automáticamente las instancias al editar componentes maestros. Además, usa variables para definir valores como colores o tamaños, ofrece un modo desarrollador para ver propiedades y medidas, y permite la edición colaborativa en tiempo real.