UID | Diseño de interfaces de usuario

UI Wireframing Starter Kit para Figma

Un UI Kit para el prototipado de baja fidelidad (wireframing), especialmente orientado a dispositivos móviles, con más de 50 componentes y 100 variantes:

Entre otros:

• Íconos
• Botones
• Campos de entrada
• Menús
• Selectores de fecha y hora
• Barra de búsqueda
• Casillas de verificación
• Pestañas de texto y pestañas de iconos
• Alertas
• Paginación
• Reproductor de música y video
• Marcos para dispositivos iOS, Android y Web

El kit incluye, además, bloque de ejemplo que pueden resultarte de utilidad, en caso de que estés comenzando el el diseño de interfaces de usuarios:

Duplica el recurso en tu cuenta de Figma, aquí: https://www.figma.com/community/file/1088059168988686975

Imagen de cabecera: Captura de pantalla desde la página del recurso compartido en la Comunidad de Figma.

#UID #UI #Wireframing #iOS #HIG #MD #MaterialDesign #WireframingWeb #PrototipadoWeb #PrototipadoIOS #PrototipadoMD #RecursosClases #RecursosDeClases #MaterialCursos #CursosUID #CursosIxD #IxD

UID para dispositivos móviles: Starter Kit 2.0

Si diseñas interfaces de usuario para dispositivos móviles, te comparto este UI Kit con recursos útiles como punto de partida, tanto para iOS como para Material Design:

Es importante destacar que, si bien es cierto que el kit es un excelente recurso complementario, no sustituye a los kits oficialmente compartidos (ver enlaces relacionados).

Duplica el recurso en tu cuenta de Figma, aquí: https://www.figma.com/community/file/905721148293392121

Enlaces relacionados:

Perfiles oficiales en la Comunidad de Figma:

• Material Design: https://www.figma.com/@materialdesign
• Apple: https://www.figma.com/@apple

Imagen de cabecera: Captura de pantalla parcial desde la página del recurso compartido.

#iOS #MaterialDesign #MaterialDesign3 #MD3 #UID #UI #RecursosFigma #Figma #FigmaCommunity #materialCursos #MaterialCursos

Accesibilidad en Figma | Mejores plugins para accesibilidad web y móvil

Comparto este video del canal de Mokkap (https://www.youtube.com/@mokkapp) en el que, con alguna observación a corregir sobre los niveles de accesibilidad mencionados, presenta de manera bastante clara, dos plugins de Figma relacionados con este tema:

• Stark: https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker
• Include: https://www.figma.com/community/plugin/1208180794570801545/includeaccessibility-annotations?searchSessionId=lz4p6ks0-q6ox0508vdp

URL del video recomendado: https://youtu.be/3lryfC4MpNM?si=RhM0AAbCUfdHrxmg

Para conocer tu interés en este tipo de recursos para Figma, dejo una encuesta al pie de esta entrada.

Saludos y bonita jornada para ti.

Plácido.

#Figma #PluginsFigma #PluginsParaFigma #Stark #Plugins #PluginInclude #Include #PluginStark #VideosYouTube #VideosUX #VideosUI #VideosRecomendados

Prototipado para MD3 en Figma, con eficiencia

Comparto tres tutoriales, donde hablamos de las características de Material Design, desde su versión 2 hacia la última versión de este sistema de diseño, que te permitirá comprender, de manera global, la forma de prototipar en Figma para Material Design 3:

• MD2 vs. MD3 (1/3) | Material Design 2: https://www.formaciongrafica.net/blog/tutoriales-online/uid/md2-vs-md3-material-design-2/
• MD2 vs. MD3 (2/3) | Material Design 3: https://www.formaciongrafica.net/blog/tutoriales-online/uid/md2-vs-md3-material-design-3/
• Prototipado en Figma con MD3 (3/3): https://www.formaciongrafica.net/capacitaciones/tutoriales-online/uid/md2-vs-md3-material-design-3/

En cada enlace encontrarás los enlaces necesarios hacia la documentación oficial de Material Design y los videos correspondientes a cada tema.

Espero que los recursos compartidos, te resulten de utilidad :)

¡Saludos y bonita jornada para ti!

Plácido.

#ui #uid #materialDesign #materialDesign3 #prototipado #MD2 #MD3 #MD

Prototipado web con Bootstrap 5 (ii)

Recursos desde la Comunidad de Figma (Figma Community)

Complementando un recurso compartido recientemente (Bootstrap 5 Design System - UI Kit | https://cc.formaciongrafica.net/publicacion/bootstrap-5-design-system-ui-kit), el que te recomiendo leer, comparto un segundo kit de componentes de Bootstrap 5, desde la comunidad de Figma: https://www.figma.com/community/file/876022745968684318

Beneficios de este recurso

• Muy bien ordenado y claro
• Una colección justa de componentes para Bootstrap 5 y una colección acotada de íconos, pero que pueden ser el conjunto exacto para trabajar tus prototipos de media fidelidad de forma rápida y eficiente, cuando esto sea suficiente.

Enlaces relacionados:

• Figma: https://www.figma.com/
• Community de Figma: https://www.figma.com/community/
• Recurso compartido: https://www.figma.com/community/file/1044316192441037087
• Nuestra cuenta en la comunidad de Figma: https://www.figma.com/@formac_grafica

Nota: La cabecera de esta publicación corresponde a una captura de pantalla ilustrativa desde la página del recurso compartido.

#Figma #Community #FigmaCommunity #recursosFigma #uid #Bootstrap #Bootstrap5 #prototipadoWeb #maquetaciónWeb #recursosDeClases #materialDeApoyo #materialCursos #UID #IxD #retículas #retículasWeb #retículasBootstrap #retículasBootstrap5

Prototipado web con Bootstrap 5

Recursos desde la Comunidad de Figma (Figma Community)

Como siempre mencionamos en clases, es importante mantener la coherencia interna de las páginas de un sitio web, así como los estándares existentes. Para ello, es importante determinar tanto el tipo de aplicación o sitio a diseñar, como los frameworks y guías de estilos que vayamos a emplear.

En esta ocasión te comparto "Bootstrap 5 Design System - UI Kit", un completo sistema de diseño (sí, para quienes saben mi posición respecto a otros sistemas de diseño en Figma, a los que suelo definir más correctamente como guías de estilos, en este caso sí me animo a llamarlo sistema de diseño): https://www.figma.com/community/file/1044316192441037087

¿Qué beneficios ofrece?

• Bien documentado
• Estilos tipográficos y de color
• Retículas, espaciados y layouts bien presentados
• Un completísimo kit de componentes para Bootstrap 5

Gracias Joel Ángel por el enlace original hacia el recurso en la comunidad de Figma.

Enlaces relacionados:

• Figma: https://www.figma.com/
• Community de Figma: https://www.figma.com/community/
• Recurso compartido: https://www.figma.com/community/file/1044316192441037087
• Nuestra cuenta en la comunidad de Figma: https://www.figma.com/@formac_grafica

Nota: La cabecera de esta publicación corresponde a una captura de pantalla ilustrativa desde la página del recurso compartido.

#Figma #Community #FigmaCommunity #recursosFigma #uid #Bootstrap #Bootstrap5 #prototipadoWeb #maquetaciónWeb #recursosDeClases #materialDeApoyo #materialCursos #UID #IxD #retículas #retículasWeb #retículasBootstrap #retículasBootstrap5

Crea un efecto de precarga en Figma

El efecto Afder delay aplicado de manera creativa

Imagen superior: Captura de pantalla desde el video compartido.

El tutorial muestra, en pocos minutos, la técnica para crear un efecto de precarga utilizando Figma: https://www.youtube.com/watch?v=ARxUAjZCFuE

¿Cómo perfecciono la técnica?

Si bien el tutorial es claro y logra buenos resultados, recuerda que las animaciones en Material Design cumple algunos roles, y tienen comportamientos específicos en algunos casos. Toca entonces conocer las pautas que se incluyen en las guías de estilo de Material Design 3:

Animaciones con MD3

• Introducción: https://m3.material.io/styles/motion/overview
• Easing y duración: https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
• Tokens: https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
• Patrones de transición: https://m3.material.io/styles/motion/transitions/transition-patterns
• Aplicando transiciones: https://m3.material.io/styles/motion/transitions/applying-transitions

¡Gracias Alessandra por el enlace al videotutorial!

Saludos y bonita jornada.

Plácido.

Imagen de cabecera: Captura de pantalla ilustrativa tomada desde https://m3.material.io/styles/motion/overview

#recursosDeClases #materialDesign3 #MD3 #MD #materialDeApoyo #recursosDeApoyo #materialCursos #Figma #tutorialesUI #ui #uid #RecursosUI #RecursosMD #Animación #AnimacionesEnFigma #Motion #MotionMD3 #MD3Motion #IxD #Ix #DiseñoDeInteracción #MaterialCursosIxD #MaterialCursosUID

Crea y anima un carousel estilo Material Design 3

Técnica fácil en Figma

Imagen superior: Captura de pantalla desde el video compartido.

El tutorial muestra, en pocos minutos, la técnica para crear un carousel para Material Design 3 utilizando Figma: https://www.youtube.com/watch?v=ZBKS7stXSio

¿Cómo perfecciono la técnica?

Si bien el tutorial es claro y logra buenos resultados, toca conocer las pautas que se incluyen en las guías de estilo de Material Design 3: https://m3.material.io/components/carousel/guidelines

¡Gracias Alessandra por el enlace del tutorial!

Saludos y bonita jornada.

Plácido.

#recursosDeClases #materialDesign3 #MD3 #MD #materialDeApoyo #recursosDeApoyo #materialCursos #Figma #Carousel #tutorialesUI #ui #uid #RecursosUI #RecursosMD #MaterialCursosIxD #MaterialCursosUID

Tutorial breve, en respuesta a consulta de clases

¿Puedo prototipar en Figma a partir de una plantilla de WordPress?

Con este tutorial aprenderás a importar en Figma el diseño de una plantilla de WordPress, o de un sitio web en cualquiera, para prototipar a partir del resultado de esta importación, utilizando el plugin Builder.io:

• Enlace al tutorial en YouTube: https://www.youtube.com/watch?v=Om83xFPB1SM
• Figma: https://www.figma.com/
• Plugin Builder.io: https://www.figma.com/community/plugin/747985167520967365/...
• Nuestra cuenta en la comunidad de Figma: https://www.figma.com/@formac_grafica
• Plantilla utilizada en el tutorial: https://wpastra.com/templates/websitedemos-net-love-nature-02/
• Vista empleada: https://wpastra.com/templates/websitedemos-net-love-nature-02/

¿Quieres aprender a prototipar sitios web utilizando Figma? Escríbenos: https://www.formaciongrafica.net/contacto/

Saludos y bonita jornada para ti.

Plácido.

#WordPress #Prototipado #Figma #tutoriales #uid #formaciónGráfica #prototipadoWeb

El término squircle es una combinación de las palabras, en inglés, square (cuadrado) y circle (círculo), referido a una forma geométrica intermedia con las características de ambos.

Características y propiedades

1. Forma intermedia entre el círculo y el cuadrado, que le da una apariencia más suave y amigable que el cuadrado debido a sus bordes redondeados, pero con un equilibrio y estructura más estable que el círculo.
2. En un sistema cartesiano, se puede definir, matemáticamente, mediante la siguiente ecuación: x^4 + y^4 = r^4, r es el radio del squircle. Variaciones en esta ecuación pueden ofrecer aspectos más suaves o redondeados.
3. Curvatura constante: A diferencia de un cuadrado, el squircle tiene una curvatura constante en sus bordes, lo que lo hace visualmente más agradable, que, en muchos casos, permite rellenos con degradados más suaves, y pudiendo ser escalados, manteniendo sus propiedades.

El uso del squircle en diseño gráfico y en el diseño de interfaces de usuario suele usarse, debido a sus propiedades estéticas y funcionales:

1. En el diseño de interfaces de usuario (UID) los squircles pueden emplear el diseño de contenedores de iconos, botones y otros elementos. Apple, por ejemplo, los suele utilizar para los iconos de sus aplicaciones en iOS.
2. En el diseño gráfico se pueden emplear, por ejemplo, en el diseño de branding, donde pueden dar a los logotipos, o sus partes, una apariencia más moderna, amigable y atractiva.
3. En el diseño de productos físicos, como relojes o dispositivos móviles, entre otros, emplean el squircle para mejorar o dar un aspecto más personalizado a su apariencia.

Más información: https://es.wikipedia.org/wiki/Squircle

Imagen de cabecera:

• La imagen corresponde a una captura parcial de la original publicada en: https://es.wikipedia.org/wiki/Squircle#/media/Archivo:Superellipse_chamfered_square.svg
• Licencia de uso: https://commons.wikimedia.org/wiki/File:Superellipse_chamfered_square.svg

#figurasGeométricas #Geometría #Matemáticas #squircle

Durante esta semana estuvimos trabajando sobre el prototipado de interfaces de usuario, tanto para iOS como para Android.

Uno de los asuntos más importantes en este sentido radica en saber, de manera fundamentada, los requerimientos necesarios para prototipar, de manera correcta, para uno y otro entorno. Más específicamente, hablamos sobre las Human Interface Guidelines de Apple, y de Material Design 3, impulsadas por Google:

• Human Interface Guidelines (documentación oficial):
• https://developer.apple.com/design/human-interface-guidelines/
• Material Design 3 (documentación oficial):
• https://m3.material.io/

También, compartimos varios recursos disponibles en la Comunidad de Figma, fundamentales para optimizar nuestros procesos de prototipado:

• Cuenta de Apple en Figma Community: https://www.figma.com/@apple
• Design Kit oficial de Apple para iOS 17 and iPadOS 17:
• https://www.figma.com/community/file/1248375255495415511
• Apple Design Resources - App Icon Production Templates:
• https://www.figma.com/community/file/1250144691121363237
• Cuenta de Material Design en Figma Community: https://www.figma.com/@materialdesign
• Material 3 Design Kit:
• https://www.figma.com/community/file/1035203688168086460
• Android UI Kit:
• https://www.figma.com/community/file/1237551184114564748
• Material Design Icons:
• https://www.figma.com/community/file/1014241558898418245
• Material Theme Builder, para Material Design 3:
• https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder
• Visualizing dynamic color in your app with Material Design:
• https://www.figma.com/community/file/1035197037666593721

También hablamos sobre una de las formas contenedoras para los íconos de un sistema: El squircle. ¿Lo conocías? ¿Conoces sus cualidades geométricas y el posible beneficio al momento de aplicar degradados sobre superficies con esta forma?

Capacítate con nuestros talleres a medida (https://www.formaciongrafica.net/capacitaciones/talleres-a-medida/) y asesorías personalizadas de diseño (https://www.formaciongrafica.net/capacitaciones/asesorias-personalizadas/), y forma parte de nuestra Comunidad Creativa FG, para seguir aprendiendo, con fundamentos.

Saludos y bonita jornada para ti.

Plácido Luna.

#iOS #materialDesign #materialDesign3 #md #md3 #android #humanInterfaceGuidelines #apple #google #diseñoUI #prototipadoUI #talleresPersonalizados #talleresUI #themeBuider #materialThemeBuider #dynamicColor #material3DesignKit #androidUIkit #materialDesignIcons #íconos