Design System for dummies, crie o seu próprio sabor do aplicativo React Native em 3 passos fáceis

Ethan Sharabi Blocked Unblock Seguir Seguindo 8 de janeiro

Criar seu próprio aplicativo não é uma tarefa pesada hoje em dia. Enquanto há apenas alguns anos você teria que dominar dois ecossistemas diferentes para criar um aplicativo multi-plataforma, hoje, usando apenas o JavaScript com o React Native, é uma questão de minutos até você ver sua primeira tela em funcionamento no iPhone. e dispositivo Android.

Sim, é verdade, podemos discutir os prós e contras de se ter um aplicativo nativo de resposta versus um nativo, mas essa não é a razão pela qual nos reunimos aqui hoje.

Então… criar um aplicativo é fácil (ou um pouco mais fácil), mas que tal projetar um? Como alguém pode realmente construir um aplicativo bonito e impressionante?

Vamos começar com alguns exemplos

Para demonstrar o que vamos falar aqui hoje, criei dois tipos de telas, telas que você provavelmente verá na maioria dos aplicativos.

  • A tela de login
  • Uma tela típica de formulário

Isso me ajudará a mostrar como é fácil se mover entre diferentes designs e brincar com conceitos ao usar o uilib .

01 Pesquisa

Sempre comece com pesquisas sólidas, todos os bons aplicativos baseados nos mesmos fundamentos: Cores, Tipografia e Layout.

Em seguida, há o estilo. Obtenha algumas inspirações de estilo e ideias de vários sites e aplicativos. Eu posso recomendar alguns que sempre me ajudem.

  • Pinterest – basta começar a procurar por conceitos e você encontrará o que precisa.
  • Muzli – ótimo lugar para inspirações, o melhor recurso para alguns top, projetos atuais e tendências.
  • Coolors – Gere cores de tema e obtenha pré-ajustes de cores para você seguir em frente.
  • Google Fonts – Explore fontes diferentes, com diferentes pesos e faça o download gratuitamente.

Baixe, capture e imprima tudo o que achar interessante, reúna uma ideia do que você está tentando alcançar, não há motivo para reinventar a roda.

02 A Fundação

Depois de decidir uma ideia geral para o seu aplicativo e ter uma imagem clara de como ele deve ficar, é hora de criá-lo.

Como mencionei antes, cada aplicativo tem sua própria base e a base consiste em conceitos fundamentais na interface do usuário. O uilib permite que você defina essas bases e as use facilmente em todo o seu código.

Cinquenta Tons de Cinza

Primeiro são as cores. Cada aplicativo tem um conjunto exclusivo de cores que o identificam. Para Spotify é verde e preto, Pinterest é vermelho e Facebook é azul. O Google é muito limpo (ou seja, branco), mas ainda assim, usa suas cores populares azul, vermelho, verde e amarelo em todos os seus produtos.

Não precisa ter muitas cores, mas eu pessoalmente recomendo manter de 5 a 8 tons por cor.

Por quê? As sombras de causa são úteis para implementar estados diferentes (desativado, feedback de impressão, etc…)

Se, por exemplo, decidimos usar # D64933 como nossa cor vermelha, eu incluiria as seguintes tonalidades e as nomeasse red10, red20,… red50 de acordo. (quando red30 aponta para # D64933, o tom primário), é claro, você pode nomear como quiser.

Agora, com o uilib, tudo o que você precisa fazer é usar o Colors.loadColors assim:

 import {Colors} de 'react-native-ui-lib'; 
 Colors.loadColors ({ 
red10: '# C37463',
red20: '# BD6753',
red30: '# B95A44',
red40: '# A9523F',
red50: '# 984938',
});

O uilib já vem com um conjunto de cores, incluindo os 8 tons para sua conveniência. Além disso, fornece utilidade útil para mover rapidamente entre diferentes tonalidades.

 Colors.getColorTint (Colors.red30, 50) // -> Colors.red50 
Colors.getColorTint (Colors.blue10, 40) // -> Colors.blue40

Obtendo a fonte correta

As fontes podem ser um pouco mais complicadas, cada predefinição de tipografia contém vários valores. fontSize , fontWeight , fontFamily , lineHeight e muito mais…

Eu recomendaria geralmente ter cerca de 5-6 tipos de tipografias, de qualquer forma, mesmo que cores, uilib oferece um conjunto de tipografias ( text10 , text20 ,…, text100 ) para você correr, mas, ainda é possível carregar o seu próprio.

 Typography.loadTypographies ({ 
cabeçalho: {fontSize: 58, fontWeight: '300', lineHeight: 78},
title: {fontSize: 46, fontWeight: '300', lineHeight: 64},
body: {fontSize: 18, fontWeight: '400', lineHeight: 22},
});

Todos os presets são incorporados nos componentes do uilib e podem ser facilmente usados como modificadores . Leia mais sobre modificadores em outro post do meu blog .

03 onde tudo vem junto

Então você tem suas idéias e organizou todas as suas predefinições e está pronto para começar a codificar.

Uma maneira de usá-lo, a mais intuitiva, é passar para os acessórios de um componente. Vamos pegar o componente Button , por exemplo.

 import {Button, Colors, BorderRadiuses} de 'react-native-ui-lib'; 
 Botão < 
label = "Button"
backgroundColor = {Colors.red30}
color = {Colors.white}
borderRadius = {BorderRadiuses.br20} />

ou ainda mais fácil, usando modificadores

 <Button label = "Botão" bg-red30 branco br20 /> 

Isso resultará no mesmo botão.

Um botão vermelho com etiqueta branca e um raio de 6

Embora tudo seja bom e fácil, como falamos anteriormente, estamos tentando criar um estilo geral, uma aparência unificada e comportamento para nosso aplicativo. Isso significa que provavelmente usaremos o mesmo estilo para esse botão em todos os outros botões do nosso aplicativo. Mas passar esses adereços repetidamente é claramente uma má prática… entra no ThemeManager .

O ThemeManager é a nossa última estação onde tudo vem junto. Usar o ThemeManager pode ser útil para criar um estilo global para seu aplicativo ou, melhor dizendo, para o tema do seu aplicativo.

No nosso caso, se quisermos aplicar nosso estilo de botão vermelho em todos os botões do aplicativo, tudo o que você precisa fazer é

 import {ThemeManager} de 'react-native-ui-lib'; 
 ThemeManager.setComponentTheme ('Button', { 
backgroundColor: Colors.red30,
cor: Colors.white,
borderRadius: BorderRadiuses.br20,
});

Embora isso faça sentido e seja bastante fácil, você se pergunta por que não apenas substituir defaultProps que vem com todos os componentes. Bem, isso nos leva ao poder real do ThemeManager .

Vamos dar um exemplo mais avançado. O componente Button possui um suporte chamado fullWidth que, como você pode imaginar, renderiza o botão com largura total (costa a costa, se possível) sem limitação de largura. Com o tema do nosso aplicativo atual, ele será parecido com isso.

Mas talvez um botão de largura total não pareça o melhor com um fundo vermelho cheio, talvez seja muito proeminente para nós e nós gostaríamos de torná-lo um pouco mais leve. E se quisermos alterar a interface do usuário do botão apenas quando o fullWidth prop estiver fullWidth ? É aí que nosso ThemeManager é útil.

Para fins de demonstração, vamos decidir que os botões de largura total, em nosso aplicativo, serão renderizados com um plano de fundo branco, um rótulo vermelho e um contorno vermelho de 2 pontos. Deve ser algo parecido com isto

Então, novamente, estamos em apuros, podemos começar a passar para todas as instâncias do botão de “largura total” os objetos relevantes para substituir os padrões, adereços de tema, definidos anteriormente, mas isso não é realmente uma solução.

O ThemeManager permite definir o tema de um componente de duas formas

  • Passando um objeto (como você já viu)
  • Passando um retorno de chamada (que você verá agora)

Passar um retorno de chamada lhe dá a opção de controlar os objetos sendo passados para o componente em tempo de execução. O retorno de chamada aceita os suportes atuais do componente (e seu contexto atual) e espera que você retorne os suportes que deseja alterar.

 ThemeManager.setComponentTheme ('Button', (props, contexto) => { 
 const themeProps = { 
backgroundColor: Colors.red30,
cor: Colors.white,
borderRadius: BorderRadiuses.br20,
};
 if (props.fullWidth) { 
themeProps.backgroundColor = Colors.white;
themeProps.color = Colors.red30;
themeProps.outlineWidth = 2;
themeProps.outlineColor = Colors.red30;
}
 return themeProps; 
});

Basicamente, estamos verificando aqui se o fullWidth prop foi aprovado, se assim for, estamos substituindo alguns dos adereços (e adicionando outros) para dar o botão a aparência correta.

Aqui você vai, toda a sua lógica do tema em um só lugar. Depois de ter a configuração do seu tema, é fácil alternar entre diferentes conceitos ou fazer pequenas alterações em todo o aplicativo.

De volta ao começo

Se eu voltar para onde começamos, vimos dois exemplos de duas telas muito comuns: a tela de login e a tela de formulário.

Agora, vamos dar uma olhada em alguns códigos e ver como os implementamos usando tudo o que aprendemos até agora.

Formulário ScreenLogin ScreenTheme Setup

Temos aqui a implementação de ambas as telas e a configuração do nosso tema.

Agora, se nós gostaríamos de tentar um take diferente, talvez um visual monocromático.

Tudo o que precisamos fazer é mudar a configuração do nosso tema.

Voilà, tudo o que fizemos aqui está mudando alguns adereços e presets e temos um visual totalmente diferente.

Então, o que você acha? tem uma ótima idéia para um aplicativo, mas nenhuma pista sobre como torná-lo bonito? experimente o uilib e veja como é fácil!

Tem algumas ideias para temas legais e bonitos? vá em frente e compartilhe conosco.