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

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

8/26
Recursos

¿Qué son las escalas tipográficas y cómo afectan nuestro diseño?

Las escalas tipográficas son fundamentales para lograr armonía visual en el diseño. Al definir las proporciones entre diferentes tamaños de letra, creamos un estilo visual coherente que se percibe como naturalmente equilibrado. Una escala es, básicamente, una proporción que dicta qué tan grande o pequeña debe ser una tipografía en relación con otra.

¿Cómo se definen las escalas tipográficas?

Para desarrollar una escala, comenzamos por establecer una base, generalmente el tamaño de una tipografía estándar (como 12 puntos). A partir de ahí, multiplicamos por un radio determinado para definir los tamaños subsecuentes. Un radio comúnmente usado es 1.618, llamado también la proporción áurea, famosa por conferir equilibrio y belleza en diseño.

Por ejemplo, si la base es de 12 puntos, multiplicamos por 1.618 para obtener el siguiente tamaño: 19.416 puntos. Este proceso se repite para establecer una serie de tamaños armoniosos.

¿Qué otras escalas se pueden utilizar?

No solo la proporción áurea es útil; también podemos emplear otras series matemáticas como la serie de Fibonacci o el número de Lucas. Estas alternativas se basan en secuencias reconocidas en la naturaleza por su capacidad de generar un entorno armónico y visualmente atractivo. Además, hay conexiones con la música, donde las notas y sus intervalos definen escalas basadas en relaciones de frecuencia.

Herramientas para facilitar el uso de escalas tipográficas

¿Cómo utilizar TypeScale?

TypeScale es una herramienta online que ayuda a automatizar el cálculo de escalas tipográficas. Se introduce una base, como 16 píxeles, y selecciona una escala, ya sea la proporción áurea u otra. Luego, TypeScale genera automáticamente los tamaños correspondientes para cada elemento de texto, ahorrándonos el cálculo manual.

¿Qué ofrece Figma para escalas tipográficas?

Figma cuenta con plugins específicos como Typescales que replican la funcionalidad de herramientas como TypeScale. Facilitan la generación de escalas ajustadas a las necesidades del diseño, permitiendo elegir la base y la escala para luego generar las diferentes medidas tipográficas necesarias. Además, Figma permite integrar estas medidas en proyectos de diseño de manera fluida, creando un sistema de diseño coherente.

¿Cómo iniciar un proyecto en Figma?

Creación de un nuevo team

Al comenzar con Figma, se puede crear un "team" para organizar proyectos y componentes de diseño. Este puede etiquetarse con un nombre relevante y, al gusto personal, complementarse con emojis para una experiencia de usuario más divertida.

Configuración de un nuevo archivo

Una vez que el team está configurado, se comienza un nuevo archivo para desarrollar los fundamentos de tipografía en un diseño. Se renombra la primera página de trabajo a un título como "Foundations" y se comienza a implementar las escalas tipográficas deseadas en un frame grande.

Esto incluye:

  • Definir font-sizes para distintos elementos (H1, H2, párrafos).
  • Integrar escalas basadas en múltiplos de cuatro, una práctica común en diseño para asegurar consistencia. Por ejemplo, usar tamaños de 40, 32, 18, 16, 14 y 12 píxeles para diferentes niveles de encabezados y texto, adaptando el sistema a las necesidades específicas del proyecto.

Estas herramientas y técnicas permiten crear un diseño visualmente cohesivo y consonante con los principios naturales y matemáticos de armonía.

Aportes 23

Preguntas 4

Ordenar por:

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

Justo hace dos días descubrí lo que era la proporción áurea. Estaba investigando sobre escalas tipográficas con el propósito de implementarlo en mi proyecto, y me topé con tan genial concepto.
.
Me da gusto ver que aquí también vemos ese tema, que estamos profundizando en teoría, y que conocemos tan útiles herramientas como https://type-scale.com
.
Para las personas que tengan interés en seguir profundizando sobre el tema, les comparto el video donde escuché del concepto por primera vez: https://www.youtube.com/watch?v=ot-5dQG2v5M

Teffi he visto una cantidad de cursos de diseño, de figma, de composición visual en productos digitales, y JAMÁS había escuchado lo que nos estas contando sobre las escalas tipográficas, siempre elegí los tamaños de letra de 2 en 2 de una manera sumamente aleatoria jajaja xD pero jamás pensé que detrás de los tamaños hubiera todo un tema matemático de armonias. Miiil graaacias!

Escala tipográfica: es esencialmente un rango de tamaños de letra definidos por una proporción.


Proporción aurea: La proporción áurea, también conocida como la divina proporción, es un número irracional que se aproxima a 1,618. Se utiliza en matemáticas y arte por su estética agradable y armónica. Se dice que se encuentra en la naturaleza en formas como la espiral de una concha o la disposición de hojas en un tallo.


Base: de donde partimos la escala

Radio: la distancias entre las escalas


Tercera: intervalos que se producen entres dos notas

Tercera menor: corresponde a la relación de frecuencias 6:5


Fórmula para definir las escalas basado en la proporción áurea:

Multiplicando la base por el número aureo. Ejemplo:

12 x 1,618


Proporciones de escala tipográfica comunes:

Tomada de la música

Con relación al cálculo tipográfico conozco 2 opciones que me parecen super útiles que quiero compartir 1. La primera es <https://typescale.com/> que realmente tiene ya las escalas establecidas. Lo que tendrían que hacer es escoger la escala que les sirva mejor. 2. En el canal de figma, hay un video super útil en donde Rogie explica paso a paso cómo crear la jerarquía tipográfica utilizando el valor "1.62", me parece súper útil. El video se llama: Build it in Figma: Create a Design System — Foundations (desde el minuto 7:28 - hasta el 32:40) Este es el link para que vayan a verlo que está muy bueno <https://www.youtube.com/watch?v=EK-pHkc5EL4>
Decubri que las escala (proporcion aurea) a escoger puede variar para diferentes dispositivos. la tercera mayor se suele usar para pantallas de escritorio. Pero en mobile estas proporciones podrian no ser lo que buscamos como en este ejemplo: ![](https://static.platzi.com/media/user_upload/image-18cd0c46-5d9a-45fe-b86c-ba3826585b8e.jpg)por lo que proporcion menor para dispositivos moviles: una majoor o minor second ![](https://static.platzi.com/media/user_upload/image-c007cd99-5c95-41ba-9d9f-742a600368b7.jpg)La herramienta como esta te permite ajustar el tamaño del dispositivo y la escala, para una mejor consistencia, aunque al parecer es una funcionalidad premium ![](https://static.platzi.com/media/user_upload/image-7b1d351c-d181-425a-8eb4-5a4678c99880.jpg)

En figma existe un Plugin llamado Typescales que nos ayuda a definir las proporciones tipográficas

Si quieren usar Emojis y estan en Windows, solo requieren presionar la tecla windows+. con eso se abre la caja de emojis y pueden seleccionar el que gusten.

Capitulo de disney sobre la proporción áurea:
https://www.youtube.com/watch?v=rJkdjL21Tqs.

Aunque es lo mismo lo que dice la profesora, siempre es útil ver otras explicaciones para entender mejor :D

La verdad que este curso es espetacular. aqui van mis notas.

Una escala tipografica, es esencialmente un rango de tamanos de letra definidos por una proporcion.
.

Las distancias, se conocen como ratio.
.

Para definir esto, seguimos una regla matematica. Definir la base, ejemplo 12pt y multiplicarlo con 1,618 (proporcion aurea)
.

Tambien hay otro tipo de escala, que viene de la musica, aqui el ratio es 1,2000
.
Hay programas que hacen la escala por nosotros, Type-scale.
.

En figma usamos un monton de plugins, uno recomendado es Typescales.
.

Otra regla puede ser, usar solo multiplos de 4.
.

Martin Coronel - Product Designer
Linkedin

Pensé que estaba haciendo mal todo este tiempo, resulta que no jeje… Lo que hice para mi sistema fue utilizar 2 tipos de typografía en base 16, con regla par de 2 a 4px de escalado y en diferentes pesos.

Para cosas ya más avanzadas con tokens, pueden usar Tokens Studio.

Con su correo electronico y si tienes la version paga de Platzi puedes acceder a un perfil profesional de Figma. Aca puedes ver mas info de esto: <https://platzi.com/blog/figma-for-education-platzi/>
Algo que agregaria al momento de definir las tipografias es tambien modificar el height y el letter spacing, no es lo mismo dejar un titulo H1 a un parrafo con los mismos valores de height y de espaciado entre letras. Usualmente las uso de la siguiente manera: Letter spacing: H1 -2.0% H2 -1.5% H3 -1.0% Body 0 P 0 Buttom 2.0%
![](https://static.platzi.com/media/user_upload/Typography%20Cardbook%202.2_Page_33-1a48da7d-5dda-4f48-aa68-46f41460118b.jpg)
Elegir la mejor escala tipográfica depende de varios factores clave, como el propósito del diseño, la audiencia, y el medio en el que se presentará el contenido.

Creo que la primera vez que oí de proporción aúrea fue cuando estudié fotografía.

Tipografía --> Fuente --> escoger 2 tipografías Variantes --> thin, light, regular, medium, semibold, bold, extrabold, black Tamaño --> Limitar a 8 tamaños, 5 para textos cortos (títulos y etiquetas) y 3 para textos densos como parráfos: \--> Fijar el tamaño base de la fuente en función a la unidad de referencia \--> Si fijamos 8 el tamaño base de la fuente seria 16px \--> Si fijamos 6 el tamaño base de la fuente seria 18px \--> Con la medida base de la fuente, multiplicarlo por 0.64, 0.8, 1, 1.25, 1.563, 1.953, 2.441 y 3.052. \--> Estas medidas se aplican para pantallas de escritorio Recurso completo: <https://okbinteractive.studio/insights/como-crear-un-design-system-paso-a-paso> <https://okbinteractive.studio/insights/consejos-para-escoger-la-mejor-tipograf%C3%ADa-para-tu-web>
Es decir, siempre el número base, se va a multiplicar por la proporción áurea?

La proporción áurea está presente en la naturaleza en formas como la de los caracoles, el cuerpo humano, los copos de nieve y la estructura de hojas y ramas de los árboles; por tanto, constituye uno de los fundamentos generales del Diseño. Otorga ritmo, armonía y equilibrio a las composiciones visuales.

En figma existe un Plugin llamado Typescales que nos ayuda a definir las proporciones tipográficas

La proporción áurea esta determinada por el golden ratio (1.618), esto nos brinda armonía visual.

Para los emojis en Windows simplemente tienen que hacer tecla windows + tecla puntito (.) 😈