Conceptos básicos de prototipado

1

Diseño de Prototipos: De Boceto a Alta Fidelidad

2

Prototipado Ágil: Beneficios para Equipos de Desarrollo

3

Prototipos: Baja, Media y Alta Fidelidad en el Diseño UX/UI

Ténicas para estructurar información

4

Patrones de Diseño UI/UX para Proyectos Rápidos

5

Estructuración de Sistemas UX con Objetos Reales

6

Diseño de Flujos de Tarea para Portales de Viajes

Prototipado de Baja Fidelidad

7

Prototipado rápido con InVision para portales de viajes

Sistemas de Diseño

8

Ventajas de Atomic Design en Prototipos de Interfaces

9

Identificación de Patrones en Atomic Design

Prototipado de Mediana Fidelidad

10

Diseño de Interfaces con Figma: Creación de Componentes Básicos

11

Grid de 12 Columnas: Diseño Web con Bootstrap en Figma

Librerías Compartidas de Componentes

12

Creación de Componentes Maestros en Figma para UI

13

Creación de Componentes en Diseño de Interfaz

14

Componentes Reactivos: Gestión y Anidación Eficiente

15

Estilos de Componentes en Figma: Colores y Tipografías

16

Creación de Librerías de Componentes en Figma

Prototipado de Alta Fidelidad

17

Creación de prototipos de alta fidelidad con componentes reutilizables

18

Conexión de pantallas en prototipos interactivos

Entregables de Diseño

19

Entrega de Diseños con Figma y Zeppelin para Desarrolladores

20

Exportación de Diseños de Figma a Zeppelin para Desarrolladores

Cierre

21

Diseño de Prototipos con Figma y UX Oriented Objects

Contenido Bonus

22

Prototipado Eficaz: Claves para Crear y Probar Ideas Rápidamente

23

Prototipado de Apps con Origami Studio y Sketch en Mac

24

Prototipos interactivos con Flinto: Diseño y Animaciones Básicas

Mentoría expert

25

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

Grid de 12 Columnas: Diseño Web con Bootstrap en Figma

11/26
Recursos

¿Cómo utilizar el grid de doce columnas para diseño web?

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:

  • Agrega un grid en tu diseño, especificando que deseas doce columnas, ya que es el estándar en desarrollo web.
  • Da un margen apropiado a las columnas para facilitar la organización y distribución.
  • Ajusta los elementos dentro de estas columnas, asegurando su correcta alineación y reacción a cambios en el tamaño de la pantalla.

¿Cómo mejorar la visibilidad al diseñar?

Cuando trabajas en diseño, la claridad visual es esencial para garantizar que puedas hacer ajustes precisos:

  • Añade una transparencia a las imágenes que no son esenciales en el proceso inmediato de diseño, como se sugiere reducir la opacidad al 20% o 35%.
  • Oculta temporalmente ciertas guías o elementos para mejorar el enfoque en las áreas activas de diseño.
  • Usa herramientas de visualización, como aprendiendo a apagar o encender las guías del grid según sea necesario.

¿Cuáles son los trucos para diseñar componentes de manera eficiente?

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:

  • Duplicación de elementos: Utiliza accesos directos como Coman + D o Control + D en Windows para duplicar rápidamente los elementos que deseas repetir.
  • Consistencia en tamaños: Asegúrate de que los componentes, como iconos o botones, tengan un tamaño uniforme para mantener la coherencia en el diseño.
  • Alineación y agrupación: Usa las herramientas de alineación para organizar elementos horizontal o verticalmente, y agrupa elementos similares para simplificar tareas de duplicación y movimiento. Puedes agrupar usando Command + L o Control + L.

¿Cómo crear y reutilizar componentes en prototipos?

La reutilización de componentes es clave para acelerar el diseño de prototipos:

  • Diseño inicial simple: Comienza con bocetos rápidos que puedas mejorar más tarde, esto impulsa la fluidez del diseño.
  • Componentes multiusos: Diseña un componente genérico, como un botón o cuadro con icono, y réplicalo en diferentes partes del diseño, ajustando detalles según sea necesario.
  • Inserción de imágenes: Arrastra imágenes directamente a tu espacio de trabajo para una integración rápida y eficiente en tu diseño.

¿Qué herramientas y trucos son útiles en Sketch?

Sketch es una poderosa herramienta para diseñadores, y conocer algunos trucos puede mejorar significativamente tu flujo de trabajo:

  • Herramienta elipse y creación de iconos: Al crear iconos, procura mantener dimensiones estandarizadas, como utilizar 50x50 píxeles para coherencia visual.
  • Bloquear capas: Usa el candado en la columna de capas para fijar elementos no editables y evitar movimientos involuntarios.
  • Crea estrellas personalizadas: Ajusta las formas, separación y proporciones de estrellas u otros polígonos para que se adapten a tu diseño.

¿Qué sigue en el proceso de diseño con reutilización y estilos?

A medida que avances en el diseño, enfócate en la reutilización de elementos y en la estandarización de estilos:

  • Reutilización continua: Una vez creados tus componentes, replicar solo cuando sea necesario, asegurando que cada réplica esté alineada con el diseño general.
  • Estiliza para simplicidad: Crear estilos definidos facilitará la actualización de componentes y el mantenimiento de archivos, asegurando uniformidad y una fácil gestión de cambios.

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

![](

no tiene nada que ver con el hilo de la clase pero cabe corregir que la palabra no es 'aplastar 'para el verbo que se usa con el teclado es 'presionar'! independiente del pais. Aplastar es derrotar, humillar, vencer.

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