Catalogação por Plataforma em Design Systems: Organizando para Web, iOS e Android

Introdução

Design Systems buscam unificar a experiência do usuário, mas a realidade é que as plataformas onde nossos produtos rodam (Web, iOS, Android) têm suas próprias linguagens de design, convenções técnicas e expectativas dos usuários. Como um Design System pode abranger essa diversidade de plataformas de forma organizada? A resposta está na Catalogação por Plataforma. Em vez de um monólito único, o Design System é estruturado para apresentar informações – componentes, tokens, guias – de maneira segmentada e relevante para cada plataforma específica. Isso não significa criar sistemas totalmente separados, mas sim organizar a documentação e, potencialmente, as bibliotecas de componentes, para atender às necessidades distintas de cada ambiente.

O que é Catalogação por Plataforma?

Catalogação por Plataforma é a prática de estruturar a documentação e os ativos de um Design System de modo que as informações específicas para cada plataforma (ex: Web, iOS, Android) sejam claramente separadas e facilmente acessíveis.

Isso pode envolver:

• Documentação Segmentada: Ter seções distintas no site de documentação do Design System para cada plataforma, detalhando componentes, diretrizes e exemplos específicos.
• Bibliotecas de Componentes Separadas: Manter bibliotecas de UI distintas no Figma (ou outra ferramenta de design) para Web, iOS e Android, embora possam compartilhar uma biblioteca base de estilos (cores, tipografia).
• Tokens Específicos da Plataforma: Além dos tokens globais e de alias (geralmente agnósticos), pode haver tokens específicos para ajustar espaçamentos, tipografia ou outros detalhes conforme as convenções de cada plataforma.
• Guias de Implementação por Plataforma: Fornecer trechos de código (code snippets) e orientações de implementação específicas para os frameworks e linguagens de cada plataforma (React, Swift/UIKit, Kotlin/Compose).
• Indicação Clara de Disponibilidade: Sinalizar claramente na documentação para quais plataformas um determinado componente ou padrão está disponível e maduro.

O objetivo é permitir que um desenvolvedor web encontre rapidamente a documentação e os componentes React, enquanto um desenvolvedor iOS encontra os equivalentes em Swift/UIKit, mesmo que ambos derivem dos mesmos princípios de design.

Por que é importante?

Organizar o Design System por plataforma é crucial por várias razões:

1. Relevância: Garante que designers e desenvolvedores recebam informações diretamente aplicáveis ao seu contexto de trabalho, evitando ruído de outras plataformas.
2. Respeito às Convenções da Plataforma: Facilita a adesão às diretrizes específicas de cada sistema operacional (Material Design para Android, Human Interface Guidelines para iOS), que são importantes para a usabilidade e familiaridade do usuário.
3. Clareza na Implementação: Evita ambiguidades sobre como um conceito de design deve ser traduzido tecnicamente em cada ambiente.
4. Gerenciamento Facilitado: Permite que equipes especializadas em cada plataforma contribuam e mantenham a seção relevante do Design System.
5. Melhor Experiência do Desenvolvedor (DX): Desenvolvedores encontram o que precisam mais rapidamente, com exemplos e código relevantes para sua stack.
6. Adaptação de Padrões: Permite que certos padrões de UI sejam adaptados ou substituídos por equivalentes nativos mais apropriados em cada plataforma (ex: navegação, modais).

Como discutido em fóruns e artigos (Figma Forum, dbanks.design, Zeroheight), lidar com múltiplas plataformas é um desafio comum, e uma catalogação clara é uma solução chave.

Como aplicar na prática?

Implementar a catalogação por plataforma pode envolver:

1. Decidir a Estratégia: Escolher a abordagem: um sistema unificado com documentação segmentada, ou sistemas/bibliotecas parcialmente separadas que compartilham uma base comum?
2. Estruturar a Documentação: Organizar o site de documentação com seções claras para cada plataforma (Web, iOS, Android). Usar tags ou filtros para indicar a aplicabilidade de componentes e diretrizes.
3. Organizar Bibliotecas de Design: No Figma (ou similar):
   • Manter uma biblioteca