Creación de Escalas Tipográficas en Figma
Contenido del curso
Anggi Vanesa Pallares Solis
Anggi Vanesa Pallares Solis
Susan Vélez
Carlos Mario Betancourt
Luis Herrera
María Fernanda Sáenz Carmona
Cristian Contreras
Estefany Aguilar
ProfesorCristian Contreras
Jorge Torres
Cristian Contreras
Estefany Aguilar
Profesor
Nicolas Madariaga
Martin Coronel
Jhofran Briceño Peñalver
Aarón González
Ester Sarai Galvez V.
Magalí Acevedo
Juan David Verano Valencia
Daniela Cobos
Laura Dayana Mercado Cañizares
Luis Gonzalez
Nayfer Carolina
Erimer Alcantara Peña
Rubén Vega
el / nos crea como una especie de contenedor o carpeta de nuestro estilos, de esta manera:
Typography/Bold/$H1
✍️Aporte
La 🔤Tipografiay el 📏tipo de escala**
La tipografía y el tipo de escala no son lo mismo. La tipografía es el arte de diseñar fuentes para usar en impresión y en pantalla. El tipo de escala, por otro lado, es una medida para establecer la relación entre distintos elementos de la interfaz de usuario. El tipo de escala se utiliza para establecer el tamaño de fuente, el espaciado y otros elementos visuales.
*️⃣Ejemplo
🔴Tipografía: Verdana, Arial, Times New Roman, etc. 🔴Tipo de Escala: 8px, 12px, 16px, 20px, etc.
De esta manera dividir estas partes de la siguiente manera: Lo realice así para establecer un orden, y de esta manera podré crear los tokens para cada tipografia en mi caso poppins con los diferentes tipo estilos de fuentes, Regular, Medium, Bold
Cada vez más emocionada con lo aprendido en el curso(
Les Comparto esta guía
La realicé con ayuda de un tutorial
Buen tutorial, gracias
Hola! Yo estoy trabajando en un design system para una organización con distintos productos (web, iOS y android) y diferentes verticales. ¿Tendría sentido definir tokens primitivos en un primer nivel para tipografia para establecer todas las opciones de $font-size , $font-weight, $line-height, etc y ya después en un segundo nivel los type sets por producto? $headline, $body, etc
Cuando usamos el plugin visto en clase, hay manera de cambiar la tipografía? Estuve buscando la manera pero no supe como, me toco generarla y despues, una por uan irle cambiando la fuente.
Cristian, tu pregunta es acerca de cambiarle la tipografía a todo de una ? Podrías darme más contexto de lo que te sucedió por fa ? ☺️
Hola, Teff. cuando corro el plugin me muestra esta font family por defecto y no se donde puedo cambiarla.
¿este nombre que le ponemos a los tokens, es el mismo nombre que por ejemplo llevarían como variable en el css de una pagina?
Supongo que por consistencia debería ser así.
Sí. Eso sería lo ideal, Jorge ! 😊
Hola Comunidad. Tengo una duda que por lo menos no pude encontrar la respuesta en ningun lado. Lo de la escal tipografica lo entiendo bien, pero no se como escalar la tipografia en un design responsive. Es decir, si yo para mobile tengo un h1 de 24px por ejemplo, que tamaño debo colocar para ese h1 en tablet y que tamaño en escritorio. No se si me explico? Muchas gracias de antemano
Si colocamos el name $body-18, siento que si actualizamos por alguna razon el tamano de la tipografia, el nombre del token queda desactualizado, tienen alguna otra recomendacion para el nombre?
Cmd + H = Alinean horizontal Cmd + V = Alinea vertical
Suggestion: Usen Autolayout cuando estén haciendo esto, así todo es mais dinámico.
Alguien me ayuda con los atajos ? no se como alinear las distancias de esa manera GRACIAS!!! <3 <3
¿Cual es la diferencia de trabajar con "Style" o "Variable" a la hora de definir estos foundations?
Otra opción que podemos usar son las "local variables" .
En esta clase se habla más al respecto: https://platzi.com/clases/7998-figma-tecnicas-avanzadas/64964-como-usar-las-variables-de-figma-para-colores-y-ta/
Hola este es mi aporte:
Resultado de la clase
