Elegir la herramienta correcta antes de empezar a diseñar puede marcar la diferencia entre un flujo de trabajo ágil y horas perdidas. Figma ya no es una sola aplicación, sino un ecosistema completo con cinco productos especializados, cada uno pensado para un momento distinto del proceso creativo y de desarrollo. Conocer cuándo usar cada uno es fundamental para no arrancar en el lugar equivocado.
¿Qué productos componen el ecosistema de Figma?
Imagina una oficina con espacios diferenciados: una pizarra para lanzar ideas, un escritorio técnico para construir planos, una sala con proyector para presentar, un inspector que mide todo con precisión y un escaparate público. Figma replica exactamente esos cinco espacios en formato digital [0:09].
Al crear un nuevo proyecto, lo primero que notarás es que puedes generar distintos tipos de archivo, y cada tipo corresponde a uno de estos productos:
- FigJam: la pizarra colaborativa para lluvia de ideas.
- Figma Design: el escritorio donde construyes prototipos y pantallas.
- Figma Slides: la sala de presentaciones para mostrar tu trabajo.
- DevMode: el modo de inspección técnica dentro de Design.
- Figma Sites: el escaparate para publicar tu diseño como sitio web.
¿Cómo funciona FigJam en la fase de discovery?
FigJam es el punto de partida. Aquí se realiza el brainstorming o lluvia de ideas, generando gráficos y esquemas que ayudan a tener una idea clara del proyecto antes de tocar un solo píxel [0:42]. Es la etapa de discovery, donde el equipo explora posibilidades sin preocuparse por medidas exactas ni detalles visuales.
¿Para qué sirve Figma Design y en qué se diferencia de Figma Make?
Una vez que las ideas están claras, Figma Design es donde se construyen los prototipos y se definen las pantallas [0:58]. Aquí se trabaja con precisión: cada componente, cada interacción y cada flujo se diseñan de manera controlada.
Por otro lado, Figma Make permite crear un prototipo funcional que se ejecuta en un ambiente de desarrollo real, accesible mediante una URL [2:21]. La diferencia clave es sencilla: en Design creas un prototipo controlado, donde cada paso está predefinido; en Make creas un prototipo dinámico, donde el usuario puede interactuar libremente [2:40].
Por ejemplo, si quieres agregar una transacción de gastos, en Design tendrías que diseñar cada paso: seleccionar restaurante, escribir la cantidad y confirmar. En Make, el usuario decide libremente la categoría y el monto sin un flujo rígido [2:50].
¿Cómo presentar e inspeccionar tus diseños dentro de Figma?
Figma Slides funciona como una sala de presentaciones donde puedes crear diapositivas con templates e incrustar los prototipos creados en Design [1:22]. Esto permite recibir feedback de distintos stakeholders de forma directa, sin salir del ecosistema.
Dentro del archivo de diseño también existe DevMode, un modo de vista técnica donde los desarrolladores pueden consultar las medidas exactas, píxeles, tamaño de fuente, colores y variables necesarios para llevar el prototipo a código [1:42]. Es como tener un inspector con cinta métrica integrado en el propio archivo.
¿Cuándo usar Figma Sites para publicar un proyecto?
Cuando el proyecto involucra una página web, una landing page o un e-commerce, Figma Sites permite convertir los diseños en un sitio web funcional [1:58]. La plataforma ofrece templates como punto de partida, aunque también puedes utilizar directamente los diseños que ya creaste en Figma Design.
¿Cuál es la secuencia ideal en un proyecto real?
El flujo recomendado sigue un orden lógico que aprovecha cada herramienta en su momento óptimo [3:08]:
- Piensas en FigJam.
- Construyes en Design.
- Presentas en Slides.
- Inspeccionas en DevMode.
- Publicas en Sites.
No todos los proyectos necesitan las cinco herramientas, pero saber cuál es cuál te ahorra empezar en el lugar equivocado. Entender este ecosistema desde el inicio permite que cada fase del proyecto fluya de manera natural hacia la siguiente.
¿Ya identificaste cuál de estos productos es el que más necesitas en tu proyecto actual? Comparte tu experiencia en los comentarios.
