Crear ilustraciones con trazos orgánicos directamente en Figma es posible sin necesidad de recurrir a herramientas externas. Figma Draw transforma tu espacio de trabajo en un lienzo donde puedes usar brochas, lápices y plumas para lograr ese aspecto de sketch hecho a mano que aporta calidez y personalidad a tus diseños. A continuación, se explica paso a paso cómo aprovechar estas herramientas para diseñar un empty state atractivo y profesional.
¿Qué es un empty state y por qué necesita una buena ilustración?
Un empty state es la pantalla que ve el usuario cuando aún no hay datos disponibles, por ejemplo, al crear una cuenta nueva sin transacciones registradas [0:18]. Este estado suele incluir una imagen, un título, una descripción y una llamada a la acción. El problema es que muchas veces la imagen resulta demasiado simple o genérica.
Para resolver esto, se activa el modo Figma Draw mediante el botón correspondiente en la barra de herramientas [0:42]. Al hacerlo, aparecen tres instrumentos nuevos:
- Pen (pluma): ideal para trazos precisos y edición de nodos.
- Pencil (lápiz): perfecto para dibujo libre y formas orgánicas.
- Brush (brocha): permite trazos con texturas y perfiles de ancho dinámicos.
¿Cómo configurar la brocha para trazos dinámicos?
Al seleccionar la herramienta de brocha, puedes ajustar parámetros como el stroke (grosor del trazo), que en este ejemplo se establece en 10 píxeles [1:01]. También es posible elegir brochas prehechas que ofrecen diferentes estilos de trazo.
Una vez dibujados los trazos, si no estás conforme, selecciona el elemento y accede al ícono de ajustes para modificar el perfil de ancho [1:33]. Las opciones permiten que el trazo empiece grueso y termine delgado, que sea uniforme o que tenga un grosor más pronunciado. Esta flexibilidad es clave para lograr un estilo visual coherente.
¿Cómo editar nodos y agregar texturas?
Haciendo doble clic sobre un trazo accedes a sus nodos, lo que te permite reposicionar puntos y ajustar curvaturas [1:50]. Además, puedes seleccionar varios nodos simultáneamente para realinearlos.
Para darle una sensación de papel al diseño, se agrega un efecto de ruido desde el panel de efectos [2:05]. Allí puedes modificar la escala y la densidad hasta obtener la textura deseada. Este detalle sutil marca una gran diferencia en la percepción final de la ilustración.
¿Cómo crear un fondo orgánico con la herramienta pencil?
Una vez listos los elementos principales (en este caso, los tickets), se usa la herramienta pencil para dibujar un fondo con forma ovalada e irregular [3:00]. El trazo no necesita ser perfecto; lo importante es mantenerse dentro de los límites del área deseada.
Al terminar el trazo, se presiona enter y se utiliza la herramienta de paint para rellenar la forma [3:22]. Si el relleno no funciona, generalmente se debe a que el trazo no cerró correctamente. En ese caso, la herramienta pen permite unir los extremos sueltos para completar la figura [3:28].
Después de rellenar, se reorganizan las capas arrastrando el fondo debajo del grupo de tickets en el panel de capas [3:40].
¿Qué ajustes finales mejoran el resultado?
Varios pasos adicionales refinan la composición:
- Simplificar el trazo: reduce la cantidad excesiva de nodos que genera el dibujo libre [3:55].
- Quitar el stroke innecesario: si el contorno del fondo no aporta, se elimina [4:17].
- Ajustar opacidad y color: un tono ligero alineado con el branding del proyecto funciona mejor [4:40].
- Herramienta bend: permite modificar la curvatura de nodos individuales para mayor coherencia visual [4:10].
Para separar visualmente los tickets del fondo, se aplica una sombra sutil desde el panel de efectos con un blur bajo y una opacidad cercana al 10 % [5:00]. Esta sombra se puede copiar con Cmd + C y pegar con Cmd + V en otros elementos para mantener consistencia [5:15].
¿Por qué Figma Draw cierra la brecha entre rigidez y flexibilidad?
Las herramientas geométricas tradicionales de Figma producen resultados precisos pero rígidos. Figma Draw complementa ese enfoque con trazos libres y brochas que permiten crear composiciones con apariencia de sketch [5:30]. Esta combinación es especialmente útil para empty states, onboardings y cualquier pantalla que necesite transmitir cercanía al usuario.
El flujo de trabajo demostrado, desde la brocha hasta la edición de nodos y la aplicación de texturas, es replicable para otros estados vacíos como el dashboard, cuentas o budgets [5:38]. ¿Ya probaste Figma Draw en alguno de tus proyectos? Comparte tu experiencia y los resultados que obtuviste.
