Con Alt+G también podemos encender o apagarle grid layout. 😌
Conceptos básicos de prototipado
Diseño de Prototipos: De Boceto a Alta Fidelidad
Prototipado Ágil: Beneficios para Equipos de Desarrollo
Prototipos: Baja, Media y Alta Fidelidad en el Diseño UX/UI
Ténicas para estructurar información
Patrones de Diseño UI/UX para Proyectos Rápidos
Estructuración de Sistemas UX con Objetos Reales
Diseño de Flujos de Tarea para Portales de Viajes
Prototipado de Baja Fidelidad
Prototipado rápido con InVision para portales de viajes
Sistemas de Diseño
Ventajas de Atomic Design en Prototipos de Interfaces
Identificación de Patrones en Atomic Design
Prototipado de Mediana Fidelidad
Diseño de Interfaces con Figma: Creación de Componentes Básicos
Grid de 12 Columnas: Diseño Web con Bootstrap en Figma
Librerías Compartidas de Componentes
Creación de Componentes Maestros en Figma para UI
Creación de Componentes en Diseño de Interfaz
Componentes Reactivos: Gestión y Anidación Eficiente
Estilos de Componentes en Figma: Colores y Tipografías
Creación de Librerías de Componentes en Figma
Prototipado de Alta Fidelidad
Creación de prototipos de alta fidelidad con componentes reutilizables
Conexión de pantallas en prototipos interactivos
Entregables de Diseño
Entrega de Diseños con Figma y Zeppelin para Desarrolladores
Exportación de Diseños de Figma a Zeppelin para Desarrolladores
Cierre
Diseño de Prototipos con Figma y UX Oriented Objects
Contenido Bonus
Prototipado Eficaz: Claves para Crear y Probar Ideas Rápidamente
Prototipado de Apps con Origami Studio y Sketch en Mac
Prototipos interactivos con Flinto: Diseño y Animaciones Básicas
Mentoría expert
Análisis de Usabilidad en Productos Físicos y Digitales
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Cuando se diseña un software moderno, es esencial utilizar herramientas y metodologías que permitan una estructura clara y uniforme. El grid de doce columnas es una de esas herramientas fundamentales en el diseño web. Al colocar elementos dentro de estas columnas, nos aseguramos de que la página sea adaptable y se vea bien en diferentes tamaños de pantalla. Esto implica distribuir elementos como logotipos, buscadores y otros componentes de manera armónica dentro de las columnas.
Pasos para implementar el grid de doce columnas:
Cuando trabajas en diseño, la claridad visual es esencial para garantizar que puedas hacer ajustes precisos:
El diseño no solo se trata de creatividad, sino también de eficiencia. Aquí algunos consejos para obtener un diseño limpio y funcional rápidamente:
Coman + D
o Control + D
en Windows para duplicar rápidamente los elementos que deseas repetir.Command + L
o Control + L
.La reutilización de componentes es clave para acelerar el diseño de prototipos:
Sketch es una poderosa herramienta para diseñadores, y conocer algunos trucos puede mejorar significativamente tu flujo de trabajo:
A medida que avances en el diseño, enfócate en la reutilización de elementos y en la estandarización de estilos:
El diseño es tanto un arte como una ciencia, y al dominar estas técnicas no solo serás eficiente, sino que también garantizarás un proyecto profesional y estéticamente agradable. ¡Continúa practicando y explorando!
Aportes 26
Preguntas 3
Con Alt+G también podemos encender o apagarle grid layout. 😌
Actualmente figma tiene una sección que se llama figjam dentro de la misma plataforma. Esto hace que puedas crear flujos de usuarios o tareas para así complementar tus diseños de mejor forma.
precisamente utilizamos el layout grid para alinear cada componente con los grids,
se vuelve molesto en fase de desarrollo que los componentes no esten alineados ni tengan medidas estandar.
Así va mi wireframe, todavía tengo duda si se pueden mezclar figuras como lo hice o si es una mala práctica, si me pueden responder seria de mucha ayuda!
Personalmente antes de hacer un bosquejo o la guía para el diseño primero coloco como base mi estructura de las 12 columnas sobre ello empiezo a colocar elementos, se me hace más práctico
![](
Mi aporte!
Muy buena clase, muy detallada, esto fue lo que falto en el curso de Figma, muy bien por el profe Misael
Muy buena clase explicativa!!
Para insertart imagenes, iconos o cualquier elemento para su diseño puden instalar plugins, como iconfy para los iconos o unsplash para imagenes figma tiene su market place de plugins
¿Qué es mejor Figma, Adobe xd o Skectch? en tema del prototipo final la interacción
Super bonito de como esta quedando.
Me gusta Figma para realizar prototipado.
brutal ese layout grid, hace esta herramienta lejosssss mejor que las de diseño tipo illustrator
buen contenido…
Muchas gracias por el curso, consulta técnica, ¿Cuál es la mejor resolución para comenzar a diseñar en app?
Muchas gracias por esta clase, hasta el momento había visto muchas personas hablando de las 12 columnas, pero a nadie pasando su borrador a mediana fidelidad con figma, creía que el diseño debería estar alineado de alguna manera con las 12 columnas, pero veo que no es necesario, solo debes tenerlas cómo referencia.
Seco el profe , gracias ❤️
Un atajo para ocultar las grids es con el shortcut
control shift 4
Excelente clase, siempre que realizaba los diseño hacia uno por uno en el de mediana fidelidad. Es muy buen estrategia hacer solo un componente y después reutilizarlos más adelante
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?