Figma como herramienta principal de UX/UI

Curso de Fundamentos de Diseño de Interfaces UX/UI

Contenido del curso

Intro

Heurísticos

Básicos de User Interface

Animación

Cierre

Live Class

20
Conceptos Básicos de Diseño de Interfaces (UI)
60:23 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:09

Figma como herramienta principal de UX/UI

Curso de Fundamentos de Diseño de Interfaces UX/UI

Clase 3 de 20

Clase 3 / 20

Recursos

Antes de abrir cualquier programa, recuerda algo: en diseño digital todo empieza con un problema por resolver. Sin entender ese problema, no hay diseño posible. Por eso, antes de saltar a Figma o a cualquier otra herramienta de diseño UX/UI, primero defines el medio y luego eliges el software adecuado.

A veces papel y lápiz son lo más rápido para arrancar. Cuando la idea ya está más clara, ahí sí pasas a la herramienta correcta.

¿Qué herramientas de diseño digital existen y para qué sirven?

Cada programa resuelve un tipo distinto de problema. Conocer su propósito te ayuda a no usar un martillo cuando necesitas un destornillador.

Lightroom: catalogar y retocar fotografías.
Blender: diseño y modelado en 3D.
Photoshop y Pixelmator: retoque de imágenes.
Illustrator: ilustración vectorial.
InDesign: diseño editorial.
Sketch y Figma: diseño digital de UX/UI.

En este curso el foco está en Figma, y hay una razón clara para esa elección.

¿Por qué usar Figma para diseño UX/UI?

Figma resuelve varios dolores históricos del diseño digital: archivos perdidos, versiones desactualizadas y falta de colaboración en tiempo real [01:30].

Tus ficheros viven en la nube, así que dejas de preocuparte por carpetas o respaldos.
Compartes cualquier archivo con una simple URL.
Tiene guardado automático, ideal cuando se va la luz o cierras el navegador sin querer.
Es 100% colaborativo: varias personas diseñan y comentan al mismo tiempo.
Funciona en cualquier plataforma, incluido Windows, porque es una web app que solo necesita un navegador.

¿Qué es Figma? Es una aplicación web de diseño UX/UI que vive en la nube, permite colaboración en tiempo real y funciona en cualquier sistema operativo con solo un navegador.

Esa última característica es clave si trabajas en remoto, porque elimina fricciones de instalación y compatibilidad.

¿Cómo está organizada la interfaz de Figma?

Al entrar a un fichero, te encuentras con una estructura predecible que se repite siempre [03:30]. Entenderla te ahorra tiempo desde el primer día.

¿Qué hay en la barra de navegación y la barra de herramientas?

En la parte superior está la navigation bar, donde regresas al home y ves las pestañas de los ficheros abiertos. Justo debajo aparece el toolbar con las herramientas principales para dibujar vectores, añadir texto, compartir, previsualizar y prototipar.

Desde ahí controlas casi todas las acciones del día a día.

¿Qué muestran los paneles laterales y el canvas?

El área principal se divide en tres zonas [04:15]:

A la izquierda, el listado de capas.
En el centro, el canvas, donde ocurre todo tu diseño.
A la derecha, el panel de propiedades.

El panel de propiedades es dinámico: cambia según lo que tengas seleccionado en el canvas. Eso significa que no te muestra opciones inútiles, solo las relevantes para el elemento activo.

¿Cómo funcionan las capas y las propiedades en Figma?

La organización en Figma se hace por capas, igual que en otros programas de diseño, pero con atajos que aceleran tu flujo [05:00].

Puedes reordenar capas arrastrándolas con el cursor o usando shortcuts de teclado para subirlas y bajarlas. Cambiar el orden afecta qué elemento queda encima de otro en el canvas.

¿Para qué sirven las capas en Figma? Para controlar el orden visual de los elementos. La capa de arriba en el panel se ve por encima en el canvas, y puedes reorganizarlas con drag and drop o atajos de teclado.

¿Cuáles son las propiedades básicas de un elemento?

Aunque el panel derecho cambia, hay propiedades que casi cualquier elemento comparte [05:50]:

Posición, tamaño y rotación, en la parte superior derecha.
Relleno, opacidad, borde y efecto, en la zona inferior del panel.

Estas propiedades son tu kit básico para empezar a dar forma a cualquier diseño.

¿Cuál es la diferencia entre opacidad de relleno y opacidad de capa?

Aquí viene un detalle que confunde a quienes empiezan. Si aplicas opacidad al relleno, solo afecta al fondo del elemento, dejando el borde intacto. En cambio, si aplicas opacidad a toda la capa, afecta tanto al relleno como al borde [06:40].

¿Cuándo uso opacidad de relleno vs opacidad de capa? Usa opacidad de relleno cuando quieras conservar el borde visible y suavizar solo el fondo. Usa opacidad de capa cuando necesites desvanecer el elemento completo.

Este pequeño matiz te da control fino sobre la jerarquía visual de tus diseños, y es de esos detalles que marcan la diferencia entre un diseño cuidado y uno apresurado. Cuéntame en los comentarios qué herramienta de diseño usabas antes de Figma.

Daniel Andriy Carrillo Marulanda

Hace 3 años

Introdución al software

Todo comienza por un problema que debemos resolver, sin entende el problema, no existe diseño, una vez conoces el medio y el problema debes buscar la herramienta adecuada.

Herramientas en el mercado:

Light Room: Catalogar y retocar la organización de fotografias
Blender: Diseño y modelado 3d
Photoshop y PixelMator: retoque de imágenes
ILustrator: Diseño Vectorial
InDesign: Diseño editorial
Figma y Sketch: Diseño digital UX/UI

¿Por qué figma?

Todo esta en la nube, no debes preocuparte por guardar archivos o buscarlos
Puedes compartir tu diseo tan solo compartiendo un link
Guardado automatico
Es 100% colaborativa, UX/UI es una carrera que tiene mucha comunicación de por medio y Figma facilita esta
Esta disponible para cualquier plataforma, inclu puedes usarla desde el navegador
Puedes organizar tus archivos

Propiedad básicas que tiene cualquier elemento en Figma

Posición
Tamaño
Rotación
1. Relleno
2. Opacidad
3. Borde
4. Efecto
  1. Opacidad de relleno
  2. Opacidad de capa

Opiniones personales sobre Figma

Creo que Figma es la mejor herramienta de UX/UI, vengo de la suite de adobe y la gran diferencia es que FIgma hace que todo sea mucho más sencillo, comodo, intuitivo, es menos saturante y el entorno de Figma es agradable, te da muchas opciones de forma gratuita y la verdad es que tiene muchos recursos en la comunidad para practicar. Creo que uno de los problemas de adobe es que no es amigable con los usuarios nuevos, aparte de que si tienes una computadora de gama baja, muy dificilmente vas a poder usar sus servicios de forma optima, como figma lo puedes usar hasta en el navegador, le da libertad a los creadores con pocos recursos de crear, simplemente me encanta Figma.

Idelbrando Manuel Roldan Carmona

Hace 3 años

Hola Julio una consulta te haz preparado en platzi en la rama de Design UX-ui que tal te ah ido?

Comentarios (42)42 comentarios

Verónica Muskus Díaz

Hace 4 años

Guido Francisco Rodriguez Alvarez

Esteban Ortiz

Cristian Castro

Abel Jaimes

Hace 2 años

Jorge Almanza

Osvaldo Arguedas Sibaja

Liz A. Arguello F.

Juan Pablo Lozano Villota

Mercedes Sánchez

Andreina Colmenares

Jose Miguel Pantigoso Puraca

Alberto Tonatiuh Santos González

Silvia Gutierrez

Valeria Gonzalez

Juan Sebastian Vega Hernandez

Ariel Hernán Contini

Mauricio Alejandro Leal

Marco Carrero

Santiago González

José Luis Méndez Miranda

Manuel Martínez Ortiz

Hace un año

Vivian Bernal

Flavia Di Giorgio

José Eder Guzmán Mendoza

Hace 3 meses

Julian Camilo Jaramillo Osorio

Hace 10 meses

Intro

Fundamentos de Diseño UI con Figma para Principiantes

Fundamentos del Diseño Digital: Pantallas y Color

Figma como herramienta principal de UX/UI

Historia del diseño: arte, HCI y buen diseño

Heurísticos

Principios heurísticos de percepción en UX

Principios Heurísticos de Percepción y Comportamiento

Principios Heurísticos de Relación y Jerarquía en Diseño

Principios heurísticos de forma en diseño

Principios Heurísticos de Forma: Iconos, Remarcar y Proporción Áurea

Principios Heurísticos de Interacción en Diseño Digital

Básicos de User Interface

Arquitectura de información en apps móviles

Tipografía y sus propiedades en Figma

Vectores y operaciones booleanas en Figma

Qué es un sistema de diseño y cómo usarlo

Organización de archivos en Figma para equipos

Animación

Principios de animación en diseño digital

Cómo prototipar navegación y scroll en Figma

Cierre

Exploración de Portafolios en Figma para Inspiración Creativa

Diseño Digital: Principios, Herramientas y Colaboración en Figma

Live Class

Conceptos Básicos de Diseño de Interfaces (UI)

Figma como herramienta principal de UX/UI

Progreso del curso

Intro

Heurísticos

Básicos de User Interface

Animación

Cierre

Live Class

Recursos

Recursos