¿Cómo usar Figma para optimizar una aplicación o sitio web si no tengo ninguna experiencia en diseño UX/UI?

Seguro que alguna vez has entrado en una aplicación o en una web y has pensado: «Madre mía, qué lío, esto no hay quien lo entienda» o «Yo esto lo haría mucho mejor». Tienes la idea en la cabeza, sabes lo que falla, pero claro, te frena lo de siempre: no eres diseñador, no sabes usar los programas y te da miedo que quede como un churro.

Pues escúchanos bien porque esto te interesa: tienes que probar Figma. Y no te lo decimos por venderte la moto, te lo decimos porque es la herramienta que ha hecho que diseñar deje de ser un dolor de cabeza para los que no somos unos cracks del Photoshop. Olvídate de esas frases tipo «la plataforma líder del mercado»; aquí lo que importa es que es fácil y es gratis.

En este artículo vamos a ver cómo puedes usar Figma desde cero para mejorar esas ideas que te rondan por la cabeza, aunque sea la primera vez que tocas algo de diseño. Y oye, quién sabe, si ves que se te da bien y te empieza a gustar el mundillo, igual te apetece echarle un ojo al Curso de Diseño Gráfico de Treintaycinco mm para ponerte ya en serio. Pero de momento, vamos a lo básico.

¿Qué es Figma y por qué es perfecta para principiantes?

Figma es básicamente una herramienta de diseño que funciona en la nube. ¿Qué significa esto? Pues que puedes crear interfaces, prototipos interactivos y trabajar con otras personas sin tener que instalar nada en tu ordenador. Solo necesitas un navegador y conexión a internet, y ya está.

Lo bueno de Figma es que la interfaz es bastante intuitiva y hay muchísima gente usándola, lo que significa que encontrarás ayuda fácilmente. No es como otros programas más técnicos que parecen hechos solo para profesionales. Figma se diseñó para que sus usuarios puedan colaborar fácilmente, tanto si llevas años diseñando como si es tu primera vez.

Y otro punto a favor: tiene una versión gratuita que está genial. Puedes trabajar en hasta tres proyectos a la vez sin pagar nada. Para empezar y hacer tus primeras pruebas, es más que suficiente. No necesitas pagar desde el principio, que siempre viene bien.

Primeros pasos: cómo configurar tu cuenta y familiarizarte con la interfaz

Lo primero es crear una cuenta en Figma. Entras en su página web, te registras con tu email o cuenta de Google, y listo. No te tienes que bajar nada al ordenador. Funciona todo en el navegador. Una vez dentro, verás el panel principal donde puedes crear archivos nuevos, organizar tus proyectos y cotillear lo que hace la comunidad.

Cuando le des a «Nuevo diseño«, (pestañita arriba) verás una pantalla gris enorme y pensarás: «¿Y ahora qué?». Tranquilidad. Fíjate que la pantalla se divide en tres zonas muy claras, no tiene pérdida:

1. A la izquierda: Ahí va a salir la lista de todo lo que pongas en la pantalla. Si pones una foto, sale ahí. Si pones un texto, sale ahí. Son las «capas», para que sepas qué está encima de qué. También tienes una pestaña con diferentes recursos.
2. En el centro: Ese espacio gigante es tu mesa de trabajo. Ahí es donde vas a dibujar, pegar fotos y mover cosas. En la parte inferior también tienes la barra de herramientas.
3. A la derecha: Ese es el inspector de propiedades. Si seleccionas un texto, ahí te saldrá para cambiar la letra, el color o el tamaño. Si seleccionas un cuadrado, te dejará ponerle bordes redondos o sombras.

¿Te parece mucho de golpe? Normal. Mi consejo es que te lo tomes con calma. Crea un archivo nuevo y ponte a trastear. Dibuja un par de rectángulos, añade algo de texto, mueve las cosas de sitio… Dedica unas horitas simplemente a explorar sin presión. Ya verás cómo poco a poco le vas pillando el truco.

Principios básicos de diseño UX/UI que debes conocer

Aunque no seas diseñador profesional, conocer algunos conceptos básicos te va a ayudar a tomar mejores decisiones. El diseño UX se centra en cómo se siente la persona cuando usa tu producto, mientras que el UI se ocupa de cómo se ve todo visualmente.

Uno de los conceptos más básicos es que todo funcione de manera unificada. Los usuarios se sienten más cómodos cuando todo sigue el mismo patrón. Si usas un color azul para los botones principales, úsalo en todas las pantallas. Si los títulos tienen un tamaño concreto, mantenlo igual en todo el proyecto.

La simplicidad también es fundamental. No hace falta llenar las pantallas con mil elementos. Piensa en lo realmente necesario y guía a la persona de forma clara. Es mejor tener pocas opciones bien organizadas que un montón de elementos que confundan.

La jerarquía visual es otro tema básico. Usa diferentes tamaños, colores y espacios para mostrar qué es más destacado. Un título grande y oscuro llamará más la atención que un texto pequeño en gris.

Y no te olvides de que todo el mundo pueda usar tu diseño. Asegúrate de que todo sea fácil de leer, con buen contraste entre texto y fondo. Piensa que no todo el mundo tiene la vista perfecta, así que pónselo fácil.

Cómo crear tu primer proyecto en Figma: marcos y estructuras básicas

Bueno, ahora que ya conoces la interfaz y algunos conceptos básicos de diseño UX/UI, vamos a crear algo. En Figma todo empieza con los marcos, que son como contenedores donde metes tu diseño. Piensa en ellos como las diferentes pantallas de tu app o las páginas de tu web.

Para crear un marco, selecciona la herramienta de marco (está en la barra de abajo, parece un corchete). Figma te muestra tamaños predefinidos para iPhone, Android, tablets, ordenadores… Elige el que necesites.

Dentro de cada marco empiezas a añadir elementos: botones, fotos, textos, iconos… (Busca en Recursos, hay de todo). Lo principal es organizarlo todo de manera lógica. Por ejemplo, si estás haciendo una pantalla de login, necesitarás campos para el email y contraseña, un botón de «Entrar» y quizás un enlace de «¿Olvidaste tu contraseña?».

No te cortes en explorar las plantillas gratuitas que comparte la gente en la comunidad de Figma. Hay diseños ya hechos para casi cualquier proyecto que te imagines. Te ahorran tiempo y te dan ideas sobre cómo estructurar tus propias pantallas. Son un recurso buenísimo para aprender viendo ejemplos reales.

Herramientas más útiles de Figma para mejorar tu diseño

Figma tiene varias herramientas que te facilitan muchísimo el trabajo, incluso si eres principiante. Vamos a ver las más útiles para que puedas trabajar como un pro desde el principio.

Auto Layout: diseño adaptable sin complicaciones

Auto Layout es una función que permite que los elementos dentro de un marco se reorganicen solos según el contenido. Súper útil cuando trabajas con listas, botones o tarjetas que tienen que adaptarse a diferentes pantallas.

Para activarlo, selecciona un marco o grupo de elementos y dale al botón de Auto Layout en el panel de propiedades o clic botón derecho del ratón. Desde ahí ajustas el espaciado, si quieres que vaya horizontal o vertical, y cómo se colocan los elementos. Te va a ahorrar un montón de tiempo que antes perdías ajustando todo manualmente.

Componentes reutilizables: trabaja de forma más eficiente

Los componentes son elementos que puedes usar una y otra vez en tu diseño. Imagínate que creas un botón con un estilo concreto. Lo conviertes en componente y lo puedes usar en todas las pantallas. Si luego decides cambiar el color o la forma, solo modificas el componente principal y ¡pam! todos los botones se actualizan solos.

Crear un componente es fácil. Selecciona lo que quieras convertir, clic derecho y «Crear componente». Verás que cambia de color en el panel de capas. Esta práctica es básica para que todo vaya a juego en proyectos grandes.

Variables: flexibilidad y que todo vaya a juego en tus diseños

Las variables en Figma son como atajos reutilizables para colores, espaciados y tamaños de texto. Te garantizan que todo sea parecido y te permiten hacer cambios generales rapidísimo.

Por ejemplo, puedes crear una variable para el color principal de tu marca y aplicarla a todos los botones y títulos principales. Si luego quieres cambiar ese color, solo modificas la variable y todo se actualiza al momento.

Prototipado interactivo: da vida a tu diseño

Una de las mejores características de Figma es que puedes crear prototipos interactivos sin programar nada. Los prototipos te dejan simular cómo sería navegar por tu app o web antes de construirla de verdad.

Para crear un prototipo, cambias a la pestaña «Prototipo» en el panel de propiedades. Seleccionas un elemento (como un botón) y arrastras el conector azul que aparece hacia el marco donde quieres que vaya el usuario al hacer clic. Puedes configurar el tipo de interacción, la animación de transición y la duración.

Los prototipos son geniales para enseñar tus ideas a clientes o compañeros. Puedes compartir un enlace y cualquiera puede probarlo desde su navegador, sin necesitar cuenta en Figma.

Diseño para móvil y que se adapte a diferentes pantallas

Hoy en día, la mayoría usamos el móvil para todo. Por eso tu diseño tiene que verse bien en diferentes tamaños de pantalla. Por suerte, Figma te lo pone fácil.

Cuando crees tus marcos, diseña versiones para móvil y para ordenador. Usa Auto Layout para que los elementos se ajusten solos y aprovecha las restricciones para controlar cómo se comportan cuando cambia el tamaño.

Las restricciones te permiten fijar elementos en sitios concretos. Por ejemplo, puedes anclar un botón abajo del todo para que siempre esté ahí, da igual el tamaño del dispositivo. O hacer que una imagen ocupe todo el ancho disponible.

En móviles también deberías simplificar la navegación. Los menús tipo «hamburguesa» son habituales porque ahorran espacio. Asegúrate de que los botones sean grandes para poder pulsarlos bien con el dedo, y deja espacio suficiente entre elementos para evitar toques accidentales.

Consulta nuestro artículo relacionado; ¿Cómo aplicar la Ley de Fitts en UX?

Bibliotecas de recursos y plantillas: acelera tu proceso de diseño

Como te decíamos, una de las mejores ventajas de Figma es su comunidad súper activa. Comparten miles de plantillas, kits de UI, iconos y recursos gratis. No necesitas empezar de cero siempre.

En la sección «Comunidad» de Figma puedes buscar sistemas de diseño completos como Material Design de Google, kits de grandes empresas como Uber o Spotify, y plantillas para lo que se te ocurra: ¿Necesitas iconos para el menú? Buscas «iconos», copias y pegas. ¿Necesitas una plantilla para una tienda online? Seguro que hay alguna. ¿Un mapa? También. Úsalo, que para eso está. No tiene sentido perder tiempo dibujando un icono de WiFi si alguien ya ha hecho uno perfecto y te lo regala.

Usar estas plantillas no solo te ahorra tiempo. También te enseña buenas prácticas de diseño. Ves cómo los profesionales estructuran sus proyectos, organizan componentes y aplican principios de diseño.

Además, Figma te deja crear tus propias bibliotecas de componentes y estilos. Muy útil si trabajas en varios proyectos relacionados o si colaboras con un equipo. Todos pueden acceder a los mismos recursos y mantener que todo vaya a juego.

Colaboración y retroalimentación en tiempo real

Figma destaca sobre todo por poder trabajar en equipo. Varias personas pueden trabajar en el mismo archivo a la vez, genial si trabajas con más gente o recibes feedback de clientes.

Puedes compartir tu archivo de Figma enviando un enlace. Según los permisos que pongas, podrán ver el diseño, dejar comentarios o incluso editarlo.

Los comentarios en Figma están muy bien pensados. Cualquiera con acceso puede hacer clic en un punto del diseño y dejar una nota. Facilita muchísimo la comunicación y evita malentendidos, porque los comentarios van directamente vinculados a elementos visuales concretos.

Errores comunes que debes evitar al usar Figma

Aunque Figma es bastante intuitivo, hay errores típicos de principiante que te pueden complicar la vida. Te dejamos algunos consejos para evitarlos.

Primero, mantén las capas organizadas. Es tentador empezar a diseñar sin pensar en la estructura, pero cuando el proyecto crezca te vas a arrepentir. Nombra las capas de forma clara, agrupa lo que vaya junto y usa marcos para dividir secciones.

Segundo, no te pases añadiendo elementos. Es fácil emocionarse y querer meter muchos elementos, colores y efectos. Pero la simplicidad y claridad son básicas en UX/UI.

Tercero, usa componentes y estilos siempre que puedas. Si te pillas copiando y pegando lo mismo varias veces, conviértelo en componente. Ahorrarás tiempo y todo quedará más uniforme.

Cuarto, prueba tu diseño con gente real. No des por hecho que funcionará perfectamente. Crea prototipos, compártelos y observa cómo la gente interactúa. Siempre salen problemas que no habías visto.

Y por último, no tengas miedo de preguntar. La comunidad de Figma es muy activa en foros, redes sociales y YouTube. Si te atascas, seguro que alguien ya tuvo el mismo problema y compartió la solución.

Exportar y compartir tu diseño con desarrolladores

Cuando termines tu diseño, toca compartirlo con los desarrolladores que lo van a construir. Figma facilita mucho este proceso.

Puedes exportar elementos individuales en diferentes formatos (PNG, SVG, JPG, PDF) seleccionándolos y usando «Exportar» en el panel de propiedades. Útil para enviar iconos, imágenes o recursos concretos.

Pero lo mejor es el Modo Desarrollador de Figma. Está pensado justo para devs y les da toda la info técnica: medidas, colores en hexadecimal o RGB, espaciados, tipografías e incluso trozos de código CSS.

Cuando compartes un archivo con desarrolladores, pueden activar el Modo Desarrollador y ver toda esta información sin que tengas que sacarla manualmente. Agiliza muchísimo el desarrollo y reduce errores de comunicación entre diseño y desarrollo.

Da el siguiente paso: formación profesional en diseño gráfico

Si después de trastear con Figma descubres que el diseño te gusta de verdad, quizás sea hora de plantearte una formación más seria. El diseño UX/UI tiene muchísima demanda y muy buenas perspectivas laborales.

El Curso de Diseño Gráfico de Treintaycinco mm te ofrece una formación completa que va desde los fundamentos del diseño visual hasta el uso avanzado de herramientas como Figma, Photoshop, Illustrator e InDesign. Aprendes composición, teoría del color, tipografía, diseño de marca y mucho más.

Lo bueno de esta formación es que no solo aprendes a usar las herramientas. Desarrollas mentalidad de diseñador, entiendes por qué funcionan ciertos diseños, cómo investigar usuarios, cómo mejorar tus ideas y cómo presentar tu trabajo.

Además, tener un certificado reconocido y un buen portfolio te abre muchas puertas laboralmente. Las empresas buscan constantemente diseñadores y la demanda no para de crecer.

Conclusión: Figma como punto de partida hacia el diseño

Figma ha hecho que el diseño digital sea accesible para todos, eso está claro. Ya no necesitas años de formación ni software carísimo para empezar a crear interfaces atractivas y funcionales. Con ganas de aprender, curiosidad y algo de práctica, puedes mejorar apps y webs aunque no tengas experiencia previa en UX/UI.

Ten en cuenta que el diseño es un proceso. No esperes que tu primer proyecto quede perfecto. Cada diseño que hagas te enseñará algo nuevo y te acercará más a ser un diseñador profesional.

Empieza con proyectos pequeños, explora plantillas y recursos de la comunidad, pide opiniones y, sobre todo, disfruta del proceso. El diseño es resolver problemas y ayudar a la gente a usar mejor la tecnología.

De todas formas, si en algún momento sientes que quieres ir más allá y convertir el diseño en tu profesión, el Curso de Diseño Gráfico de Treintaycinco mm estará ahí para llevarte al siguiente nivel. Pero de momento, abre Figma, crea tu primer proyecto y deja que fluya la creatividad.