Eii, Raissa! Tudo bem? Espero que sim.
Preparar o arquivo com os modos de variáveis na conta Iniciante do Figma, dá para organizá-lo de uma forma bem estruturada mesmo com as limitações do plano.
O problema aqui é que o Figma restringe o uso de múltiplos modos de variáveis conforme o plano, então reproduzir exatamente a estrutura apresentada no curso pode não ser possível na conta Iniciante. Ainda assim, você consegue manter uma organização próxima de um Design System, evitando criar uma coleção difícil de manter.
Uma alternativa é separar as variáveis por função e deixar os valores organizados de maneira previsível. Por exemplo:
color
background
primary
secondary
text
primary
secondary
spacing
small
medium
large
breakpoint
mobile
tablet
desktop
Esse exemplo temos uma estrutura conceitual para separar cores, espaçamentos e breakpoints. A ideia é evitar misturar diferentes responsabilidades na mesma coleção.
Para Dark Mode, quando a conta não permite criar os modos necessários, é possível manter coleções ou variáveis separadas para os valores de cada contexto e documentar claramente a correspondência entre elas. Por exemplo:
color/background/primary-light
e
color/background/primary-dark
Para mobile, tablet e desktop, vale tomar cuidado para não transformar cada tamanho em uma variável independente sem necessidade. Em um Design System, é mais organizado definir tokens de espaçamento, tipografia e dimensões e aplicar esses valores conforme o contexto do componente.
Outra coisa que ajuda bastante é usar uma convenção de nomenclatura consistente. Assim, mesmo sem todos os recursos dos modos de variáveis, outra pessoa consegue entender rapidamente o propósito de cada token.
E uma boa estratégia é montar a estrutura pensando desde já em uma futura migração para uma conta com suporte aos múltiplos modos. Assim, quando o recurso estiver disponível, será necessário apenas reorganizar os valores, em vez de refazer o Design System inteiro.
Espero ter ajudado, conte sempre conosco por aqui.
Conteúdos para complementar seus estudos
Esse conteúdo pode estar em inglês, para traduzi-lo utilize o tradutor automático do navegador ou clique com o botão direito do mouse sobre a página e selecione a opção Traduzir para o português.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
