¿Listo para dar vida a tus ideas de diseño?
Hoy te hablo sobre Figma: la herramienta esencial para diseñadores gráficos y web. Si buscas simplicidad y poder en un solo paquete, estás en el lugar correcto.
Figma no es solo un software, es tu lienzo digital en la nube. Con características como archivos de diseño organizados y marcos para tus creaciones, podrás estructurar tus proyectos sin esfuerzo. Los componentes reutilizables te ayudarán a mantener la coherencia en tus diseños.
Pero eso no es todo, las interacciones y prototipos son un juego de niños en Figma. Imagina crear presentaciones dinámicas y experimentar con ideas antes de darles vida. Además, su función FigJam es como tu pizarra digital para organizar tus ideas.
Figma te permite colaborar en tiempo real con tus compañeros, acceder desde cualquier lugar y aprovechar plantillas comunitarias para acelerar tu trabajo.
No obstante, no todo es color de rosa. Figma tiene su curva de aprendizaje y algunas desventajas que te enseño en el post.
Qué es Figma
Figma es una herramienta de diseño y prototipado que guarda todos tus diseños en la nube de forma automática. Por esto, te permite trabajar con los miembros de tu equipo simultáneamente en el mismo archivo.
El funcionamiento es similar a Adobe Illustrator, Sketch o Adobe XD, ya que está pensado para trabajar con vectores, formas y colores. Aunque también permite añadir sombras e imágenes, no es tan avanzado en ese aspecto como Photoshop.
Características de Figma más importantes
Algunos de los elementos o características más importantes de Figma que debes conocer son los siguientes:
Archivos de diseño o design files. Son los archivos que contienen los diseños. Puedes crear tantos como quieras con la versión gratuita. Pero si los quieres ordenar por equipos, clientes o proyectos, vas a necesitar un plan de pago.
Frames o marcos. Es el elemento básico para contener los diseños. Es el equivalente a un lienzo en Photoshop. Puedes crear Frames con tamaños preestablecidos como pantallas de iPhone, resoluciones de pantalla de laptop o folios A4, entre otros.
Componentes. Los componentes son elementos reutilizables. Pensados para copiar un mismo elemento que se repite en un diseño varias veces. Su principal característica es que cambiando el componente padre, el cambio se reflejará en todos los componentes hijo.
Presentación. Figma tiene una pantalla especial para la presentación de tu diseño. Donde aparece el frame seleccionado ocupando toda la pantalla. Además, puedes compartir con un enlace el acceso como invitado a tu cliente o compañero para que vea el progreso.
Sección de prototipado. Figma permite añadir interacciones a tu diseño. Así el cliente hacer clic en botones y enlaces y acceder a otras pantallas. Otras interacciones pueden lanzarse al hacer scroll o pasar el puntero sobre un elemento.
FigJam. FigJam es un tipo de archivo especial para organizar ideas, diagramas de flujo y tomar notas colaborando en equipo. Una alternativa a Miro que viene incluida en Figma de forma gratuita.
Estilos globales. Para que el diseño sea más consistente y fácil de exportar, Figma incluye la posibilidad de crear estilos globales de fuentes tipográficas y colores.
Qué puedes hacer con Figma
Con todo lo anterior vas a poder usar Figma para varias tareas:
Prototipado web
Con herramientas como Illustrator o Photoshop, los desarrolladores pasaban mucho tiempo exportando los diseños de forma manual al lenguaje web (HTML, CSS). Esto requería medir distancias entre elementos, recortar iconos, comprobar tipografías y un largo etcétera de tareas que prolongan el trabajo del desarrollador.
Figma está pensado para obtener todos estos datos de forma rápida y fácil. Ya que colores, bordes, tamaños de tipografía, sombras o incluso el redondeo de los bordes puede verse de forma rápida en número de píxeles.
Por supuesto, para convertir tu diseño de Figma en un sitio web totalmente funcional necesitas los servicios de un desarrollador web. Aunque ya hay en el mercado aplicaciones que permiten exportar un diseño de Figma a una web funcional con unos pocos clics.
Prototipado de aplicaciones
Las interacciones son una gran ayuda para crear prototipos funcionales. El cliente, o el resto del equipo, será capaz de manejar una maqueta de la futura aplicación y hacerse una idea de cómo será el funcionamiento futuro.
Ten en cuenta que cualquier elemento puede exportarse en lenguaje para Android, iOS y CSS.
Organizar ideas con FigJam
Como decimos, FigJam es una aplicación incluida dentro de Figma. Dentro de FigJam encontrarás todo tipo de plantillas para organizar ideas, hacer brainstorming, tomar decisiones y organizar reuniones.
Moodboards
En un post anterior vimos la importancia de crear moodboards de diseño web para el éxito del proyecto. Figma es una aplicación muy fácil de usar para ese caso.
Crear diseños en lote
¿Necesitas crear decenas o cientos de diseños para redes sociales? Figma se integra con Google Sheets y otras herramientas de datos, por lo que puedes generar cientos de diseños y añadir el texto en cuestión de segundos.
Ventajas de Figma
Precio
Figma tiene un plan gratuito muy generoso y podrás crear documentos sin límite. De hecho, solo vas a necesitar pasar a un plan de pago cuando quieras organizar tus documentos y dar permisos especiales a los miembros del equipo.
Facilidad de uso
Figma está pensado para que empieces a usar la herramienta desde el primer momento. Incluso aunque la abras por primera vez, verás que la interfaz es muy limpia y amigable. Con el tiempo te darás cuenta de todo el potencial que tiene e irás aprendiendo funciones más avanzadas.
Trabajo en equipo
Esta es sin duda una de las características más importantes. Muchas agencias de diseño tienen un equipo de varias personas para diseñar un sitio web o una app para sus clientes. Los miembros del equipo podrán trabajar juntos en la misma aplicación, añadir comentarios, hacer pruebas de usabilidad y cada uno desde su casa si así lo quieren.
Figma ha hecho la colaboración más cómoda, ya que permite que todos los miembros trabajen juntos en tiempo real. Esto hace que el trabajo sea transparente, porque cada miembro puede ver la edición realizada por su compañero de equipo. Todo es visible en la pantalla en directo, puesto que Figma es un software de diseño basado en la nube.
Plantillas de la comunidad
Si necesitas hacer un diseño rápido, puedes encontrar dentro de la propia herramienta de Figma los diseños de la comunidad. Así podrás encontrar diseños de documentos como presupuestos, currículos, tarjetas de visita, así como diseños para landing pages, Ecommerce o interfaces de aplicaciones.
Solo necesitas copiar cualquiera de los diseños y ya podrás modificarlo con total libertad en tu espacio de trabajo.
Plugins
Esta característica de Figma es una de las razones por la que se ha hecho tan popular. Puedes ampliar las funcionalidades de Figma añadiendo plugins creados por la comunidad o empresas ya conocidas. Algunos de los mejores plugins son Unsplash, Iconify, Content Reel, Component Replacer, Blobs Maker, Remove BG, etc.
Interacciones y animaciones
Si te interesa trabajar la experiencia de usuario (UX) de un proyecto, nada mejor que crear las interacciones para saber qué acciones puede hacer el usuario. Figma permite enlazar unos diseños con otros al pulsar un botón o un enlace, mostrar y ocultar elementos, crear microanimaciones y transformaciones.
Figma Mirror
Un diseñador de páginas web y aplicaciones necesita hacer varios testeos a lo largo del proceso de creación. La aplicación Figma Mirror es una aplicación independiente que se puede instalar en un smartphone para comprobar el funcionamiento del diseño. Si se han añadido elementos interactivos como enlaces o microanimaciones cobra más sentido aún, ya que se podrá tener una sensación más próxima al resultado final del proyecto.
Aplicación de escritorio
Puedes descargar la aplicación para Windows y iOS y notarás una pequeña mejora en la fluidez. Además, los diseños seguirán guardándose en la nube y podrás instalar fuentes tipográficas personalizadas.
Desventajas
Desde nuestro punto de vista es difícil encontrarle alguna contra a Figma, más aún cuando es una herramienta gratuita que solo exige pago para desbloquear algunas funciones de organización del trabajo.
Poco extendido
Si algo vemos negativo a día de hoy, es que es aún un software poco conocido en las empresas en comparación con otras alternativas. Esto puede hacer que exista bastante resistencia entre diseñadores y desarrolladores que ya están acostumbrados a otras herramientas a la hora de aprender a usar Figma. Sin embargo, el ahorro de tiempo que supone de cara al diseño web hará que se acabe imponiendo a otras herramientas de diseño más generalistas.
Aún es difícil encontrar ofertas de trabajo en las que se exija el uso de Figma. Por el contrario, otras alternativas como Illustrator, Sketch o Adobe XD son más comunes como requisitos para acceder a un puesto de trabajo.
Compra por parte de Adobe
Como decimos, Adobe ha comprado Figma, por lo que los usuarios tienen dudas acerca de su futuro. Aunque es improbable que Adobe frene el desarrollo de Figma, sí que es de esperar que cambien las condiciones de su plan gratuito en algún momento.
Idioma
Como muchas otras aplicaciones, Figma no está traducida al español.
Ventajas
- Gran cantidad de integraciones y plugins que facilitan tu trabajo como diseñador
- Plan gratuito más que suficiente para empezar
- La gran comunidad de Figma aporta plantillas y tutoriales
- Permite la colaboración en vivo de forma fácil
Desventajas
- Posible cambio en el plan gratuito después de la compra por parte de Adobe
- Algunos clientes de Figma están teniendo problemas con los planes de pago porque les es imposible saber cuanto van a pagar en función del número de usuarios.
- Sin traducción al español
Conclusión. ¿Es Figma adecuado para ti?
El precio irresistible y la facilidad de uso lo han convertido en el favorito de muchos. Si lo pruebas, difícilmente volverás a las viejas formas.
Mi experiencia me dice que Figma no es solo una moda pasajera. Su enfoque en la colaboración en remoto y sus características para trabajar con desarrolladores son como una brújula hacia el futuro del diseño. Además, los plugins y plantillas de la comunidad hacen que sea más fuerte y sólido que nunca.
¿Listo para el gran salto? Si estás buscando una herramienta que se ajuste a tu ritmo y crecimiento, Figma es la elección.
Preguntas frecuentes
Figma es un editor de gráficos vectoriales en línea para diseñar interfaces y crear prototipos interactivos.
No, Figma funciona directamente en tu navegador, pero también ofrece versiones de escritorio para sistemas operativos principales (Windows y macOS)
Un sistema de diseño en Figma es un conjunto de elementos reutilizables que mantienen la coherencia en tus diseños.
No, necesitas conexión a Internet para acceder y utilizar Figma, ya que es una herramienta basada en la nube. Sin embargo, si pierdes la conexión, Figma guardará los cambios en local hasta que sea capaz de reconectarse.
Puedes colaborar en tiempo real compartiendo tus diseños con otros usuarios y trabajando juntos en un mismo archivo.
Utiliza componentes reutilizables y estilos globales para construir y mantener un sistema de diseño coherente. Si no sabes cómo empezar, echa un vistazo a los sistemas de diseño creados por la comunidad.
Absolutamente, Figma es ideal para diseñar interfaces tanto web como móviles, permitiéndote crear prototipos interactivos para diversas plataformas.
El modo de desarrollo de Figma facilita la conversión fluida de diseño a código, proporcionando herramientas como la inspección, la generación de código y la integración con otras plataformas, mejorando la colaboración entre diseñadores y desarrolladores.
Los plugins amplían las funcionalidades de Figma, permitiéndote optimizar tu flujo de trabajo y añadir nuevas capacidades. Los plugins más populares te permiten añadir de forma fácil iconos, fotos, generar texto, etc.
