Boas Práticas de Design Systems
Um resumo condensado das 25 melhores práticas mais importantes extraídas de todas as páginas desta seção.
//
Busque em todas as páginas da documentação
Um resumo condensado das 25 melhores práticas mais importantes extraídas de todas as páginas desta seção.
Comece com tokens, não com uma biblioteca: Defina papéis de cor, espaçamento e tipografia em um módulo antes de adotar NativeWind, Tamagui ou Paper - bibliotecas consomem tokens; elas não substituem decisões de design.
Nomeie tokens por papel semântico: Use surface, textPrimary e accent em vez de gray700 - revisões de paleta e sabores white-label trocam valores sem renomear cada tela.
Mantenha o espaçamento em uma escala fixa: Uma grade de 4px (4, 8, 16, 24) supera o padding ad-hoc de 13 e 17 - designers e engenheiros compartilham um ritmo.
Exponha APIs pequenas de componentes: Primitivas aceitam variant, size e disabled - não props de estilo abertas que recriam botões únicos por recurso.
Um ThemeProvider na raiz: Centralize a seleção de esquema e marca - provedores aninhados causam cores de "cérebro dividido" e buscas duplas na mudança de tema.
Aplique cores dinâmicas na renderização: StyleSheet.create no nível do módulo com hex codificado não reage ao modo escuro - combine layout estático com useTheme() ou utilitários dark:.
Escolha uma estratégia de estilização por aplicativo: Misturar telas Tamagui, telas NativeWind e StyleSheet bruto sem limites cria inchaço de bundle e movimento inconsistente - escolha uma espinha dorsal e envolva o legado incrementalmente.
Profile antes de adotar um compilador: NativeWind e Tamagui resolvem problemas de escala - um MVP de cinco telas não precisa de transformadores Metro ou manutenção de tamagui.config.ts.
NativeWind: strings de classe estáticas em listas: `bg-${x}` dinâmico quebra a extração em tempo de compilação - use mapas de variantes fixos em componentes de linha.
Tamagui: variantes tipadas em vez de hex inline: Variantes styled() codificam estados de design - tokens $brand mantêm o modo escuro e os sabores coerentes.
React Native Paper: sempre envolva PaperProvider: O tema MD3, ripple e ícones fluem do contexto - telas que pulam o provedor silenciosamente voltam aos padrões.
Paper + Navigation: use adaptNavigationTheme: As cores do cabeçalho e das abas devem corresponder a primary e surface - um chrome desalinhado é lido como dois aplicativos diferentes.
@expo/ui para chrome nativo, RN para densidade: Host/Button/Switch universais se destacam na sensação da plataforma - listas virtualizadas e gráficos personalizados permanecem em RN (RNHostView islands).
Modificadores SwiftUI não são estilos RN: Layouts de widget e vidro usam @expo/ui/swift-ui/modifiers - não cole StyleSheet em extensões de destino.
Acessibilidade pertence às primitivas: Defina accessibilityRole="button" e rótulos em Button/Pressable da biblioteca uma vez - equipes de recursos esquecem correções por tela.
Suporte a tipo dinâmico em primitivas de texto: Encaminhe maxFontSizeMultiplier e teste strings alemãs longas em wrappers Text - barras de ferramentas densas limitam a escala; o corpo do texto não deveria.
Respeite o movimento reduzido em primitivas animadas: Esqueletos de carregamento e transições de entrada devem respeitar as configurações do sistema - restrinja animações de entrada do Reanimated quando o movimento reduzido estiver ativado.
Teste de contraste para cada sabor de marca: Pares primary/onPrimary white-label devem passar por auditoria por inquilino - uma paleta Acme que passa não certifica o verde Globex.
Storybook documenta estados, não apenas o caminho feliz: Histórias de vazio, carregamento, erro, desabilitado e texto longo capturam bugs de layout antes que cheguem aos fluxos de autenticação de produção.
Mantenha o Storybook fora dos bundles de produção: Use a troca de entrada STORYBOOK_ENABLED - nunca importe .rnstorybook incondicionalmente em App.tsx.
Semver o pacote de UI como qualquer dependência: Renomear title → label é um bump major - aplicativos móveis fixam versões; documente mudanças visuais que quebram no CHANGELOG.
Exporte uma API pública restrita: Exporte apenas primitivas e hooks de index.ts - helpers internos prefixados ou não exportados evitam acoplamento não suportado.
White-label com configuração de sabor, não forks de git: BRAND_FLAVOR em perfis EAS + registro brands escala patches de segurança - forks multiplicam o custo de atualização do SDK.
Isole canais OTA por sabor: Publicar o bundle JS de um cliente em um canal de outro inquilino é um incidente de marca e dados - mapeie canais em eas.json.
Revise tokens em CI: Bloqueie novos hex brutos em pastas de recursos e novos estilos inline em renderItem de listas - a disciplina do sistema de design se erode um PR de cada vez sem portões de lint.
Quando você tiver muitas telas compartilhando tokens e a ergonomia de utilitários ou variantes superar mensuravelmente a manutenção de StyleSheet. Mantenha tokens + StyleSheet até que a deriva de copiar e colar apareça - veja Fundamentos de Design Systems.
Escolha Paper para produtos MD3 com foco em Android, com formulários e diálogos padrão. Escolha personalizado + tokens quando a linguagem da marca não for Material. Veja React Native Paper.
Controles nativos drop-in e layouts híbridos - não um substituto completo para listas e navegação. Veja Expo UI Drop-Ins.
Sabor escolhe a cor primária e os ativos da marca; esquema escolhe fundos e bordas neutras. Mescle em um provedor - veja Tematização e Sabores de Marca.
Extraia quando dois aplicativos compartilharem primitivas ou quando Storybook e semver forem importantes. Equipes de um único aplicativo podem usar components/ até que o segundo consumidor apareça - veja Construindo uma Biblioteca de Componentes Interna.
accessibilityRole, rótulo visível (ou accessibilityLabel em controles apenas de ícone), contraste no texto e teste básico de VoiceOver/TalkBack em cada nova primitiva - veja Fundamentos de Acessibilidade.
Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 19 de jul. de 2026