Com interesse em design systems?
Se aqui chegaste, por uma razão ou por outra, o tópico dos design systems muito provavelmente não te é estranho. Seja por mera curiosidade, ou como especialista no tema, sê muito bem-vindo a este espaço do DXD. Aqui encontrarás muitas e incríveis referências especificamente sobre design systems.
Alguns dos melhores conteúdos sobre o tópico, criados por centenas de autores que todos os dias partilham um pouco do seu conhecimento através da world wide web, enriquecendo desta maneira a comunidade. Mesmo não os conhecendo, todos merecem o nosso mais sincero e humilde obrigado.
Tens à tua disposição aqui referência a muitos conteúdos. Escolhidos através de uma curadoria cuidada e organizados segundo diversas áreas temáticas. É importante dizer que esta seleção de conteúdos, não é, como nunca poderia ser, uma visão unilateral sobre o tema. Para além destes, existem muitos outros conteúdos fantásticos por toda a web. Todas estas referências são uma selecção pessoal de alguns dos conteúdos mais interessantes encontrados online ao longo do tempo.
Facilmente encontrarás online, conteúdos que não estão nesta lista, mas podiam. Todas as sugestões de novas referências são muito bem-vindas. Se por acaso conheceres algum conteúdo que seria interessante constar desta selecção, por favor, partilha.
Índice
- Artigos DXD
- Exemplos
- Curadoria
- Livros
- Vídeos
- Eventos
- Equipas
- Checklists
- Introdução
- Arquitectura
- Documentação
- Nomenclaturas
- Design tokens
- Componentes
- Cores
- UX Writing
- Animação
- Processo
- Governação
- Métricas
- Retorno de investimento
- Estudos
- Acessibilidade
Artigos DXD
Podes encontrar no DXD vários conteúdos sobre design systems. Artigos de opinião, recursos, estudos, ferramentas, publicações, entre um conjunto muito maior de informação que te pode ser muito útil se procurares descobrir um pouco melhor o tema dos design systems. Descobre mais conteúdos sobre design systems no blog DXD.
Exemplos
Conhecer o trabalho de outras equipas é também um caminho para melhorar o nosso próprio trabalho. Neste caso, ter a oportunidade de descobrir como outros design systems documentam os seus sistemas, pode ser uma boa oportunidade de aprendizagem. Para te ajudar nesta descoberta, podes utilizar o Design Systems Index, um inventário de exemplos de design systems através da sua documentação.
Curadoria
- Design systems news
- Design systems .io
- Design systems .com
- Design systems repo
- Hey Design Systems!
- The design system guide
- Design systems for Figma
- Design systems surf
- Design system weekly
- Practical guide to design system
- Swedish design systems
- Norway design systems
- DS Playground (jogos em Figma)
- Design systems central
Livros
- Atomic design by Brad Frost
- Laying the foundations by Andrew Couldwell
- Design Systems by Alla Kholmatova’s
- Invision – design systems handbook
- Expressive design systems by Yesenia Perez-Cruz
- Creating a design system – the step-by-step guide by UXPin
- Animation in design systems by Val Head
- Building design systems by Sarrah Vesselov and Taurie Davis
- Design that scales by Dan Mall
Videos
- Design systems London – videos
- Design systems with Brad Frost and Google – the state of the web
- Mergo e Meiuca – Esquenta UX Team Summit 2022 – Design System
- Build your design systems like the pros by Invision
- Design systems talks
- Into Design Systems (Youtube)
- Hi Interactive – design system
- Typography – ultimate design system breakdown (font sizes, text style naming and responsive scaling)
- Design systems media
- Hatch Conference – Brad Frost – is atomic design dead?
Eventos
Equipas
- Atomic design system (MoPlay) – episode 1 – the story behind it
- Reimagining design systems at Spotify
- Creating coherence – how Spotify’s design system goes beyond platforms
- Creating Virgin Atlantic’s digital design system – part 1
- How to build and maintain an equitable design system in Abstract
- Radiant the ThoughtSpot design system
- How we organise our design system libraries to help Doctolib designers use more than 70 000 components a week
- Banco CTT design system – simplifying the complex
- Saving 300k hours for teams with REA’s design system
- Creating a flexible design token taxonomy for Intuit’s design system
- Greenstone – 6 meses de construção de um design system durante a pandemia
- Building design systems at Farfetch
- How we built our multi-platform design system at Booking.com
- Designing systems at Gusto
- RMS Design system (Nagarro)
- Figma Variables at Vodafone UK – how we structured taxonomy for a complex multi-brand design system
- Building IKEA’s Design System to unlock innovation
- Reimagining design systems at Spotify by Shaun Bent
- Korber design system – case
- How Pinterest’s design systems team measures adoption
- Criando um design system para múltiplas marcas (XP Inc.)
- Multibrand design system within the Volkswagen-Group and its brands – communication is key
- Metrics that matter – measuring the impact of the Cobalt design system (Part I) (Talkdesk)
- Metrics that matter – measuring the impact of the Cobalt design system (Part II) (Talkdesk)
- Building a large-scale design system for the U.S. government (case study)
- The system always kicks back (Shopify)
- Uplifting Shopify Polaris (Shopify)
Checklists
Introdução
- Design systems 101 (Frog)
- What is a design system? (Rangle.io)
- Design systems hub (Rangle.io)
- Os pilares estruturais de um design system
- Everything you need to know about design systems
- 7 Requirements of holistic design system
- Design Systems 101 (Nielsen Norman Group)
- Design systems – in the wild (with illustrations)
- The ABCs of design systems
- The do’s and don’ts of building a new design system
- Distilling how we think about design systems
- A comprehensive guide to design systems
- 8 Things I learnt building a design system
- Making a system to create a system
- 10 Things no one told me about design systems
Arquitectura
- The anatomy of a design system (Sparkbox)
- Design files to design system – a practical guide
- Understanding the parts of a design system – tokens, assets, components and patterns
- Enterprise design system – everything you need to know
- The design system ecosystem (Brad Frost)
- The six pieces of a design system
- Applying atomic design principles when creating digital products (Moving Brands)
- Beyond design systems for interfaces – a mega system of design systems
- Bliss – creating a multi-layered design system for two sibling brands
- Design system – arrumar as peças de Lego
- Revisiting the anatomy of a design system
- How I made a themeable design system for my professional brand
- Brad Frost – a global design system
- Design systems architecture diagrams
- Challenges of multi-brand design systems
- Multi-platform design system components in Figma
- Organising design systems with Figma
Documentação
- The people who use your design system documentation
- Why do they ignore my awesome design documentation?
- Which documentation tool for your design system?
- Design system documentation – a key pillar for consistent and collaborative UI development
Nomenclaturas
- Naming conventions for design systems
- Naming conventions for your design system
- Best practices for design system naming conventions
- Nomeando componentes de um design system
Design tokens
- Naming design tokens
- Mixin design tokens
- O que são design tokens?
- Design tokens – what are global, alias and component tokens – part 1 (Yamini Yanamala)
- Design tokens – creating global, alias and component tokens – part 2 (Yamini Yanamala)
- Variables in Figma <> collections setup
- Create your own design system – chapter color tokens
- Naming design tokens – the art of clarity and consistency
- Design tokens 102
- The future of design systems is semantic
- The real value of tokens
- Design tokens 101
- The definitive guide on how to master tokens in Figma 2023
- The real value of tokens
- Design tokens – future of design systems
Componentes
- Website styleguide resources
- UI components handbook
- The component gallery
- Design systems surf – components
- Picking parts, products and people (with checklist)
- Component specifications by Nathan Curtis
- Redesigning components for an existing design system
Cores
- Open source color system – simple color system for complex digital interfaces
- How to define color usage through semantic sets for design systems
- Simplified Figma color variables based on HSB interpolation
UX Writing
- What I learned as a design systems UX writer
- Um UX designer e um UX writer entram no Figma (Filipa Moreno e Luís Sousa)
Animação
Processo
- How to start building a design system
- How to build a design system from scratch
- Building, maintaining, and distributing your design system
- How can you create a design system roadmap?
- How to (properly) break your design system (Fabricio Teixeira)
- Design systems tiers
- Building a design system for SaaS application
- Design system maintenance – how to keep design system up to date?
- Design system versioning
- Build a design system for an existing product in 4 sprints
Governação
- Designing a systems team
- Releasing design systems
- Product team comes to design help design and build New York (Coggle diagram)
- Your enterprise team has a design system, but is it working?
- A unified language for the design of information systems
- Conducting an interface inventory (Brad Frost)
- Design system communications
- Taming chaos – our design system governance at scale
- Building a design system? Start with a map
- How to evangelize a design system?
- Building and scaling a design system in Figma – a case study
- Why design system designers need to be great auditors
- Team models for scaling a design system by Nathan Curtis
- DesignOps lab – toolkit
- How to build a design system with a small team
- The design system lifecycle – it’s simply push and pull
- Design system – how to successfully collaborate?
Métricas
- How to measure your design system?
- Measuring the impact of a design system
- Measuring the health of our design system
- Opening up the data behind your design systems
- Design system metrics – how to measure the value of design system
- How to measure design system adoption
- Design system metrics collection
- How to measure the dev side of a design system
- Measuring the impact of a design system
- Design systems metrics (Romina Kavcic)
- Data driven design systems in practice
Retorno de investimento
- Why invest in an enterprise design system?
- Design systems – o impacto e mais-valia na customer experience (Ricardo Melo)
- The never-ending job of selling design systems (Ben Callahan)
- A design system business case and business benefits – the ultimate guide
- Design system ROI calculator
- One formula to rule them all – the ROI of a design system
- Increase revenue and save costs with the design system
- Benefits of a design system
- What is the value of a design system?
- ROI of design systems
- A guide for calculating design system costs
Estudos
- Ruben Ferreira Duarte – Mapa dos Design Systems em Portugal 2022
- Meiuca – Design Systems & Ops v2
- Sparkbox – design systems survey 2018
- Sparkbox – design systems survey 2019
- Sparkbox – design systems survey 2020
- Sparkbox – design systems survey 2021
- Sparkbox – design systems survey 2022
- The state of design systems in 2020
- The state of design systems in the Netherlands 2019