Não limite suas opções de design a fontes predefinidas! Aprenda como adicionar fontes ao Figma para criar designs exclusivos.
Escolher a fonte certa para o nosso design pode ser uma virada de jogo. Uma boa tipografia não só torna a sua mensagem legível, mas também pode definir a personalidade da sua marca.
Como diz Adi Purdilla: “Se a sua tipografia parece ruim, isso se traduzirá em tudo”. Se você está começando, recomendo que siga nosso guia para iniciantes em web design.
Dito isso, você não precisa limitar suas opções às fontes predefinidas disponíveis no Figma. Vá além com sua criatividade adicionando fontes exclusivas ao seu design.
Neste tutorial vou mostrar em três passos simples como adicionar fontes ao Figma.
Obtenha um guia de início rápido do Figma
Neste tutorial em vídeo do Figma, você aprenderá tudo o que precisa para começar a usar o Figma. Em apenas 47 minutos, Adi Purdila irá guiá-lo através deste tutorial rápido e fácil de seguir:
Você também pode conferir todos os tutoriais em vídeo relacionados ao Figma no canal Envato Tuts+ no YouTube.
Como adicionar fontes ao Figma em 3 etapas
Quer saber como adicionar uma fonte ao Figma? Na verdade, é mais fácil do que você pensa. Siga estas três etapas e seja criativo com seu design:
1. Escolha sua fonte e instale-a
Primeiras coisas primeiro. Antes de aprender como adicionar fontes ao Figma, você deve localizar a fonte com a qual gostaria de trabalhar.
Você pode baixá-lo gratuitamente em sites como o Google Fonts. Ou você pode optar por algo único na biblioteca de fontes ga-analytics#sendElementsClickEvent”>do Envato Elements.
Nesse caso, trabalharei com ga-analytics#sendElementsClickEvent”>Monigue – Condensed Sans Font.
Trabalhar com uma fonte exclusiva pode adicionar um toque de personalidade ao seu web design. Não importa se você está projetando do zero ou trabalhando com um modelo Figma. A tipografia é um dos principais elementos de design a considerar.
Não tem certeza de qual fonte escolher? Inspire-se nesta tendência:
Depois de escolher sua fonte, instale-a em seu computador.
Quer saber como adicionar Adobe Fonts ao Figma? Siga os mesmos passos para descobrir.
2. Baixe o instalador da fonte Figma
Agora, para aprender como adicionar fontes ao Figma, precisamos baixar um instalador de fontes.
Vá para Figma Downloads e selecione o sistema operacional com o qual você trabalha.
Isso se você estiver trabalhando no aplicativo web Figma. O aplicativo de desktop não requer o instalador de fontes.
Depois que o Figma Agent estiver instalado, você poderá usar suas fontes locais no aplicativo da web.
3. Atualize e comece a usar sua fonte!
É hora de ver a mágica acontecer. É assim que se adiciona uma fonte ao Figma.
Para este tutorial, estou trabalhando com o modelo ga-analytics#sendElementsClickEvent”>Hero Header Design Figma da Envato Elements.
Agora que baixei minha fonte e instalei o Agente Figma, irei para meu modelo Figma em meu navegador. Vou recarregar o arquivo para começar a usar minha fonte.
Em seguida, selecionarei o texto que gostaria de alterar para minha nova fonte.
eu vou para Texto no menu da coluna do lado direito e clique no nome da fonte.
A partir daqui, posso pesquisar minha fonte recém-instalada na barra de pesquisa de texto e voilà! Agora você sabe como adicionar fontes ao Figma.
É assim que fica o design com a fonte Monigue que escolhi no Elements.
Comece seu projeto de design com um modelo Figma
Agora que você sabe como adicionar fontes ao Figma, você pode querer experimentar diferentes designs de web.
A boa notícia é que você não precisa criá-los do zero. Acesse Envato Elements e encontre o melhor template Figma para o seu projeto de design.
Você também pode atualizar seu design com ga-analytics#sendElementsClickEvent”>fontes, ga-analytics#sendElementsClickEvent”>imagens e ga-analytics#sendElementsClickEvent”>gráficos. Encontre todos eles no Envato Elements.
Mais recursos e tutoriais do Figma
Aprender como adicionar fontes ao Figma é apenas o começo. Dê um passo à frente no jogo de web design.
Aprenda novos truques e tendências com estes artigos e tutoriais:
