Design System: projetando e construindo componentes

Definindo componentes - Apresentação

Saudações, estudantes! Desejamos boas-vindas ao nosso curso Design System: Projetando Componentes. Meu nome é Bruno Pavei, sou designer, pesquisador e instrutor na Escola de UX & Design.

Audiodescrição: Bruno se identifica como um homem branco. Tem olhos castanhos e cabelo e barba escuros. Está utilizando uma camiseta gola polo na cor branca. Ao fundo, cenário composto por uma estante com livros e quadrinhos, algumas plantas e outros objetos de decoração. Todos esses são sobrepostos por uma luz roxa, que é a cor da nossa escola.

Eu serei seu instrutor neste curso de Design System (Sistema de Design), onde vamos aprender a identificar, projetar e prototipar os componentes de um sistema digital.

Pré-requisitos

Este curso é para você, que já sabe o que é um Design System, bem como impacto que ele tem no ecossistema de produtos digitais, e gostaria de aprender a desenvolver seus próprios componentes.

É importante que, para este curso, você tenha conhecimento em alguma ferramenta de desenvolvimento de interfaces. Nesse curso, nós vamos utilizar o Figma.

Também é indispensável que você saiba sobre o desenvolvimento e conceito de Design Tokens, que serão as bases para construção dos nossos componentes.

Se você ainda não sabe o que são Design Tokens ou como desenvolvê-los, recomendamos que assista o primeiro curso da formação de Design System, que aborda de uma maneira mais aprofundada esse conceito que é tão importante para a criação dos nossos componentes.

O que vamos aprender?

O nosso curso vai continuar com o projeto da Finbank, que é o nosso banco fictício da Alura. Nosso objetivo é desenvolver uma biblioteca de componentes para atender as necessidades das interfaces desenvolvidas com o protótipo.

Ao longo deste curso, vamos desenvolver cada um dos componentes, incluindo suas interações, seus estados, e também algumas variantes para atender todas as necessidades do nosso sistema.

Se interessou e quer começar a projetar seus primeiros componentes? Esperamos você no nosso próximo vídeo!

Definindo componentes - O que são componentes?

Vamos aprender o que são componentes.

Contexto

Recapitulando o contexto de pesquisa e projeto deste curso, fomos contratados por uma empresa chamada Finbank para desenvolver uma patente dela, a Finconnect. Nós estamos atuando como designers de produto para desenvolver o Design System para essa patente.

No primeiro módulo deste curso, você aprendeu melhor o que são tokens e o impacto que eles têm no ecossistema de um Design System de um produto digital. Agora, vamos projetar os componentes desse sistema.

O que são componentes

Para entender melhor o que são componentes, vamos fazer uma analogia com um objeto que temos no dia a dia, o relógio de bolso.

Ele é um sistema, assim como o nosso Design System, que tem uma função específica: permitir que a pessoa usuária possa abri-lo e saber que horas são, informando-se de uma informação específica.

Para atender esse objetivo, ele precisa de alguns elementos. Esses elementos como ponteiros que direcionam as horas, números que são indicativos visuais e um botão que serve como um input do nosso sistema análogo, levando de uma interface para outra. Nesse caso, do relógio fechado para o relógio aberto.

Esses elementos atuam em conjunto como componentes de um sistema para que ele tenha eficácia, ou seja, para que seja possível visualizar as horas no relógio.

Pode parecer simples, mas isso não é muito diferente dos sistemas digitais.

De certa forma, podemos resumir que componentes possuem uma uma necessidade específica de interação e foi criado para atender uma demanda da pessoa usuária.

Por exemplo, em uma tela de boas-vindas onde temos que preencher nossos dados, vão existir alguns elementos, que chamamos de componentes, que compõem esse sistema e a atividade da experiência.

Se quisermos escrever algo na tela de boas-vindas, precisamos de um componente, um campo de texto. É um componente com o qual estamos acostumados, porque são usados em vários sistemas.

Se precisamos confirmar uma ação, temos uma checkbox, que é uma caixa de seleção. Ao clicar nessa caixa, o sistema é informado que estamos de acordo com alguma informação.

Também teremos um componente que será o mais prioritário de um sistema digital, que é o botão. Ele tem o objetivo de identificar e direcionar algo.

No caso do exemplo da tela de boas-vindas, ao clicar no botão, seremos redirecionados para outra página. E, nessa outra interface, teremos outras necessidades.

Em uma página inicial do sistema, por exemplo, precisamos identificar quem é a pessoa que está utilizando o sistema e apresentar informações específicas.

Por isso, usaremos outros componentes, como um componente de avatar, um componente card que sempre estarão agrupados para representar uma informação específica, além de uma barra de progresso, que mostra o quão longe ou perto a pessoa usuária está de completar um objetivo dentro de um sistema digital.

Assim como no relógio, teremos nossos componentes com funções específicas para atender sempre uma necessidade da pessoa usuária.

Em um sistema, teremos diversas telas, e essas telas serão formadas por diversos componentes.

Nossa função, como designers de produto, é identificar cada um desses componentes e projetá-los para que tenham uma maior eficácia, acessibilidade adequada e estejam de acordo com a pregnância e com a identidade da marca que estamos desenvolvendo dentro desse sistema.

Essa será a nossa etapa de construção de componentes para um Design System.

Conclusão

Existem muitos componentes, portanto, é impossível listar todos. Com o passar do tempo, podem surgir novas necessidades e novos componentes precisarão ser criados.

Vamos deixar alguns sites no "Para Saber Mais" para que você possa adquirir mais experiência e ter um local de consulta para acessar alguns componentes, tanto para pesquisa quanto para referência em um projeto que estiver desenvolvendo.

Além disso, caso você queira desenvolver algum dos componentes que não foram desenvolvidos no curso, você terá uma base de construção ao analisar como ele foi aplicado em outros Design Systems.

Sabendo o que são componentes, podemos começar a projetá-los. Esse será o tema do próximo vídeo, esperamos você lá!

Definindo componentes - Mapeando componentes

Agora que você já sabe o que é um componente, vamos para o segundo passo do nosso projeto, que é mapear os componentes que precisaremos desenvolver para o nosso Design System.

Ao observar as telas do nosso aplicativo, é possível identificar vários componentes. Precisamos desses componentes de uma maneira tátil, como uma lista ou alguma forma de identificar quais deles vamos desenvolver.

Esse levantamento de necessidade sempre partirá de uma base, que pode ser interfaces, wireframes ou até um sistema que já está desenvolvido.

A partir dessas informações, nós as agrupamos de uma maneira visual e criamos uma lista que servirá como base para o desenvolvimento do nosso projeto.

Para isso, vamos utilizar uma ferramenta muito útil que tem no próprio Figma, que é o FigJam.

Mapeando componentes

Com o FigJam aberto, copiamos e colamos as telas do nosso aplicativo com "Ctrl + C" e "Ctrl + V", que tem uma integração eficiente.

Vamos inserir nesse quadro o máximo de informação possível que tivermos previamente sobre o Design System. Portanto, podem ser inseridos interfaces, wireframes e qualquer outra informação que seja válida para isso.

Dentro desse board, podemos criar pequenas tags (etiquetas), que podem ser selecionadas com um post-it (atalho "S") ou com uma ferramenta de quadrado (atalho "R") na parte inferior do FigJam.

É interessante ter um bom contraste entre as etiquetas e a interface para que possamos visualizar as anotações com um zoom menor também.

Por exemplo, para identificar que precisaremos desenvolver um botão, podemos simplesmente escrever que botão será um componente do nosso sistema e criar uma seta para indicar em quais interfaces ele estará presente.

Da mesma maneira, podemos listar alguns componentes que já conhecemos previamente, por exemplo, o input de texto e também a checkbox.

Esses foram os componentes que identificamos na tela de boas-vindas.

Ao longo do nosso aplicativo, podemos prever também que alguns desses componentes vão se repetir. Por exemplo, os componentes de botão, podemos encontrar um botão em quase todas as interfaces.

Não precisamos mapear cada um desses botões, da mesma maneira que não precisamos mapear o botão secundário da tela de boas-vindas, porque ele será uma variação do nosso botão primário.

Mais um botão que seria interessante mapear é um botão que não possui borda, na verdade, ele possui uma linha sublinhada abaixo dele. Essa pode ser uma variação do nosso componente primário de botão e ele pode ser o nosso botão de link, que será desenvolvido posteriormente também.

A maior parte dos componentes das telas de cadastro podem ser definidas por quatro informações. Por isso, vamos para a página de início que é mais complexa.

Obviamente, podemos começar pelo avatar, que é um componente para identificar a pessoa que está utilizando o sistema. Mas também temos um monte de informações agrupadas em cards.

Tanto esses cards quanto os elementos que estão dentro deles também podem ser considerados componentes. Um exemplo disso são as barras de progresso que podem estar dentro de um card.

Agora, vamos lidar com a questão das variações. Na tela de orçamento (budget), também temos um outro estilo de card. Não podemos nomeá-los como cards, porque são claramente dois componentes diferentes.

Por isso, vamos começar a criar tags para identificar que tipo de componente está sendo desenvolvido. Por exemplo, o card da página inicial é um card de "Complete seu perfil". Então, podemos criar uma tag para identificar que ele é um card de perfil.

Da mesma maneira, todos os componentes que encontrarmos na aba de budget podem ser os cards de budget. Ainda na página de budget, também temos uma barra de progresso. Essa pode ser a barra de progresso de budget.

E para não criar uma tag para essa a barra da página inicial, podemos colocá-la como padrão. Ela pode ser o componente padrão do nosso sistema.

Evite nomear os componentes como 1 ou 2, porque fica confuso na hora de desenvolver.

Dentro do nosso sistema, também teremos outro tipo de card. Por exemplo, temos um card de tamanho mini no menu.

Lista de necessidades

Já fizemos todos o mapeamento dos componentes das telas. Por fim, podemos juntar tudo isso e criar uma lista de componentes, que será a nossa lista de necessidades para serem desenvolvidas previamente no Design System.

Necessidades:

• Avatares
• Botões
  • Botões de link
• Checkbox
• Toogle
• Text Input
  • Code Number
• Barras de progresso
  • Simples e custos
• Cards
  • Perfil
  • Custos
  • Orçamento

Dentro do FigJam, criamos também uma biblioteca de componentes, que vai mapear os componentes que estão em necessidades, o que temos em desenvolvimento e finalizados, que pode servir para que você consiga organizar melhor o cronograma de desenvolvimento.

Nessa área, podemos tanto colar tanto uma tag, como criar uma lista ou até mesmo copiar um componente parar conseguimos movimentá-lo dentro da biblioteca de componentes. Mas é importante ter pelo menos uma lista.

Caso você queira trabalhar em outro projeto, ou queira adicionar algo que pode ser uma interação prévia, futura, do nosso sistema, também podemos colocar nessa área. Por exemplo, podemos prever um toggle, caso seja preciso ativar ou desativar algo dentro do sistema.

Além disso, podemos criar também algumas variações e atualizar essas nomenclaturas para que estejam de acordo com o nosso sistema.

Próximos passos

Agora que você já mapeou os seus componentes, podemos partir para o próximo passo, que é criar o nosso primeiro componente, que será um componente de botão. Esperamos você no próximo vídeo!

Sobre o curso Design System: projetando e construindo componentes

O curso Design System: projetando e construindo componentes possui 133 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de Design System em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Definindo componentes
• Criando componentes de botões
• Componentes de input e progresso
• Modularizando sistemas
• Revisando componentes