Vamos ser criativos usando o Figma. Neste tutorial, vamos nos concentrar nos elementos de estilo necessários para começar a construir um sistema de design funcional.
Como criar um sistema de design no Figma
Vamos começar! Neste tutorial fácil de seguir, aprenderemos como criar a estrutura básica e os elementos de estilo para um sistema de design no Figma.
1. Defina a estrutura do seu sistema de design
Um sistema de design pode ser tão simples ou complexo quanto sua marca precisa. Pode incluir um conjunto de elementos de estilo, documentação, tom de voz e práticas recomendadas.
A estrutura básica de um sistema de design inclui (mas não está limitada a) elementos de estilo, como:
- cores
- Grade e espaçamento
- Tipografia
- Formas e padrões
- Botões
- cartões
- Ícones
- Tag
- Formulários
- Gráficos e barras de progresso
Também pode apresentar elementos técnicos e de comunicação, como:
- Documentação de ajuda
- Filosofia da marca
- Tom de voz
- Vocabulário
- Melhores Práticas
- Diretrizes visuais
Lembre-se, um sistema de design é como uma biblioteca ao vivo que é desenvolvida ao longo do tempo.
Para este tutorial, cobriremos os três elementos de estilo destacados em negrito na lista acima. Não se preocupe se você não abordar todos os elementos no início, você pode atualizá-los e incluí-los à medida que sua marca evolui.
2. Defina as cores
A cor pode ser a principal linguagem visual da sua marca. Dada a sua enorme relevância, definir as cores é um bom ponto de partida.
Etapa 1: divida suas cores em categorias
Crie um novo arquivo no Figma. Adicione um quadro ao espaço de trabalho, o meu começou em 1920 x 1080 px. O comprimento aumentará à medida que adiciono novos elementos ao meu sistema de design.
Seguindo as diretrizes compartilhadas por Adi Purdila em sua Introdução aos Sistemas de Design, dividiremos as cores em três categorias principais:
- Esquema: bordas, cabeçalhos, rodapés, etc.
- IU: texto, botões e formulários
- Semântica: sucesso, erro, informação
Inclua essas três categorias em seu quadro e adicione sua cor primária. Neste caso, o AZUL será minha cor principal do Layout.
Vou repetir a forma dez vezes e reduzir a opacidade em 10% para ter uma faixa de contraste. Isso fornecerá um guia visual de como cada tom de uma cor específica se parece.
Etapa 2: nomeie suas cores
Certifique-se de adicionar nomes específicos para cada cor para que sejam fáceis de identificar. Neste caso, cada tonalidade da cor do meu Layout será nomeada como “AZUL” + a porcentagem de opacidade que apresenta.
Etapa 3: experimente suas cores
A amostragem facilita a atribuição de uma cor a cada tonalidade em todo o seu sistema de design e até mesmo no design da web real.
Selecione sua cor, clique no sinal de mais no menu do lado direito.
Repita o mesmo com todas as suas cores e você terá sua própria biblioteca de cores do projeto.
Etapa 4: seção de layout duplicada para interface do usuário e cores semânticas
Vamos definir UI e cores semânticas. Para fazer isso, podemos usar o que fizemos para o nosso Disposição cores como base. Apenas duplique a seção e substitua os valores HEX para representar IU e Semântica cores para elementos visuais como:
- Texto
- links
- Botões
- Estados (ativo/inativo)
- Sucesso
- Aviso
- Erro
Depois de fazer isso, seu Frame deve ficar mais ou menos assim:
3. Definir grade e espaçamento
Para esta etapa, usarei a grade e o espaçamento fornecidos com o ga-analytics#sendElementsClickEvent”>Sistema de design de interface do usuário. Essa grade de 8 pontos é baseada em múltiplos de 8.
4. Defina tipografia
Procure a combinação perfeita de fontes que transmitirão a mensagem da sua marca. Mantenha sua marca coesa e limpa trabalhando com no máximo três fontes: uma para manchetesum para corpo do texto e outro para botões.
Etapa 1: escolha suas fontes
Estarei trabalhando com duas opções do Google Fonts: Poppins para Headlines e Inter para corpo de texto e botões.
Etapa 2: definir o tamanho e a escala da fonte
Você deve considerar o seguinte:
- Título 1: títulos principais
- Título 2: legendas
- Título 3: destaques
- Título 4: botões
- link regular
- Parágrafo ou corpo do texto
- Legendas
5. Comece a planejar atualizações futuras para seu sistema de design
Agora temos a estrutura básica e os elementos de estilo do seu sistema de design.
Esse é um bom lugar para começar. Mas você pode querer voltar periodicamente para adicionar novos estilos e elementos técnicos.
Considere trabalhar em ícones, cartões e botões específicos para sua marca como próximo passo. Pense também nas animações e nos comportamentos dos botões.
Procure exemplos do sistema de design Figma para aplicar novos estilos aos seus. Continue fazendo melhorias em seu sistema de design para que todas as suas atualizações de design pareçam coesas e consistentes!
Obtenha mais recursos e inspiração da Figma
Uma das melhores partes de trabalhar com o Figma é como é fácil de usar e entender. Descubra novas habilidades e truques para criar um melhor design de UI/UX com Figma. Confira alguns dos tutoriais e recursos apresentados na lista abaixo:
Você já é um web designer melhor!
Espero que você tenha gostado deste tutorial rápido do Figma e use esses novos truques em seu próximo projeto de design. Quanto mais exemplos de sistemas de design Figma você observar, melhores serão seus próprios sistemas de design.
Encontre toda a inspiração e recursos criativos de que você precisa em ga-analytics#sendElementsClickEvent”>Envato Elements.
