Recomendados
Mais conteúdo relacionado
Semelhante a Design Tokens e um case de adoção das Variáveis no Figma
Semelhante a Design Tokens e um case de adoção das Variáveis no Figma (20)
Último
Último (9)
Design Tokens e um case de adoção das Variáveis no Figma
- 1. Design Token e Variáveis no Figma Um case da adoção das Variables para o início de uma linguagem compartilhada com o desenvolvimento Collab SWP + By Design
- 2. Taís(You)
- 4. Overview da empres Design System Design Token Nosso desafi Variáveis no Figm Demo time Desafios e aprendizados Design Tokens contextualizado em um case real Index ... e como as Variables ajudaram nisso
- 5. Overview da empres Design System Design Token Nosso desafi Variáveis no Figm Demo time Desafios e aprendizados Overview da empres Design Syste Design Token Nosso desafi Variáveis no Figm Demo time Desafios e aprendizados Index
- 6. EUA Canadá Grécia Suécia Product Designer at 500+ Funcionários 5 produtos digitais Escritórios em 6 países
- 7. A Brighter Future Powered by Renewable Energy Gerenciamento de recursos de energia renovável Qual a produção esperada, real e consumida Há manutenção programada para hoje? Como gero relatórios de produçã Quais as obrigações regulatórias e contratuais que preciso seguir?
- 10. Product Suite Layouts inteiramente novos Objetivo: Consistência entre os produtos (Branded Family) Cada um com seu estilo
- 11. Overview da empres Design System Design Token Once upon a time.. Nosso desafi Variáveis no Figm Demo time Desafios e aprendizados Index
- 12. é uma coleção de elementos reutilizáveis governados por padrões claros. Esses elementos são combinados para criar uma variedade de produtos sincronizados entre si. Design System
- 14. Documentação Estilos Componentes Princípios, Tom de voz, Boas práticas Cores, Tipografia, Tamanhos, etc Botões, Caixas de texto, Seletores, etc
- 15. Teoricamente, permite que qualquer integrante do time crie layouts (sincronia com o código) Os maiores interessados ainda são os designers Devs tem uma visão ainda mais sistemática... Design System
- 17. Overview da empres Design Syste Design Token Nosso desafi Variáveis no Figm Demo time Desafios e aprendizados Index
- 18. Decisões de design traduzidas em dados. É uma ferramenta de comunicação: uma linguagem compartilhada entre o design e a engenharia para comunicar informações detalhadas sobre como construir interfaces. #0054F0 $cor-blue-100 $cor-unity-primary $cor-botao $cor-fundo-unity-primary Botão Primário Design Tokens:
- 19. “Tokens” O valor pode ser alterado enquanto o token se mantém inalterado Tokens = Variáveis Valor 236 ml Short 354 ml Médio 473 ml Grande 450 ml 591 ml Super 916 ml Trenta
- 20. Importância do Token Facilita o gerenciamento de tema Nos ajuda a pensar semanticamente as decisões de desig Funciona independentemente da linguagem de tecnologia adotada (CSS, iOS, Android, ...) Se podemos dizer que a biblioteca do Design system contém os blocos necessários para criar layout, os tokens são os blocos para criar o Design System. Elétrons, na escala do Atomic Design
- 21. Co Tamanh Espaçament Raio da Bord Margen Z-Inde Visibilidad Text Image Fonte (etc) 450 ml $tamanho-grande Valores Tokenizáveis Cor Número Boolean String
- 22. Co Tamanh Espaçament Raio da Bord Margen Z-Inde Visibilidad Text Image Font (etc) #489628 $cor-verde-500 $cor-marca-primary Cor-verde-500 Cor-verde-400 Cor-verde-300 Cor-verde-200 Cor-verde-100 Cor-verde-700 Cor-verde-600 Nossa Paleta de Verde Valores Tokenizáveis
- 23. Co Tamanh Espaçament Raio da Bord Margen Z-Inde Visibilidad Text Image Font (etc) #489628 $cor-verde-500 $cor-marca-primary Alias Valores Tokenizáveis
- 24. Tipos de Token Token Global Alias Token Token de componente #0054F0 $blue-100 $drive-primary $fundo-botao $fundo-botao-drive-primary Botão Primário
- 25. ALIAS TOKENS
- 27. Botão Botão $drive-primary $blue-800 $blue-800 $drive-primary $drive-primary $drive-primary $botao-primary $checkbox-active Se quiséssemos atualizar apenas Check e Radio $radio-active $botao-primary $checkbox-active $radio-active Alias
- 28. Botão Botão Botão Don't Precisa atualizar um por um manualmente Facilmente atualizável Do $drive-primary $drive-primary $blue-800 $blue-800 $drive-primary $botao-primary $checkbox-active $radio-active $botao-primary $checkbox-active $radio-active
- 29. Chamamos Alias a quando um token faz referência a um outro token existente Diversos tokens podem usar um mesmo token como referência (É importante ter uma estrutura de tokens adequada para atualizações posteriores.) Resumo: Design Tokens
- 30. Overview da empres Design Syste Design Token Nosso desafi Variáveis no Figm Demo time Desafios e aprendizados Index
- 31. Layouts inteiramente novos Objetivo: Consistência entre os produtos (Branded Family) Cada um com seu estilo
- 33. Blue-500 Blue-400 Blue-300 Blue-200 Blue-100 Blue-700 Blue-600 Nossa Paleta de Azul ENABLED #1657D9 #113E96 HOVER Criar Relatório
- 34. ENABLED Blue-500 Blue-700 HOVER Usando estilos do Figma Tokens Globais Criar Relatório
- 35. ENABLED ENABLED ENABLED ENABLED ENABLED Blue-500 BlueGrey-700 Cyan-500 Green-400 Orange-500 Blue-700 BlueGrey-900 Cyan-700 Green-600 Orange-700 HOVER HOVER HOVER HOVER HOVER Criar Relatório Criar Relatório Criar Relatório Criar Relatório Criar Relatório $botao-primary $botao-primary $botao-primary $botao-primary $botao-primary
- 36. Primary Color Produto: Unity Blue-500 Blue-400 Blue-300 Blue-200 Blue-100 Blue-700 Blue-600 Nossa Paleta de Azul ENABLED ENABLED ENABLED ENABLED ENABLED Blue-500 BlueGrey-700 Cyan-500 Green-400 Orange-500 Blue-700 BlueGrey-900 Cyan-700 Green-600 Orange-700 HOVER HOVER HOVER HOVER HOVER Criar Relatório Criar Relatório Criar Relatório Criar Relatório Criar Relatório
- 37. Primary Color Produto: Unity Blue-400 Blue-300 Blue-200 Blue-100 Blue-700 Blue-600 Blue-500 Nossa Paleta de Azul ENABLED ENABLED ENABLED ENABLED ENABLED Blue-500 BlueGrey-700 Cyan-500 Green-400 Orange-500 Blue-700 BlueGrey-900 Cyan-700 Green-600 Orange-700 HOVER HOVER HOVER HOVER HOVER Criar Relatório Criar Relatório Criar Relatório Criar Relatório Criar Relatório
- 38. Primary Color Produto: Greenbyte Sucesso Status Green-500 Green-400 Green-300 Green-200 Green-100 Green-700 Green-600 Nossa Paleta de Verdes ENABLED ENABLED ENABLED ENABLED ENABLED Blue-500 BlueGrey-700 Cyan-500 Green-400 Orange-500 Blue-700 BlueGrey-900 Cyan-700 Green-600 Orange-700 HOVER HOVER HOVER HOVER HOVER Criar Relatório Criar Relatório Criar Relatório Criar Relatório Criar Relatório
- 39. Primary Color Sucesso Turbine curtailment Paused production Standby Perigo Cores Tema: Light Produto: Unity Greenbyte BluePoint Drive Unity (cms) Tema: Dark Tema: Alto contraste Paleta de cores Primary Color Sucesso Turbine curtailment Paused production Standby Perigo Cores Cores (...) (x5)
- 41. Overview da empres Design Syste Design Token Nosso desafi Variáveis no Figm Demo time Desafios e aprendizados Index
- 42. Variáveis no Figma ”O mundo paralisou no final de julho de 2023, quando o cofundador e CEO do Figma Dylan Field anunciou a mais nova funcionalidade da ferramenta (...). Com esse recurso, designers poderiam finalmente começar a trabalhar com Design Tokens.” Alura
- 45. Demo time! Vamos ver os Figma Tokens na prática
- 48. https://www.youtube.com/watch?v=939yABGkn98 O sistema de cores se adapta real-time em diferentes contextos, utilizando o sistema a biblioteca de Variables no Figma criado para esta apresentação, bastando arrastar um card em torno de diferentes Sections no Figma. Demonstro também como a alteração em um Alias token se reflete em um contexto isolado (Dark mode de um produto específico). A reprodução de algo similar ao que apresentei no evento pode ser vista aqui:
- 49. Overview da empres Design Syste Design Token Nosso desafi Variáveis no Figm Demo time Desafios e aprendizados Index
- 50. Nomear é difícil Desafio Aprendizados Nomear tokens requere uma habilidade que nós designers às vezes não desenvolvemo Quanto mais especifico o token mais difícil ($color-background-alert-danger-dark O pensamento semântico nos layouts é difícil de construir mas igualmente libertador Testar bastant Alterar ced Comunicação
- 51. Comunicação é difícil Desafio Aprendizados Designers e devs precisam de uma colaboração intensa especialmente no iníci Assim como Design System como um todo, ainda requer que executivos entendam e comprem a ideia Espalhar a palavra do desig Envolver todos desde o inicio, co-cria Manter Roundtable com devs/PMs/Designers
- 52. Alguns extras
- 53. Jornada do Token, do design ao browser Ferramentas de Design Webpage Tokens em JSON Tokens em CSS, JS, TS Variables Edição manual do Token
- 54. Mas então as Variáveis = Tokens ? Quase! Onde está o token de fonte Token de transparência e efeitos (elevação/sombras) estão faltand Não se pode alternar entre tokens direto no protótipos.
- 56. Plugins ~Extras~ Styles to Variabl Import/ Export JSO Design Token Studio
- 57. “A verdadeira colaboração não é passar o design por cima do muro. É designers, engenheiros e todo o time compartilhando a responsabilidade de construir um produto de qualidade. Reduza as barreiras, dê suporte e empodere. Designers que entendem código vão se tornar a norma.” Diana Mounter
- 58. Obrigada! Taís Barboza | taisbrbza@gmail.com