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
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
Si estás comenzando con el diseño de interfaces de usuario para iOS y otros entornos dentro del ecosistema de Apple, te comparto el enlace a un video en YouTube donde se explican aspectos indispensables para comprender el proceso desde las bases: https://www.youtube.com/watch?v=bUj5-O7jhOE
Si tienes problemas con el inglés, el video dispone de subtítulos, y aunque ya tiene 2 años desde su publicación, te recomiendo mirarlo porque abarca el diseño de interfaces para iOS desde las bases de las HIG, utilizando inclusive su documentación oficial (https://developer.apple.com/design/human-interface-guidelines/).
Si a futuro piensas desarrollar tu carrera en el UID siguiendo las HIG, te recomendaría que sigas el canal del autor (https://www.youtube.com/@code-with-karma/videos).
Necesitas recursos de Figma para el diseño de interfaces de usuario sobre las HIG, búscalos en la cuenta oficial de Apple, dentro de Figma Community: https://www.figma.com/@apple
¿Debatimos sobre estos y otros temas de sobre el diseño de interfaces de usuario?
Estamos en contacto :)
Plácido.