Visión general de los Sistemas de Diseño

1

Construcción de Sistemas de Diseño con Figma

2

Conceptos Básicos de Figma para Sistemas de Diseño

3

Creación de un Sistema de Diseño: Pasos y Estrategias

4

Diseño Neobrutalista: Construcción de un Sistema de Diseño

5

Taller de Creación de Nombres para Design Systems

6

Documentación de Fundamentos en Sistemas de Diseño

Guía de Estilos con Figma

7

Conceptos y beneficios de los design tokens en diseño y desarrollo

8

Escalas Tipográficas y Proporción Áurea en Figma

9

Creación de Escalas Tipográficas en Figma

10

Teoría y Práctica del Color en Diseño de Interfaces

11

Creación y gestión de paletas de colores en Figma

12

Espaciado y Elevación en Diseño de Interfaces

13

Espaciado y Elevación en Figma: Guía Práctica y Aplicaciones

14

Uso de Íconos e Ilustraciones en Diseño de Aplicaciones

15

Documentación de Sistemas de Diseño en Figma

Librería de componentes

16

Atomic Design: Construcción de Componentes en Design Systems

17

Arquitectura y Auditoría de Componentes en Atomic Design

18

Creación de Botones con Variantes en Componentes UI

19

Creación de Componentes de Cart en Diseño UI

20

Creación de Headers Responsivos en Figma

21

Creación de Variantes de Componentes en Diseño de Interfaces

22

Publicación de Librerías y Componentes en Figma

23

Uso de Figma para Crear Interfaces con Design Systems

Implementación y medición

24

Vender y medir un sistema de diseño internamente en la empresa

25

Experiencia Creando un Design System en una Startup

26

Desarrollo de Sistemas de Diseño con JavaScript y CSS

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Uso de Figma para Crear Interfaces con Design Systems

23/26
Recursos

¿Cómo crear aplicaciones visuales utilizando un Design System?

El poder de los sistemas de diseño se manifiesta al facilitar la creación rápida y coherente de diseños basados en una estructura predefinida de componentes. En esta entrega, exploramos cómo aprovechar efectivamente los componentes y variantes desarrollados para crear aplicaciones visuales en Figma, simplificando esfuerzos creativos y centrándonos en el producto en cuestión.

¿Qué es un Design System y por qué es importante?

Un Design System es una colección de reglas, principios, restricciones y elementos reutilizables que juntos permiten diseñar productos más rápidamente y con más consistencia. Su importancia radica en:

  • Eficiencia: Permite reutilizar componentes y acelerar el proceso de diseño.
  • Coherencia: Garantiza que todos los elementos visuales sigan directrices específicas para mantener una imagen visual homogénea.
  • Escalabilidad: Facilita la adaptación a diferentes plataformas y dispositivos.

¿Cómo utilizar componentes y variantes en Figma?

Al arrastrar componentes a Figma y trabajar con variantes, es posible crear un diseño de forma rápida y ordenada. Aquí está el proceso:

  1. Organizar componentes: Tras arrastrar tus componentes en Figma, organiza cada elemento de manera estratégica. No importa si no tienes un estudio de diseño de usuario, empieza con lo que tengas.

  2. Configurar variantes: Al utilizar un componente como un hero con variantes, escoge la opción que mejor se adapte a tus necesidades, como por ejemplo diseñar para un escritorio de 1024 píxeles.

  3. Alineación y espacios: Ajusta el tamaño y alineación de cada elemento central para el diseño de página, utilizando los tamaños y espaciados definidos en los fundamentos.

¿Cómo nombrar y ajustar textos en el diseño?

Asignar nombres coherentes y textos reales es fundamental para vender un diseño con autenticidad. He aquí cómo hacerlo:

  • Nombrar secciones: Da nombres creativos y pertinentes a las secciones, como "canciones favoritas".
  • Utilizar tipografía real: Asegúrate de que los títulos y textos sean extraídos de la librería de fundamentos utilizando la tipografía seleccionada, como un h2 predeterminado.
  • Ajustar el layout con detalles reales: Cambia los nombres de secciones genéricas por contenido auténtico, facilitando la transición de prototipo a producto real.

¿Cuál es el siguiente paso después del diseño?

Para masificar el uso de un Design System y su conveniencia, asegúrate de reflexionar sobre lo siguiente:

  • ¿Son útiles los sistemas de diseño?: Considera las ventajas y desventajas en términos de tu producto específico.
  • Reflexiones personales: ¿En qué te beneficia o afecta el uso de un Design System en tu trabajo actual?

Recuerda, el verdadero desafío va más allá del diseño: se trata de integrar y vender efectivamente un sistema de diseño dentro de un entorno dinámico. La siguiente etapa explorará estos conceptos más complejos. ¡No olvides aportar tus comentarios y desafíos en el camino!

Aportes 15

Preguntas 0

Ordenar por:

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

Hola! Dejo la página que hice con mi design system!

Así vamos. Aun falta

Personalmente me he dado cuenta que organizar los componentes primero es lo mejor que uno puede hacer. Uno creería que por “cuestiones de tiempo” es mejor agilizar e ir creando elementos por todas las pantallas, pero si realmente quieres ahorrar tiempo, comíenza por convertir cada elemento que crees en componente y organizalo…tu yo del futuro de lo agradecerá

Mi pagina web,![](https://static.platzi.com/media/user_upload/image-916ef1f0-b718-4464-b82e-1d6c126dbf75.jpg)Aqui esta mi figma: <https://www.figma.com/proto/kTaFbsdmB4g0XuOM7vZYVN/Untitled?type=design&node-id=1-2&t=5ihdF21RtUhbVkHK-0&scaling=scale-down&page-id=0%3A1>
Yo opté por darle al sitio de WhatsApp un toque de neo-brutalism ![](https://static.platzi.com/media/user_upload/image-f8102918-47f8-444f-8410-25f9405f5aab.jpg)
Hola, estos son mis avances aplicando mi design system...!!! Espero sus comentarios. ![](https://static.platzi.com/media/user_upload/imagen-ea2898c2-a460-47c6-a80f-09307a4fa2c6.jpg)

Implementando lo aprendido en un proyecto personal.

Gracias

[](

EXERCISE

Así quedó mi reto:

![](<Captura de pantalla >)
![]()![](<Captura de pantalla 2023-12-15 a la(s) 10.12.41 a. m.>)![]()![](<Captura de pantalla 2023-12-15 a la(s) 10.12.50 a. m.>)
Los sistemas de diseño son un elemento importante al momento de diseñar, nos ahorra mucho tiempo. Los componentes agilizan el trabajo.

Bueno, la ventaja de tener tu propio sistema de diseño, es la facilidad de aplicar para crear y reutilizar, en la empresa donde trabajo actualmente hay muchos proyectos distintos y a mi me gusta basarme en un diseño base con mi sistema de diseño personal para afrontar los retos, despues con el estudio en distintos campos se mejora tanto la funcionalidad como la estética necesaria que busca el cliente.

Pero mejor tener trabajo prefabricado, que estar creando todo desde cero.