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
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
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
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
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
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
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
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