[Dúvida] Escala dos componentes | Design System: projetando e construindo componentes

Não consegui compreender, muito bem, como eu faço para trabalhar utilizando os componentes em tamanhos de telas diferentes.

Em um cenário fictício, eu tenho uma aplicação Web que será apresentada em uma tela comum desktop (no Figma representado por 1440 x 1020) e, ao mesmo tempo, uma tela mobile (430 x 932). Acredito que, para facilitar o processo de desenvolvimento, o adequado seria eu criar 2 protótipo, um para cada layout.

Primeira dúvida: Esse pensamento está correto? Se não, como eu posso resolver essa questão?

Nas aulas, o professor está criando apenas a variação dos estados daquele componente, do botão ou do input, por exemplo utilizando os tokens de espaçamento, fonts, colors e etc. Mas eu não vi como isso acontece para telas com tamanhos e formatos distintos.

Como eu faria esse processo no Figma: Eu vou criar um novo componente, exclusivamente, para uma tela maior ou eu faço, dentro do mesmo componente, as variações de tamanho?

Exemplo: Eu terei um componente chamado botão XL e outro componente chamado botão MD.

Oi Ricardo!

Seu pensamento está correto!

De forma geral, é comum desenvolvedores criarem apenas uma perspectiva, mesmo para projetos que serão executados em diferentes tamanhos de tela. Não é uma boa prática, porque sistemas podem ficar bem diferentes e até precisar de ajustes em outros tamanhos de telas, principalmente nas menores.

No entendo, não é difícil encontrar projetos que trazem duas perspectivas, sendo uma para desktop e outra para mobile. Em muitos casos, essas duas representações já são o suficiente, partindo do princípio que existirão poucas variações além destes dois tamanhos de tela. Então estas duas perspectivas já devem garantir uma maior compreensão do seu protótipo.

Existem algumas regras de autolayout, que permitirão você criar um sistema de grid e imitar algumas ações do bootstrap, por exemplo. Mas infelizmente exige uma complexidade maior para criar essas alterações dinâmicas, o que faz muitas pessoas preferirem criar duas telas sem precisar configurar todas estas regras automáticas.

A respeito dos componentes, você é livre para trabalhar com dois componentes sendo um para cada perspectiva, ou criar um único componente com esta variação. Eu particularmente crio variações, pois acho mais fácil, a lista de componentes fica mais limpa e o desenvolvimento fica mais dinâmico.