Como nós (designers) podemos utilizar o PO UI

Designers usando o PO UI (que momento mágico).

Este texto tem a intenção de falar um pouco sobre como nós (designers ou não também) podemos utilizar o UI Kit do PO UI. E isso num formato bem simples e direto.

Mas antes uma leve introdução…

PO UI é uma biblioteca instalável de componentes com base em Angular. E é o primeiro produto open source da TOTVS. Nasceu com foco em alta produtividade dos times de produto com o THF (área responsável pelo PO UI na TOTVS) trabalhando com outras várias equipes. E trás o benefício no dia-a-dia dos designers otimizando o tempo de trabalho e ganhando produtividade.

O que é UI Kit?

De forma geral, um UI Kit é um conjunto de componentes simples ou complexos (como botões, campos de formulário e etc) que servem de modelo para construir soluções de design com componentes responsivos e ficam disponíveis conforme a principal ferramenta de design escolhida. Pode ser Figma, Sketch ou Adobe XD, trata-se uma decisão de contexto.

Qual ferramenta estamos utilizando?

Atualmente utilizamos o software Sketch (um editor gráfico vetorial desenvolvido para macOS). Funciona muito bem para concepção de soluções digitais, principalmente pensando no nosso contexto e é concorrente do Figma, outra ferramenta com a mesma função mas com uma abordagem muito mais colaborativa e multiplataforma. E sim, logo teremos o UI Kit para Figma também.

Passo a passo de como utilizar o PO UI

• Configure como biblioteca no Sketch: abrindo o Sketch Cloud com o arquivo UI Kit (no caso, do tema rosado/roxinho do PO UI) e clique no botão "Add library to Sketch" no canto inferior direito;

Aqui o print da tela que você verá do Sketch Cloud com o UI Kit do PO UI (no print é o do tema da TOTVS, o que muda são as cores).

• Você será redirecionado para o software Sketch, mostrando que está com a biblioteca de componentes já instalada no Software;
• Dê uma olhada nos componentes que temos disponíveis, que fica no item Symbols que está no "Insert" do topo. Com a intenção de identificar o que tem por ali, quais os formatos utilizados e entender a lógica de organização utilizada;

Neste exemplo, customizei o toolbar do Sketch com a opção "Symbols" mais acessível (já fica como "dica" para vocês).

Exemplo do espaço de "utilidades" do UI Kit e sua organização.

Agora é só trabalhar.

Pronto, é isso… Agora podemos começar o trabalho? Sim!

Agora o protótipo de alta

Podemos sair de protótipo de baixa fidelidade para um de alta fidelidade em poucos minutos, usando os componentes do UI Kit. Como nesse exemplo abaixo:

Um protótipo de baixa fidelidade pode sair desse passo…

…facilmente para um protótipo de alta fidelidade feito em menos de 10 minutos (mas isso por contado dos componentes do UI Kit).

Tá fazendo sentido mesmo? Então, que tal essa dica…

A principal dica é que, como designers, a gente consulte o portal do PO UI, mas muito, muito mesmo. Principalmente na fase de concepção do protótipo de média, pois mesmo que os componentes desenvolvidos não sejam iguais nesse formato de protótipo, a funcionalidade deve ser a “mesma”. Dessa forma, será mais fácil mapear caso tenha alguma melhoria futura, ou mesmo um novo algum componente… Se houver algum ponto que precise de uma maior atenção, já estará mapeado para as próximas fases. Isso fica ainda mais importante quando se trata de componentes mais complexos, como o componente lookup.

Bom, é isso!

Opa… tem um vídeo de bônus que foi desenvolvido para o compartilhamento do assunto aqui dentro da TOTVS. Aqui a gente consegue desenvolver um pouco mais na prática. Confere e comenta o que achou dessa utilização.

Como nós (designers) podemos utilizar o PO UI, agora no YouTube mais próximo de você.

Além disso, ainda teremos algumas outras conversas sobre PO UI para designer. Mas fala aí… Você tem alguma dica para nos ajudar a utilizar o UI Kit do PO UI? Conta pra gente.

Se precisarem trocar uma ideia sobre design ou PO UI, podem contar comigo. Obrigado e até a próxima!