DÚVIDA_01_Figma (Design System): 02 Principios de Design / Cores

E aí Thiago, tudo joia?

É o seguinte: o cenário mais comum da construção de um Design System é criar ele para produtos que já existem. Por exemplo: o Trello é uma ferramenta pra gerenciamento de tarefas. Ele nasceu com um visual que os designers criaram, mas depois de um tempo, construíram um Design System e algumas alterações nas interfaces foram feitas com a primeira versão do Design System publicada. Como o Trello já existia, e dentro disso já tinham cores, tipografias, e vários outros elementos, os designers não precisaram fazer as coisas do zero. No máximo, o que pode acontecer, é ter uma redefinição completa da paleta de cores, definindo a cor principal, e gerando uma paleta variante de tons claros e escuros.

E por que criar ele só depois de ter os produtos prontos? Então, o Design System tá se popularizando bastante agora, por isso muitas empresas que já existem e já possuem produtos publicados estão correndo atrás disso, porque facilita e economiza muito o tempo das equipes, seja de criação ou tecnologia, e claro, nada impede de criar um Design System antes das interfaces, mas é um pouco mais complicado, porque a produção do Design System é constante, e a primeira versão pode levar meses até ser publicada, então é melhor e mais prático construir o produto primeiro, lançar ele, e depois ir construindo o DS com mais calma.

Se ainda tiver dúvidas, é só falar ;D

Olá, Mateus!

Blzinha e contigo?

Então, estou aprendendo Figma e seus processos mais básicos de estrutura e produção objetivando contruções mais bonitas e eficientes de dasboards para o Power BI.

Dito isso, recebo projetos com apenas cores e logomarcas definidas e há outros que nada tem (criação do zero mesmo).

Na minha visão de leigo, tinha entendido o Design System como um manual de intruções que padroniza, estrutura e registra todos os átomos de um projeto para em segundo momento agilizar a construção e modificação de um protótipo. Ao menos foi assim que comprrendi ao buscar pela internet.

Entretanto, na aula em questão, o professor parte do protótipo para criar o Design System e não ao contrário.

Daí vem minha dúvida: Visto que há uma gama de projetos possíveis, uns com total e outros com parcial falta de átomos (cores, letras , etc),como devo proceder?

1) Devo primeiro criar o Design System e depois o protótipo (visando maior agilidade e acertividade de produção) ou

2) Devo primeiro criar o protótipo de qualquer jeito, depois criar o Design System e por fim acertar o protótipo?

Tudo belezinha comigo também. Bora lá, antes, vamos contextualizar o que é um Design System:

O Design System nada mais é do que um produto que serve outros produtos. Essa é a melhor definição pra ele. Ele é um produto porque não tem fim, ele está em constante evolução sempre, acompanhando a tecnologia, as tendências de design, as atualizações da marca, e por aí vai. E ele serve outros produtos, porque todos seus elementos e componentes são usados nas interfaces da empresa em questão, como acontece com o Material Design, da Google, sendo usado no Gmail, Google Drive, Android...

Agora, sobre sua dúvida, o recomendado é não começar pelo Design System, porque ele demanda muito tempo. Se você está criando uma empresa, por exemplo, é porque você quer solucionar alguma coisa que alguém ainda não faz, e que os usuários precisam. Se você for construir o Design System primeiro, vai estar atrasando o início dessa solução, que deve ser o foco principal. O Design System vem depois com o tempo e a necessidade, não é algo que deve ser pensado no início, até porque o cenário ideal é ter uma equipe que trabalhe somente com a construção do Design System, e nada mais, e é difícil ter isso quando se está começando um projeto novo. Trabalhar num protótipo e ao mesmo tempo em um Design System só vai causar muito cansaço.

Pra resumir então: produza sua solução numa interface, já que é o foco principal, é só quando houver tempo e profissionais pra isso, aí sim o Design System vai ser uma opção bem viável. Até lá, você pode criar um guia de estilo, que é muito mais básico mas que atende bem de início.

Ah, entendi, Mateus.

Esse "guia de estilo" nunca ouvi falar e nem vi em lugar algum (ao menos nao lembro). Você seria um exemplo e/ou aula para eu ter noção?

O Guia de Estilo, que você pode encontrar conteúdos com mais facilidade pela nomenclatura em inglês (Style Guide), é como se fosse uma folha de estilo, onde é listado elementos como cores, tipografia, componentes, só que sem o uso de normas ou guias específicos sobre como usar. É uma documentação mega simples mesmo. Quando a gente junta esse Style Guide com padrões de uso, normas de usabilidade, e maiores especificações, aí temos um Design System.

Aí a gente entende que Style Guide é um dos itens que existem dentro do Design System. Podemos ter um Style Guide sem ter um Design System, mas não um Design System sem ter um Style Guide.

Ahhhh, blz, Mateus! Vou procurar mais sobre...obrigado