Cómo usar Material Design 3 en Figma

Si quieres diseñar con Material Design 3 en Figma este artículo te interesará.

Núria es una seguidora de LinkedIn, hace unos días me mandó un mensaje privado:

«Me gustaría saber si tienes algún tutorial explicando cómo aplicar Material Design 3 a Figma. Ya me dices. Gracias.»

A continuación te dejo el contenido que preparé para ella y para todas las personas que tengan la misma inquietud.

Explorar el sitio web oficial de Material Design 3

Como primer paso te sugiero revisar el sitio web oficial de Material Design 3 para conocer sus principios y fundamentos de uso.

No exagero si te digo que ese sitio web es una mina de información que va más allá de la simple descarga de componentes.

Google ofrece:

1. Fundamentos de uso para aprender los principios esenciales de Material Design 3. Entender los fundamentos te permitirá tomar mejores decisiones de diseño.
2. Directrices de interfaz para saber cómo utilizar los diferentes elementos de interfaz, como botones, cards, colores, tipografías, etc. Comprender estas directrices es crucial para lograr coherencia y usabilidad en tu diseño.
3. Consejos y buenas prácticas para implementar los elementos de Material Design de manera efectiva. Con estos insights aprenderás cómo combinar colores, trabajar con sombras y optimizar la accesibilidad de tu proyecto.
4. Cómo no implementar es una de las cosas que más me gusta de la información oficial de Material Desgin. Es fundamental revisar los ejemplos de malas implementaciones para evitar errores y garantizar que tu diseño siga los estándares.

Después de revisar y comprender los fundamentos puedes instalar Material Design en Figma.

Antes, asegúrate de tener una cuenta en Figma y haber iniciado sesión.

Instalar el kit de Material Design 3

La vía más rápida para diseñar en Figma con Material Design es instalar el kit creado por Google.

Importar el kit

1. Introduce «material 3 design kit” en el buscador de Figma Community.
2. En los resultados encontrarás el kit, lo reconocerás porque en el campo de autor pone Material Design.
3. Pínchalo para entrar en su página.
4. Una vez dentro pincha el botón que pone “Open in Figma”.
5. Figma abrirá una nueva pestaña con el kit, que quedará copiado como un archivo tuyo en tu cuenta.

¿Ya podrías empezar a trabajar en tus diseños?

Si, pero antes te recomiendo dar otros pasos.

Adaptar Material Design a tu proyecto

Diseñar tu app o web con los colores oficiales de Google no es una buena idea.

La herramienta Material Theme Builder te ayudará a personalizar el kit de Material Design 3 con los colores de tu marca o proyecto. Es un plugin que también encontrarás en Figma Community.

Mi recomendación es que antes de empezar a trabajar hagas pruebas y te familiarices con el plugin. Cuando llegues a este paso entenderás por qué te dije que dediques un tiempo considerable a estudiar toda la información que Google ofrece en el sitio oficial de Material Design.

Lo siguiente es personalizar el theme, usa el plugin y ve haciendo los cambios necesarios para que tus usuarios “se sientan en casa” cuando usen tu producto digital.

Si quieres que publique un tutorial para usar Material Theme Builder en mi canal de YouTube déjamelo saber dejando un comentario.

Trabaja junto a los developers

El siguiente es un consejo de perro viejo.

En todo momento reúnete con tu equipo de desarrolladores para alinear tareas, tú con ellos y ellos contigo.

Esto es sumamente importante si la personalización del theme que quieres hacer es más profunda.

La gente que lleve tus diseños a código te dirá hasta dónde puede hacer cambios.

En todos los proyectos que hice con Material Design:

• Trabajé usando la herramienta para personalizar temas.
• Y atención, hice cambios en algunos componentes del kit, porque lo requería el producto que estaba creado.
• Lo hice siempre con la ayuda de mi equipo de developers.

Por eso me gusta recalcar que una conexión fluida entre todas las partes del equipo es clave para que el proyecto se haga bien, sin fisuras y en menos tiempo.

Crea una librería

Renombra el archivo y conviértelo en una librería.

Después de publicarla la podrás vincular a tus archivos del proyecto.

Si en algún momento necesitas hacer cambios en colores, estilos de textos, etc, los haces y los propagas para actualizar el aspecto en todos los archivos donde tengas vinculada la librería.

Dado que Material Design puede recibir actualizaciones, verifica periódicamente si hay nuevas versiones del kit y actualiza tu librería en consecuencia. Comenta los upgrades con el equipo de desarrollo.

Te recomiendo también unirte a comunidades de diseño y consultar recursos adicionales para mantenerte al día con las mejores prácticas y consejos.

Siguiendo estos pasos llegarás a crear una interfaz de usuario atractiva y funcional.

Diseñar con Material Design

Crea un nuevo archivo y vincula la librería pulsando el botón “Add to file” que encontrarás en el modal Libraries que podrás lanzar desde el icono del mismo nombre ubicado en la pestaña Assets del sidebar derecho de Figma.

Componentes y estilos

• Encuentra y usa componentes, iconos y estilos que se ajusten a tu proyecto.
• Familiarízate con las variaciones de componentes, recuerda las pautas de diseño que aprendiste en el sitio web de Material Design 3. Te recomiendo siempre trabajar con la web de los fundamentos abierta en una pestaña de tu browser.

Wireframes y diseño de Interfaz

• Comienza creando wireframes utilizando los componentes básicos del kit.
• Ajusta tipografías, colores y espaciados de acuerdo con las directrices de Material Design 3.
• Utiliza los grids styles para mantener la consistencia.

Interactividad

• Agrega interactividad a tus diseños utilizando los prototipos en Figma.
• Define transiciones entre pantallas y animaciones según las recomendaciones de Material Design 3.

Colaboración y comentarios

• Comparte tu diseño con otras personas de tu equipo, con los desarrolladores y con todas las partes interesadas.
• Utiliza la función de comentarios de Figma para hacer preguntas, pedir feedback y realizar ajustes.

Pruebas e iteración

• Realiza pruebas de usabilidad con usuarios reales si es posible.
• Itera tus diseños teniendo en cuenta los resultados de los tests.
• Asegúrate de mantener la coherencia con las directrices de Material Design 3 y de comentar los cambios con tus desarrolladores.

Exportar y entregar

• Cuando termines tus diseños y todos los stakeholders te den luz verde puedes exportar los assets y archivos que usarán los developers.
• Asegúrate de proporcionar documentación detallada sobre los componentes y estilos utilizados.

Creo que ya puedes empezar a diseñar en Figma con Material Design 3.

Si tienes alguna duda puedes preguntar dejando un comentario, te responderé.

Muchas gracias.