Tools on Fernando Ruiz

FigJam

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Figma’s whiteboarding tool for collaborative ideation and synthesis—seamlessly integrated with your design files.

What is FigJam?

FigJam is Figma’s answer to collaborative whiteboarding. It’s built into Figma, meaning you can jump from a design file to a whiteboard without leaving the app. It supports real-time collaboration, voting, sticky notes, drawing, and infinite canvas.

Unlike Miro (a standalone tool), FigJam lives inside Figma. If your design system is in Figma, your ideation can happen in FigJam right next to it. Switching between design and thinking is seamless.

FigJam

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La herramienta de pizarra de Figma para ideación colaborativa y síntesis—integrada sin inconvenientes con tus archivos de diseño.

¿Qué es FigJam?

FigJam es la respuesta de Figma a la pizarra colaborativa. Está construida en Figma, lo que significa que puedes saltar de un archivo de diseño a una pizarra sin salir de la app. Apoya colaboración en tiempo real, votación, notas adhesivas, dibujo y canvas infinito.

A diferencia de Miro (herramienta independiente), FigJam vive dentro de Figma. Si tu design system está en Figma, tu ideación puede suceder en FigJam justo al lado. Cambiar entre diseño e ideación es sin inconvenientes.

FigJam

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La herramienta de pizarra de Figma para ideación colaborativa y síntesis—integrada sin inconvenientes con tus archivos de diseño.

¿Qué es FigJam?

Hotjar for UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A behavior analytics tool that shows where users click, scroll, and spend time—visual data about real user behavior.

What is Hotjar?

Hotjar is behavior analytics for websites. It records user sessions and creates heatmaps showing where users click, scroll, and spend time. You see actual user behavior, not guesses.

Hotjar answers: “Where do users look? Where do they click? Where do they get stuck?” Video recordings show real users struggling. Heatmaps show aggregate patterns.

Hotjar para UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de análisis de comportamiento que muestra dónde hacen clic, desplazan y pasan tiempo los usuarios—datos visuales sobre comportamiento real del usuario.

¿Qué es Hotjar?

Hotjar es análisis de comportamiento para sitios web. Graba sesiones de usuario y crea heatmaps mostrando dónde hacen clic, se desplazan y pasan tiempo los usuarios. Ves comportamiento real del usuario, no suposiciones.

Hotjar responde: “¿Dónde miran los usuarios? ¿Dónde hacen clic? ¿Dónde se quedan atrapados?” Las grabaciones de video muestran usuarios reales lucha. Los heatmaps muestran patrones agregados.

Hotjar para UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de análisis de comportamiento que muestra dónde hacen clic, desplazan y pasan tiempo los usuarios—datos visuales sobre comportamiento real del usuario.

¿Qué es Hotjar?

Lyssna

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A lightweight feedback collection tool that gathers user responses through simple links—no installations required.

What is Lyssna?

Lyssna is a feedback collection platform for designers. Paste a link to a prototype, design, or survey. Share the link. Collect user feedback. That’s it.

Unlike UserTesting or Respondent (which record full sessions), Lyssna is lightweight. Users answer questions you ask. Quick feedback. Lower cost. Faster turnaround.

One sentence punch: Lyssna is the fastest way to collect user feedback on designs—share a link, get responses in hours.**

Lyssna

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta ligera de recolección de feedback que recopila respuestas de usuarios a través de links simples—sin instalaciones requeridas.

¿Qué es Lyssna?

Lyssna es una plataforma de recolección de feedback para diseñadores. Pega un link a un prototipo, diseño o encuesta. Comparte el link. Recopila feedback de usuario. Eso es todo.

A diferencia de UserTesting o Respondent (que graban sesiones completas), Lyssna es ligera. Los usuarios responden preguntas que haces. Feedback rápido. Costo menor. Turnaround más rápido.

Lyssna

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta ligera de recolección de feedback que recopila respuestas de usuarios a través de links simples—sin instalaciones requeridas.

¿Qué es Lyssna?

Lyssna es una plataforma de recolección de feedback para diseñadores. Pega un link a un prototipo, diseño o encuesta. Comparte el link. Recopila feedback de usuario. Eso es todo.

A diferencia de UserTesting o Respondent (que graban sesiones completas), Lyssna es ligera. Los usuarios responden preguntas que haces. Feedback rápido. Costo menor. Turnaround más rápido.

Miro

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

An infinite digital whiteboard for collaborative design, diagramming, and team alignment—essential for distributed teams.

What is Miro?

Miro is a collaborative whiteboarding platform that works like a physical whiteboard but digital and synchronous. Multiple people can draw, write, sticky-note, and diagram simultaneously. Real-time collaboration means everyone sees updates instantly.

Miro works for user journeys, empathy mapping, site maps, brainstorming, personas, workflows, and any diagram that requires group thinking. It’s not a design tool like Figma; it’s a thinking tool for teams.

Miro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una pizarra digital infinita para diseño colaborativo, diagramas y alineación de equipo—esencial para equipos distribuidos.

¿Qué es Miro?

Miro es una plataforma de pizarra colaborativa que funciona como una pizarra física pero digital y síncrona. Múltiples personas pueden dibujar, escribir, agregar notas adhesivas y diagramar simultáneamente. La colaboración en tiempo real significa que todos ven actualizaciones instantáneamente.

Miro funciona para viajes de usuario, mapeamiento de empatía, mapas de sitio, brainstorming, personas, workflows y cualquier diagrama que requiera pensamiento de grupo. No es una herramienta de diseño como Figma; es una herramienta de pensamiento para equipos.

Miro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una pizarra digital infinita para diseño colaborativo, diagramas y alineación de equipo—esencial para equipos distribuidos.

¿Qué es Miro?

Notion for UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A documentation and knowledge base tool that centralizes UX docs, research, design systems, and team processes—your design system’s home.

What is Notion for UX?

Notion is a all-in-one workspace for documentation. Designers use it to document design systems, research findings, design specifications, and team processes. It’s not a design tool; it’s a knowledge repository.

Think of it as your design team’s wiki. Design specs live here. Personas live here. Brand guidelines live here. Research insights live here. Everything interconnected with links and databases.

Notion para UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de documentación y base de conocimiento que centraliza docs de UX, investigación, design systems y procesos de equipo—el hogar de tu sistema de diseño.

¿Qué es Notion para UX?

Notion es un workspace todo-en-uno para documentación. Los diseñadores lo usan para documentar design systems, hallazgos de investigación, especificaciones de diseño y procesos de equipo. No es una herramienta de diseño; es un repositorio de conocimiento.

Piénsalo como el wiki de tu equipo de diseño. Las especificaciones de diseño viven aquí. Las personas viven aquí. Las directrices de marca viven aquí. Los insights de investigación viven aquí. Todo interconectado con links y bases de datos.

Notion para UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de documentación y base de conocimiento que centraliza docs de UX, investigación, design systems y procesos de equipo—el hogar de tu sistema de diseño.

¿Qué es Notion para UX?

Optimal Workshop

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A suite of tools for information architecture validation—card sort, tree test, and click tests reveal how users organize and find information.

What is Optimal Workshop?

Optimal Workshop is a research platform specializing in information architecture (IA). It provides three main tools: card sorting, tree testing, and first-click testing. All three measure how users organize, navigate, and find information.

Card sorting asks: “How would you organize these items?” Tree testing asks: “Can you find this item in this structure?” First-click testing asks: “Where would you click to find this item?” Each reveals different aspects of IA.

Optimal Workshop

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un conjunto de herramientas para validación de arquitectura de información—card sort, tree test y click tests revelan cómo los usuarios organizan e encuentran información.

¿Qué es Optimal Workshop?

Optimal Workshop es una plataforma de investigación especializada en arquitectura de información (IA). Proporciona tres herramientas principales: card sorting, tree testing y first-click testing. Las tres miden cómo los usuarios organizan, navegan y encuentran información.

Card sorting pregunta: “¿Cómo organizarías estos items?” Tree testing pregunta: “¿Puedes encontrar este item en esta estructura?” First-click testing pregunta: “¿Dónde harías clic para encontrar este item?” Cada una revela aspectos diferentes de IA.

Optimal Workshop

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un conjunto de herramientas para validación de arquitectura de información—card sort, tree test y click tests revelan cómo los usuarios organizan e encuentran información.

¿Qué es Optimal Workshop?

Principle

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Mac-only animation prototyping tool that makes complex animations easy—perfect for microinteractions and transitions.

What is Principle?

Principle is a Mac-only prototyping tool specialized in animations. If Figma prototyping feels limiting for animations, Principle fills the gap. It’s drag-and-drop animation creation without learning After Effects.

Principle excels at easing curves, timing, and sequencing animations. Complex animation sequences that take hours in After Effects take minutes in Principle.

One sentence punch: Principle makes animation prototyping as easy as interaction design—no animation software experience needed.**

Principle

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de prototipado de animación solo para Mac que hace animaciones complejas fáciles—perfecta para microinteracciones y transiciones.

¿Qué es Principle?

Principle es una herramienta de prototipado solo para Mac especializada en animaciones. Si el prototipado de Figma se siente limitante para animaciones, Principle llena el vacío. Es creación de animación drag-and-drop sin aprender After Effects.

Principle excela en curvas de easing, timing y secuenciamiento de animaciones. Secuencias de animación complejas que toman horas en After Effects toman minutos en Principle.

Principle

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de prototipado de animación solo para Mac que hace animaciones complejas fáciles—perfecta para microinteracciones y transiciones.

¿Qué es Principle?

Principle excela en curvas de easing, timing y secuenciamiento de animaciones. Secuencias de animación complejas que toman horas en After Effects toman minutos en Principle.

ProtoPie

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A prototyping tool for complex interactions—animations, gestures, variables, and logic without code.

What is ProtoPie?

ProtoPie is a prototyping tool designed for complex interactions that Figma’s prototyping can’t handle. Need a countdown timer? A calculator logic? Conditional flows based on user input? ProtoPie handles it.

ProtoPie works like this: import designs from Figma, add interactions through the ProtoPie editor, and share via link. No coding required. The result is an interactive prototype that feels like a real app.

ProtoPie

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de prototipado para interacciones complejas—animaciones, gestos, variables y lógica sin código.

¿Qué es ProtoPie?

ProtoPie es una herramienta de prototipado diseñada para interacciones complejas que el prototipado de Figma no puede manejar. ¿Necesitas un timer de cuenta regresiva? ¿Lógica de calculadora? ¿Flujos condicionales basados en entrada del usuario? ProtoPie lo maneja.

ProtoPie funciona así: importa diseños de Figma, añade interacciones a través del editor de ProtoPie y comparte vía link. Sin código requerido. El resultado es un prototipo interactivo que se siente como una aplicación real.

ProtoPie

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de prototipado para interacciones complejas—animaciones, gestos, variables y lógica sin código.

¿Qué es ProtoPie?

Variables vs. Styles in Figma: Strategies and Trade-offs

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Variables are raw and dynamic values (numbers, colors, strings, booleans) that allow for creating themed systems and advanced prototypes. Styles are collections of visual properties (such as gradients, effects, or complex typography) that define an element’s final appearance.

The Dilemma: Variables or Styles?

Figma has evolved toward a much more powerful model with the introduction of Variables, but Styles remain fundamental in many workflows. Understanding the purpose and limitations of each of these elements will help you build a more robust and easy-to-use design library.