📺 Vídeo: https://www.youtube.com/watch?v=HGaBFvC9Muo O Pajamas é o design system que está na base de construção de toda a experiência e interface da GitLab. Open-source desde as suas primeiras versões, a documentação disponível online não é um apanhado do sistema, é exactamente o mesmo instrumento que todos os dias as equipas da GitLab utilizam, estejam onde estiverem. Esta apresentação mostra o percurso do Pajamas, quais são hoje os seus maiores desafios e alguns dos processos de trabalho das equipas no quotidiano.

1. 1
Pajamas Design System
design.gitlab.com
Pedro Moreira da Silva · @PedroMScom
Janeiro 20, 2022 @ “Design systems tratados por tu” pelo Clube de Criativos de Portugal

2. 2
Do que vamos falar hoje
👉 GitLab: A Plataforma DevOps
👉 Pajamas: Um design system com
nome de roupa
👉 Construir o Pajamas abertamente
👉 Breve história do Pajamas
👉 Qual o valor do Pajamas?
👉 Takeaways

3. 3
Pedro Moreira da Silva
Staff Product Designer na GitLab
Project Maintainer do Pajamas Design System
● +15 anos em Design, 5 anos na GitLab.
● Concebi design systems para produtos e
websites, em consultoras e startups.
● Apaixonado por trabalho remoto, design
aberto e transparência.
👋 Olá!

4. 4
GitLab: A Plataforma DevOps

5. 5
5
GitLab: A Plataforma DevOps
Proteger
Gerir Planear Criar Testar Embalar Lançar Configurar Monitorar Defender
Uma plataforma para todo o ciclo de vida do
desenvolvimento de software

6. 6
6
SERVIÇOS FINANCEIROS
OPEN SOURCE
SETOR PÚBLICO
ENTRETENIMENTO
6
HARDWARE
TECNOLOGIA
A GitLab não declara possuir qualquer direito, título ou interesse em qualquer marca mostrada. Todas as marcas registadas, logotipos e imagens são propriedade das respetivas entidades.

7. 7
AMPLA ADOÇÃO
- Cerca de +30 milhões de utilizadores.
(pagos e gratuitos) de startups a
empresas globais.
GitLab: A Plataforma DevOps
EMPRESA
- Incorporada em 2014.
- +1.300 membros de equipa em mais
de 65 países e regiões no mundo em
31 de julho de 2021.
COMUNIDADE FORTE
- Núcleo de código aberto.
- Comunidade de +2.400 contribuidores
ativos em 31 de julho de 2021.
https://about.gitlab.com/company/

8. 8
Pajamas: Um design system
com nome de roupa

9. 9
Wikipedia: Pijamas são um tipo de
roupa usado para dormir, por pessoas
que não querem dormir sem roupas ou
apenas com a roupa de baixo.
Discussão original sobre o nome
Slippers é o design system do nosso marketing website
Referência à nossa cultura remote

10. 10
Pajamas: Um design system com nome de roupa
● 👉 design.gitlab.com
● Princípios de design
● Padrões de design base
● Componentes
● Auditorias de acessibilidade
● Normas de usabilidade
● Objetos e modelos conceptuais

11. 11
Pajamas: Um design system com nome de roupa
🔗 Exemplo: Accordion component
1. Nome
2. Propósito
3. Exemplos interactivos
4. Link para biblioteca Figma
5. Estrutura ilustrada
6. Diretrizes
a. Quando usar/quando não usar
b. Conteúdo
c. Acessibilidade
7. Referências
8. Relacionados
9. Editar página

12. 12
Construir o Pajamas abertamente

13. 13
13
Construir o Pajamas abertamente
Website Pajamas
Documentação
GitLab UI
Código
GitLab SVGs
Ícones e ilustrações
Pajamas UI Kit
Figma
GitLab
Aplicação
A GitLab não declara possuir qualquer direito, título ou interesse em qualquer marca mostrada. Todas as marcas registadas, logotipos e imagens são propriedade das respetivas entidades.

14. 14
● Utilizado por todos os
contribuidores do GitLab.
● Open source (código aberto).
● Preparar para receber propostas,
pedidos e perguntas de qualquer
pessoa através de:
○ Diretrizes para contribuições
■ Documentação
■ Issue/merge request templates
○ Ciclo de vida dos componentes
● Planos públicos
Construir o Pajamas abertamente

15. 15
Construir o Pajamas abertamente

16. 16
Breve história do Pajamas

17. 17
Breve história do Pajamas
● 2014 — Primeiro designer da GitLab
● 2016 — Formação da equipa de User Experience
● 2017 — Início do Pajamas, ícones e ilustrações
● 2018 — Padrões de design base, biblioteca de
design em Sketch e biblioteca de código
● 2019 — Transição Sketch→Figma
● 2020 — Equipa dedicada ao Pajamas, esforço de
integração na aplicação, início dos objetos e
modelos conceptuais
🔗 “The Evolution of UX at GitLab”
2017
🔗 Modelo “UX Maturity” da Nielsen Norman: estágios 1–4 e
5–8

18. 18
18
🔗 Building Design Systems
● Livro prático como construir, manter e
evoluir um design system.
● Focado em produtos mas com dicas
para agências.
● Exemplos práticos, templates e casos de
estudo como o Pajamas.
● Tópicos menos populares como “vender”
e medir o sucesso do design system.
Breve história do Pajamas

19. 19
Qual o valor do Pajamas?

20. 20
● 🗓 Inquéritos em 2018 e 2021.
● 🗣 Respostas de designers,
engenheiros e gestores de produto.
● ✨ Temas principais:
○ O Pajamas é referenciado mais vezes e
é considerado muito útil.
○ O número de perguntas sobre padrões
está a diminuir.
○ Há mais tempo para criar soluções e
resolver os problemas dos utilizadores.
🔗 “Measuring the value of our design system”
Qual o valor do Pajamas?

21. 21
Takeaways

22. 22
22
1. Design systems públicos têm muito mais
vantagens do que desvantagens.

23. 23
23
2. É essencial medir (com frequência) o
sucesso dos design systems.

24. 24
24
🔗 “Measuring Success” cheatsheet por Nathan Curtis, 2021-12-08

25. 25
25
Thank y u
design.gitlab.com
@PedroMScom
pedroms.com