¿Qué son los tokens?

Clase 14 de 25 • Curso de Sistemas de Diseño para Desarrolladores

Resumen

Nuestro objetivo es sistematizar nuestros procesos entonces nuestro sistema tiene que ser un ente configurable. En este sentido, los tokens son configuraciones que afectan a todo nuestro sistema tales como:

Colores
Tipografía
Reglas de espaciado
Brakepoints

Definiremos nuestros colores basándonos en algún paradigma o en los guidelines y UI kit del producto, para definir estas variables es importante que si trabajamos con un diseñador, este también este presente y pueda verificar la viabilidad de lo que estamos haciendo.

Vamos a crear las reglas necesarias para fundamentar nuestro sistema de columnas y podremos hacer otras extras que nos permitan generar un nuevo sistema de interacción mobile. Para esto crearemos un archivo llamado brakepoints.scss

Roger Carlos Ariel Alba

student•

tener reglas de espaciado es vital.

Parte de lo que apreciamos mucho es ver la uniformidad.

Harold David Avila Sabogal

student•

buen dato muchas gracias

Juan Esteban Galvis

student•

Yo esto lo hago en un archivo variables.scss y esas variables que menciona Rulótico son de Sass.

Variables en los 3 preprocesadores:

// Sass
$Variable = valor;

// Less
@Variable = valor;

// Stylus
Variable = valor

Y claro, si cambiamos la fuente, un color o algo así que se repita pues con variables (Tokens) cambia todo modificando un solo valor en un único archivo.

Daniel Goñas

student•

aquí les paso los archivos mostrados en clase ;D

TOKEN/COLORS:

//Brand colors
$white_brand: #FFFF;
$green_brand: #98CA3D;

//Action colors
$primary_action: #ABE542;
$secundary_action:#8F97A2;

//Boolean colors
$positive: #15ff98;
$negative: #F04F80;

//Backgrounds
$background_blue: #233946;

//basic colors
$white_normal: #f9f9f9;
$black_normal: #1c1d21;

TOKEN/SPACING

$space: 10px;

TOKEN/TYPO

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

$font: 'Roboto', sans-serif;

// Typos
$h1:50px;
$h2: 30px;
$h3: 20px;
$p: 13px;
$small: 10px;

//Typo Bolds
$black: 800;
$bolder: 700;
$medium: 600;
$normal: 500;
$light: 400;

FUNDATIONS/fonts

@import "../tokens/typo.scss";
@import "../tokens/colors.scss";
@import "../tokens/spacing.scss";

html, body{
  font-family: $font;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothung: antialiased;
  color: $black_normal
}

h1{
  font-size: $h1;
}
h2{
  font-size: $h2;
}

h3{
  font-size: $h3;
}

h1,h2,h3{
  margin-top: $space;
  margin-bottom: $space;
}

p,a,.normal{
  font-size: $p;
  margin-top: $space;
  margin-bottom: $space;
}

.small{
  font-size: $small;
}

.bold{
  font-weight: bolder;
}

Carlos Gómez Mont

student•

Es usted muy amable joven, saludos!! :p

Cristian Blandon

student•

Breakpoints :detective:

Jose Invernon

student•

Con la aparicion de las variables en CSS, me he dado cuenta que es mucho mas cómodo definirlas asi dentro del main.css para que luego la utilice todo mi proyecto :root , * { --color-purple: #8c2dc3; }

Y luego en mis elementos o clases, puedo acceder a ellos con: div { background-color: var(--color-purple) }

Al menos en Angular que si todo es por componentes y tienes que estar importando los archivos sass en cada componente si quieres utilizar las variables, es muy util de esta manera.

Osvaldo Olea

student•

Pensaba lo mismo. Es mucho más fácil hacerlo así .

Platzi Team

student•

Bebes e luz, por favor no nos espantemos

Gonzalo Pimentel

student•

Esto es la parte importante y útil de los sistemas de diseño que no me gusta hacer :( jaja pero igual hago!

lesier gg

student•

Gracias por la clase, crack!!!

Harold David Avila Sabogal

student•

buena clase, indispensable entender los tokens muy buen profesor

Alexander Valencia

student•

muy buena la clase y muy importante esto de los tokens

Nelson Alayón

student•

Esto de sistemas para desarrolladores es como crear un manual de imagen corporativa para la web.

Juan Camilo Moreno

student•

Es muy importante este tema porque te da escalabilidad y organización a tu código

John sanchez

student•

Esta es una base que utilizo para mis aplicaciones,

/*Colores (principales y secundarios)*/
    --color-1: #726bf4;
    --color-2: #ff6818;
    --gray--100: #f0eef2;
    ...
    --gray--600: #545454;
    --black: #010001;

    /*esquinas (border-radius)*/
    --b-r-10: 10px;
    --b-r-20: 20px;
    --b-r-50: 50px;
    --b-r-50per: 50%;

    /*profundidads (box-shadows)*/
    --box-shadow: 0px 0px 8px rgba(0,0,0,0.25);

    /*Espaciados (Margin y padding)*/
    --space-1: 10px;
    --space-2: 12px;
    ...
    --space-8deg: 36px;
    --space-9deg: 50px;

    /*Tipografía (fuente y tamaños)*/
    --font: 'Montserrat', sans-serif;
    ...
    --sf-d-5: 22px;
    --sf-big: 20px;
    --sf-medium-big: 18px;
    --sf-normal: 16px;
    --sf-medium-smal: 14px;
    --sf-min: 12px;

Jhoana España Urresty

student•

tokens: es un elemento que puede cambiar ej:

color
tipografia
espaciado
breakpoints

Usuario anónimo

user•

Blow my mind, la verdad estoy diseño de interfaces y vine como para entender que hacen los programadores, pero no había podido entender bien el concepto de token y que creen lo entendí, muchas gracias.

Usuario anónimo

user•

Tokens

Usuario anónimo

user•

Tokens

Naldo Duran

student•

¿Qué son los tokens?

Introducción

Qué aprenderás sobre los sistemas de diseño para desarrolladores

Conoce Sistemas de Diseño populares

Instalación y flujos de trabajo

Bonus: Personalizando la Terminal

Instalación y flujos de trabajo

Instalación de Node / Express desde 0

Bonus: html, css, js

Automatización

Automatización (Pre procesadores)

Continuando con la automatización

Paradigmas

SMACSS: Arquitectura de CSS escalable y modular

OCSS: Orientación de objetos en CSS

BEM

Bonus: Bootstrap

Naming

Naming

Qué son los tokens

¿Qué son los tokens?

Espaciado

Espaciado

Grillas

Grillas

Bonus: Animando en CSS

Mi primer componente

Mi primer componente

Documentación

Documentación

Testing

Testing

Bonus: Debug en el navegador

Deploy y versionamiento

Cómo empezar en Github

Deploy y versionamiento

Design review

Design review

Cierre