Presentación
Tercera entrega, de la serie de 3, donde presentamos el flujo de trabajo para el prototipado de interfaces de usuario con Material Design 3, empleando los recursos que la última versión de este framework nos ofrece para utilizar en Figma. Rápido, aprenderás a generar el UI kit, estilos de colores, estilos de textos, tamaños de frames, retículas y otros recursos en Figma. Indispensable si quieres trabajar profesionalmente en ambos entornos. A continuación, te comparto los enlaces la primera y segunda entrega de esta serie:
- Primer contacto con Material Design 2, aspectos relevantes, componentes y más.
- Primer contacto con Material Design 3, aspectos fundamentales, componentes, y más.
¡Comencemos!
Veamos algunos datos importantes relacionados con este video:
Material Design 3
Plugin y recursos disponibles para Figma
Material 3 Design Kit, recurso oficial de MD para Figma
¿En qué consiste este recurso?
Básicamente, se trata de una guía de estilos, con su UI kit correspondiente, donde Material Design nos presenta el conjunto completo donde trabajar con Material Design 3 en Figma:
Enlace para duplicar el recurso en tu cuenta en Figma:
- Duplica el Material 3 Design Kit, aquí: https://www.figma.com/community/file/1035203688168086460
Si ya tienes el Material 3 Design Kit en tu cuenta de Figma toca ahora comprender cómo trabajar con el, modificando sus estilos con la mayor eficiencia posible, optimizando tu flujo de trabajo. Veámoslo a continuación…
¡Únete a nuestra CC!
¿Necesitas aprender a diseñar con fundamentos? Únete a nuestra Comunidad Creativa y continua aprendiendo con nuestros Talleres a medida, y Asesorías personalizadas, Foros de Diseño y Red Social, exclusivos para miembros.
¡Ya tengo el Material 3 Design Kit duplicado en mi cuenta! ¿Cómo sigo?
Si duplicaste exitosamente el Material 3 Design Kit, debes emplear el plugin oficial de Material Design 3 para trabajar con este UI Kit, o crear uno nuevo, si así lo prefieres. Con él podrás modificar los estilos de colores y textos, retículas, y demás recursos necesarios para crear interfaces de usuario utilizando Material Design, incluyendo el uso de colores dinámicos creados, automáticamente, a partir de una imagen que le suministremos.
A continuación, te comparto el enlace hacia este plugin de Figma que podrás usar siguiendo las pautas compartidas en el video compartido al inicio de este tutorial:
Material Theme Builder, plugin oficial de MD para Figma: https://www.figma.com/community/plugin/1034969338659738588
Así terminamos nuestra último tutorial de esta primera serie de tres, donde hicimos un repaso, desde los principios de Material Design 3 y Material Design 3, hasta cómo emplear el UI Kit y guía de diseño oficial de Material Design para Figma, el llamado Material 3 Design Kit, en conjunto con Material Theme Builder, el plugin oficial de Material Design 3 para crear y editar un UI kit completo, incluyendo su guía de estilos, en Figma.
Si te interesan estos y otros temas, únete a nuestra Comunidad Creativa de Diseño y aprovecha nuestros Foros de Diseño, Red Social y Campus Virtual, incluyendo un curso especial que tenemos abierto para toda la comunidad: Espacio Convergente.
Saludos y bonita jornada para ti.
Plácido Luna
