Próxima Turma: 27 de Abril

Curso: Sistema Escalável de
Design Tokens

Aprenda as melhores práticas para escalar decisões de
design de forma inteligente.

Podemos definir Design Tokens como pequenas peças que compõem a base de um design system e armazenam decisões de design (cores, tipografia, espaçamentos…). É uma abordagem que não só determina o valor da propriedade, mas também conta como deve ser utilizada. As suas estratégias de implementação trazem ótimos benefícios:

O primeiro curso brasileiro sobre Design Tokens

O curso Sistema Escalável de Design Tokens é o primeiro curso com foco exclusivo em design tokens. Nele você adquirirá todas as habilidades necessárias para criar um sistema que poderá ser utilizado para uma ou múltiplas marcas e temas.

Para garantir o entendimento das estratégias e lógica desse desafio vamos percorrer um roadmap. Utilizaremos o plugin Tokens Studio (com dicas para versão FREE e PRO) em conjunto com o Figma Variables durante o estágio de criação de design tokens no ambiente de design. Em seguida, aprenderemos a sincronizá-los com um repositório do GitHub e a transformar o JSON em arquivos adequados para o front-end por meio da ferramenta Style Dictionary.

Github Push conversão para variables Definições estratégicas e criação de design tokens distribuição distribuição conversão Style Dictionary Time Design 1 Time Front 1 Time Design 2 Time Front 2 Time Design 3 Time Front 3

Quer uma prévia?

Disponibilizei no Figma um arquivo que é uma prévia da estrutura do sistema de tokens que será usado como base durante o curso.

Módulos

01 • Introdução aos Design Tokens

Vamos dar uma rápida recordada no que são design tokens e seus benefícios / desafios.

02 • Discovery e estratégias iniciais

Antes de sair implementando design tokens que nem um louco, você precisa definir estratégias que vão impactar (e muito!) neste sistema.

03 • Descomplicando o "uó" da nomenclatura

Para a maioria, a parte mais complicada de implementar tokens é dar nome a eles. Mas calma! Neste módulo vou explicar e dar dicas de como fazer para criar uma convensão de nomes eficaz.

04 • Design Tokens x Figma Variables x Figmas Styles

Existem limitações e macetes para sincronizar design tokens criados no Tokens Studio com Figma Variables e Styles. Neste módulo você vai aprender como trabalhá-los da melhor forma possível!

05 • Lógica para criação de Design Tokens Globais

Vamos começar a botar a mão na massa e criar tokens que qualquer marca ou tema pode consumir.

06 • Criação de Bibliotecas de Marcas e Temas

Neste módulo você aprenderá o pensamento estratégico para criar bibliotecas de Marcas e temas que escala e possui uma gestão otimizada.

07 • Design Tokens de Componentes

Com a nossa base de tokens pronta está na hora de criar alguns padrões para enfim construir componentes que façam uso deles.

08 • Handoff do Design para o Desenvolvimento

Para garantir a comunicação assertiva entre os times de desgin e desenvolvimento, vamos estruturar um handoff automatizado utilizando um repositório.

09 • Conversão de tokens com Style Dictionary

A beleza acontece aqui! Vou mostrar algumas configurações para converter seus arquivos JSON em diversos formatos de tokens e os macetes para as criações de cada arquivo.

10 • DesignSystemOps aplicado ao sistema de Design Tokens

Vamos falar um pouquinho mais sobre designSystemOps? Neste módulo vamos conversar sobre documentações (com muitas dicas de automatização), manutenção, versionamento e processos para descontinuação de design tokens!

Como vai funcionar?

Sábado • 27/04/24

Terça • 30/04/24

Sábado • 04/05/24

Quarta • 08/05/24

Sábado • 11/05/24

Quarta • 15/05/24

Você ainda vai ter:

Acesso Vitalício

Acesso vitalício às aulas gravadas e todas as atualizações que forem realziadas.

1 mês de Tokens Studio PRO*

Licença do Plugin Tokens Studio PRO para praticar, válida pelo período de 30 dias a partir da data de recebimento do código.

Materiais exclusivos

Todas as ferramentas auxiliares e materiais complementares serão disponibilizados na plataforma.

Ana Takahashi

Ana Takahashi

DesignOps e DesignSystemOPs - cVortex

Comecei a trabalhar com design systems em 2019 e desenvolvi uma paixão questionável por sistemas escaláveis. Desde então dedico um pouco do meu tempo para compartilhar experiências neste vasto universo. 

Entre para a lista de espera!

Você será o primeiro a saber quando a inscrição for liberada!

Perguntas Frequentes

Para quem é indicado este curso?

Este curso é indicado para Designers, Desenvolvedores e Product Managers que estão passando pelo desafio de criar um design system escalável ou que gostariam de entender práticas e lógicas inteligentes para a implementação de design tokens. 

Sou iniciante, este curso é para mim?

Apesar da base conceitual, o curso não é indicado para iniciates devido às abordagens complexas que necessitam de conhecimento mais profundos tanto no uso da plataforma Figma, quanto em CSS.

Existe desconto para grupos e empresas?

Sim!!! Pode trazer a turma que o desconto é garantido. Para isso, envie um e-mail para [email protected] para negociar o valor, método de pagamento e recbimento da nota fiscal.

Como vou ter acesso ao curso?

Alguns dias antes do curso você receberá por e-mail todas as instruções de como acessar a plataforma do curso e as aulas ao vivo.

As aulas ficarão gravadas?

Sim, todos os alunos terão acesso à plataforma com as aulas gravadas por tempo vitalício, além dos materiais auxiliares. No entanto, as aulas gravadas só serão disponibilizadas 3 dias após seu acontecimento. Afinal, preciso de um tempinho pra fazer a edição, né?

No final do curso vou ganhar certificado?

Sim! Após a finalização do curso você receberá um certificado bonitão do curso!

Se necessário, como posso solicitar o reembolso?

Você tem o prazo de 7 dias após a confirmação de compra para solicitar o reembolso através do e-mail [email protected]. Se o cancelamento for feito após este período, a devolução será parcial, sendo esta equivalente a 50% do valor pago se até um dia antes do curso inciar. Verifique nossa página de Política de Reembolso e Devolucões para mais informações.

plugins premium WordPress