Como designer - você já inspecionou o front-end no ambiente de desenvolvimento e viu um estilo ou layout que não combinava com seus designs originais? ou, um tíquete de atraso para mudar uma cor acumulou poeira por meses? ou mesmo... viu o uso inconsistente do sistema de design por outros designers ? que tal diferenças entre o iOS e a web?

Para desenvolvedores - você está entediado de inspecionar um arquivo Figma para mudanças de estilo? então, cruzando com o designer? … mas então, o preenchimento está alguns pixels fora… então… “você poderia reduzi-lo em um ou dois?” …quando realmente você quer se concentrar na resolução de problemas complexos?

Quanto à empresa - talvez você tenha um produto de marca branca que precise ser reformulado para vários clientes? ou você lança novos recursos com frequência, com várias equipes e luta para manter uma interface do usuário consistente?

Este artigo mostra as etapas para resolver esses problemas, abaixo ilustra o resultado.

⚠️ Aviso: é longo. Existem algumas etapas, mas é importante mencionar - que você só precisa fazer isso uma vez.

Você precisará de experiência básica em codificação e design de software; meu objetivo com esta postagem é ajudar outras pessoas ( e meu futuro eu ) a configurar isso; mas o mais importante, aprender e melhorar - então, por favor, comente abaixo qualquer sugestão!

Antes de começar, aqui está a lista de 'ferramentas' que usarei: Figma, Figma Token Studio e Style Dictionary ; estes são específicos para fazer este método específico funcionar.

Além disso, estou usando Styled Components, React, Storybook e Github como uma preferência pessoal não específica deste artigo. Links: arquivo Figma , repositório do Github

As etapas pelas quais passarei:

1. Configurando tokens de design
2. Sincronize seus tokens entre designs
3. Sincronize tokens com seu código
4. Configurando o livro de histórias
5. Construindo os componentes e páginas
6. O teste

1 — Configurando tokens de design

Os tokens de design são usados ​​em vez de valores codificados para flexibilidade e consistência em um sistema de design. Vou me referir a tokens de núcleo, sistema e componente, mas há várias convenções de nomenclatura.

Primeiro, configuro os tokens principais ; estes são agnósticos de uso e específicos de atributo - não chame nenhum de seus tokens de nomes puramente numéricos , pois quando você os converte em variáveis ​​javascript, ele não os lê, a menos que sejam strings.

Em seguida, configuro os tokens do sistema; Eu tenho um tema claro e escuro onde atribuí os tokens principais iniciais aos estilos de design. Esses tokens transmitem o propósito e os usos dos valores que escolhi. Observe que os temas claro e escuro têm exatamente os mesmos nomes de token do sistema , mas seus valores podem ser diferentes.

Em seguida, criei tokens de componentes - eles apontam para um ou mais tokens do sistema e descrevem os padrões de uso; portanto, como exemplo, meu texto de parágrafo usado no componente de informações de conteúdo (que é filho do componente Card) é sincronizado para o token do componente Text.paragraph , que aponta para os tokens de estilo; tipografia: $parágrafo e cor: $primária.

⚠️ O que acontece se você não usar tokens? Adicionei um pequeno explicador ao final deste artigo, mas há uma riqueza de informações detalhadas disponíveis — leia como a Adobe e o Material usam tokens de design.

2 — Sincronize seus tokens entre designs

Instale o Token Studio — eu uso este plug-in , ele permite salvar seus tokens e atribuí-los a componentes e designs no Figma e sincronizá-los com o Github (ou onde quer que você esteja hospedando) com um arquivo .json que você pode enviar diretamente de Figma para o seu repositório remoto.

Em seguida, adicionei um novo conjunto para criar os tokens do sistema no plug-in. Chamei esses conjuntos de LIGHT e DARK para representar meus temas. Desta vez, ao criar os tokens, você pode apontar para os tokens principais no menu suspenso. A próxima parte é muito importante (me permitirá transformar o arquivo .json com mais facilidade) — você precisa atribuir os conjuntos aos temas.

Por fim, lembre-se de que criei tokens de componentes; Eu os sincronizei com o plug-in em tokens de composição (este é um recurso pago, então é possível pular esta etapa, mas vale a pena).

Há alguma mágica que pode acontecer agora. Se você selecionar entre seus temas, poderá alternar todos os seus designs Figma entre eles. Isso é particularmente útil se você quiser reutilizar seu sistema de design com marcas diferentes – não apenas para temas claros e escuros. Por exemplo; um produto de marca branca multicliente, uma nova marca ou componentes que você deseja reutilizar em outro projeto.

Passo final! Para garantir que tudo seja sistemático e conectado - crie estilos Figma a partir do tema para que você possa criar novos designs neste sistema. Sempre que você atualizar um estilo ou token, poderá sincronizá-los no plug-in.

3 — Sincronize tokens com seu código

Em seguida, configurei meu repositório github . Existem algumas etapas simples para permitir que você envie confirmações do Figma, primeiro clique em Gerar novo token (isso não tem NADA a ver com os tokens de design) em Tokens de acesso pessoal > tokens — você pode escolher qualquer um dos tipos (eu escolhi clássico) . Não compartilhe isso e salve; você não o verá novamente depois de fechá-lo.

Você pode então adicionar este token de acesso pessoal no plug-in e preencher os detalhes necessários. Branch é provavelmente principal e para o caminho de arquivo que usei — tokens.json — há uma ótima documentação aqui .

Opção 1 — Em seguida, usei a versão web do Token Configurator para transformar meus tokens em variáveis ​​.js , para experimentar antes de instalar o pacote. Basta exportar seus arquivos do plug-in de token selecionando exportar arquivos na seção de ferramentas , eles serão exportados como .json (eu os exportei como vários arquivos, pois isso me ajuda a manter meus temas separados e ver o que é o quê) - você pode então basta carregá-los diretamente no configurador e pronto…

…O transformador é executado automaticamente e as variáveis ​​.js estão prontas para uso! Você pode simplesmente baixar esses arquivos e adicioná-los ao seu aplicativo. Mas não quero ter que exportar, importar, exportar e importar novamente toda vez que atualizo meus estilos. O objetivo dessa configuração é remover os processos manuais para que haja uma segunda opção.

Opção 2 (meu método preferido) — Execute os seguintes comandos em seu terminal para instalar o dicionário de estilo (basicamente, o dicionário de estilo permite que você armazene seus estilos de uma forma independente de linguagem e plataforma) . Os outros dois pacotes mudarão os tokens em arquivos de dicionário de estilo e em variáveis ​​.css e .js.

npm install style-dictionary
npm install token-transformer
npm i @tokens-studio/sd-transforms

npx token-transformer tokens.json tokens/CORE.json CORE

npx token-transformer tokens.json tokens/LIGHT.json CORE,LIGHT CORE --expandCompostion=true --expandTypography=true
npx token-transformer tokens.json tokens/DARK.json CORE,DARK CORE --expandCompostion=true --expandTypography=true

Você então precisa adicionar build.js ( este arquivo ) ao seu aplicativo que tirei da documentação do pacote, mas você precisa fazer algumas modificações para que ele funcione em todos os seus arquivos ao mesmo tempo. Observe as alterações em source, buildPath e duplicado para cada conjunto, mas você pode ver o código final no meu GitHub se precisar.

//Add this code snippet for every set of tokens
const sd = StyleDictionary.extend({
 source: ["**/tokens/CORE.json"],
 platforms: {
  js: {
   transformGroup: "tokens-studio",
   buildPath: "src/js/",
   files: [
    {
     destination: "CORE.js",
     format: "javascript/es6",
    },
   ],
  },
  css: {
   transforms: [
    "ts/descriptionToComment",
    "ts/size/px",
    "ts/opacity",
    "ts/size/lineheight",
    "ts/type/fontWeight",
    "ts/resolveMath",
    "ts/size/css/letterspacing",
    "ts/typography/css/shorthand",
    "ts/border/css/shorthand",
    "ts/shadow/css/shorthand",
    "ts/color/css/hexrgba",
    "ts/color/modifiers",
    "name/cti/kebab",
   ],
   buildPath: "src/css/",
   files: [
    {
     destination: "CORE.css",
     format: "css/variables",
    },
   ],
  },
 },
});

sd.cleanAllPlatforms();
sd.buildAllPlatforms();

4 — Configurando o livro de histórias

Eu amo o livro de histórias; ele me permite recriar meus designs de componentes em uma interface amigável onde posso compartilhar o que construí, como é configurado, testar, documentar e capturar todo o front-end, de estilos a páginas, tudo em um só lugar . Este será um rápido resumo de como começar; os seguintes comandos instalam e executam storybook. Confira a documentação completa aqui .

npx storybook@latest init --type react
npm run storybook

//DesignSystem.styles.tsx
export const StyledH1 = styled.div`
 color: ${(props) => props.theme.primary};
 font-family: ${(props) => props.theme.h1FontFamily};
 font-size: ${(props) => props.theme.h1FontSize};
 font-weight: ${(props) => props.theme.h1FontWeight};
 line-height: ${(props) => props.theme.h1LineHeight};
 text-align: left;
`;

//.storybook/preview.tsx
//...
const getTheme = (themeName) => {
 if (themeName === "Light") {
  return Light;
 } else {
  return Dark;
 }
};

const withThemeProvider = (Story, context) => {
 const theme = getTheme(context.globals.theme);
 console.log(theme);
 return (
  <ThemeProvider theme={theme}>
   <Story />
  </ThemeProvider>
 );
};

const preview: Preview = {
 globalTypes: {
  theme: {
   description: "Global theme for components",
   defaultValue: "light",
   toolbar: {
    title: "Theme",
    icon: "circlehollow",
    items: ["Light", "Dark"],
    dynamicTitle: true,
   },
  },
 },
 decorators: [withThemeProvider],
};

export default preview;

5 — Construindo os componentes e páginas

Não vou me aprofundar muito na codificação do YU-GO, já que este artigo não é sobre isso... e você pode ver meu código-fonte aqui se for útil! Mas, vou apenas mencionar algumas coisas legais sobre como você pode configurar seus componentes para serem configuráveis ​​no Storybook.

Controles — usando o Card Component como exemplo, sou capaz de recriar um componente exatamente da mesma forma que um designer faz no Figma — um componente com qualquer número de estados de usuário, temas e personalizações. Então, aqui está o mesmo componente e como ele ficaria no tema claro e escuro e em diferentes estados de usuário com cópia diferente. Gostaria apenas de enfatizar que, ao configurar um controle de opção de estado do usuário, posso passar diferentes conjuntos de dados por meio de meus componentes para ver como ficará ao longo do tempo, bem como o estado vazio e de erro.

Páginas — Você também pode configurar páginas inteiras, com qualquer número de controles e estados.

6 — O teste

Agora posso demonstrar como é fácil para nós fazer uma mudança em tudo, em todos os lugares, de uma só vez. Porque tudo, em todos os lugares, está conectado e sincronizado.

1. Atualize um estilo no Figma.
2. Clique em 'Push to Github'
3. Puxe as alterações e execute o aplicativo.

NB — Como prometido, um breve explicativo do que são Design Tokens:

Imagine que você não usa nenhum token de design e todos os seus estilos são valores embutidos em código? Alterações devem ser feitas em cada instância e não há uma verdade central de todos os valores usados.

Com os tokens principais, você tem uma verdade central de todas as cores e estilos usados, para saber que o valor do azul é consistente em todos os lugares, mas ainda é necessário fazer atualizações em cada estilo.

Com os tokens do sistema, agora você pode atribuir um token independente de valor a todos os seus estilos, para que possa alterar facilmente os estilos de maneira sistemática, por exemplo, alterando seus azuis para vermelhos.

Por fim, os tokens de componentes permitirão que você 'ramifique' certos estilos, por exemplo, talvez você tenha gráficos que exijam uma hierarquia diferente ou o uso de cores.