Os plug-ins do Figma ajudam a aumentar sua produção de trabalho e garantem que você permaneça no Figma para concluir seu trabalho de design. Com a infinita biblioteca de plug-ins do Figma, não há quase nada que você não possa fazer com sua ferramenta de design favorita.
Com esses plug-ins Figma gratuitos mais úteis, estamos apenas arranhando a superfície do que está disponível.
Como baixar plug-ins Figma
Antes de entrarmos na lista de produtos, você deve saber como encontrar e baixar um plug-in Figma. Tu deves saber como usar Figma, mas se não tiver, veja como você pode encontrar facilmente a biblioteca de plug-ins. Alguns plug-ins podem funcionar melhor no aplicativo de desktop Figma do que na versão do navegador.
Vá para a página da Comunidade, que pode ser encontrada na página inicial ou em uma página de arquivo sob o nome da sua conta. A página da Comunidade lista mais do que apenas plugins, mas a partir de um arquivo Figma, selecionando o
Menu principal > Plugins mostrará os plug-ins usados recentemente e os plug-ins salvos e permitirá que você encontre novos plug-ins.Selecionando Encontrar novos plug-ins leva você para o Recursos guia onde você pode procurar por qualquer plugin. Depois de encontrar um plug-in que deseja baixar - na página da comunidade - selecione Experimente para baixar ou—na caixa de pesquisa de recursos—selecione Correr para baixar o plug-in.
Cada plug-in deve fornecer suas próprias instruções de uso, portanto, leia a sinopse quando solicitado.
O plug-in Mesh Gradient de Gautham fornece uma maneira rápida e fácil de adicionar gradientes personalizados aos seus designs Figma. Execute o plugin e crie um quadrado gradiente. Você mesmo pode personalizar as cores ou clicar Aleatória para gerar automaticamente um design de gradiente.
Este plug-in cria uma imagem a partir do seu gradiente, portanto, não pode ser editado após gerá-lo. No entanto, você pode editar gradientes antigos ou criar novos no plug-in.
O Webflow Labs fornece uma ótima maneira de transformar seu design Figma em HTML ou CSS pronto para Webflow e criação de sites. Você pode integrar as interações do Webflow em seus projetos Figma para uma integração perfeita com o Webflow Labs. Este plugin é ótimo se você for um usuário do Webflow Labs ou trabalhar com uma equipe de desenvolvimento web.
Ele inclui componentes responsivos, retém todos os seus estilos, fontes e imagens e até permite que você edite tags HTML diretamente no Figma. Você pode criar estilos de modelo mestre no Figma e use o Figma to Webflow para exportá-los para futuros projetos de sites.
O plug-in oficial do Figma do Unsplash significa que você pode inserir imagens diretamente em seus designs sem sair da janela do Figma. Todas as mesmas licenças do Unsplash estão disponíveis, mas com este plug-in você economizará tempo e cliques ao adicionar imagens ao seu trabalho.
Se você é um designer de imagens, pode achar difícil encontrar texto de espaço reservado para o espaço em seus designs. O plug-in de espaço reservado Lorem Ipsum faz tudo para você. Com o texto latino tradicional, basta entregar seu design ao seu redator para transformar o texto de espaço reservado em algo real, então tudo o que você precisa fazer é se concentrar no visual.
Se você tiver um deck de copywriting necessário para o seu design, o Text Porter ajuda a mover sua cópia do Excel para o Figma facilmente. Simplesmente execute o plug-in Text Porter e mova seu texto. Em seguida, edite o texto diretamente em seu arquivo Excel para atualizar seu design Figma no futuro. Isso é útil se o seu redator não tiver acesso ou conhecimento do Figma.
Para um fluxo de trabalho mais suave com o uso de plug-ins, você também pode use os atalhos do Figma para um fluxo de trabalho mais rápido.
A remoção de planos de fundo é uma prática comum ao usar imagens em muitos aspectos do design. Em vez de se escravizar no Photoshop, Canva ou outros programas de edição, usar o plug-in Icons8 Background Remover acelera o processo e mantém tudo no Figma.
A ferramenta de remoção de fundo pode ser aplicada a mais de uma imagem por vez, acelerando seu processo de trabalho com o clique de um botão.
O plug-in Image Tracer cria uma imagem vetorial a partir das imagens e camadas de imagem que você escolher para aplicá-la. Um vetor escalável é como pó de ouro para o trabalho de design digital, e esse plug-in facilita o trabalho de transformar qualquer imagem em um vetor.
O plug-in Html.to.design pode ajudá-lo a recriar designs de sites existentes em designs Figma. Isso serve a muitos propósitos, como ajudá-lo a praticar o design de sites ou recuperar sites antigos que você criou e aos quais perdeu o acesso.
Veja nosso tutorial detalhado para convertendo um site em um design Figma usando este plug-in.
O plug-in Vectorize funciona de maneira semelhante ao Image Tracer, mas é melhor se você tiver apenas uma imagem e uma cor para vetorizar. Converter imagens bitmap em vetores é fácil usando este plugin.
Seus novos vetores serão um caminho vetorial, fácil de editar e usar para todas as suas necessidades de design. Especialmente bom se o seu cliente enviar a você seu logotipo como uma imagem pixelizada copiada de um documento do Word. Você pode facilmente reviver logotipos e outros ícones de uma cor no Figma.
Projetando para uma proporção específica? Precisa escalar para cima ou para baixo? Use o plug-in Aspectos. Este plug-in permite alterar rapidamente o aspecto de várias camadas do seu design, especialmente imagens. Aspects é uma ferramenta útil para qualquer escalonamento rápido que você precisa fazer.
Se você está projetando para UX/UI, provavelmente está adicionando botões aos seus designs. O Button Buddy é um ótimo plug-in que oferece muitos designs de componentes de botão, economizando tempo no design, para que você possa se concentrar em ótimos designs de layout.
Para adicionar mais componentes do que botões, use o plug-in Handy Components. Este plugin oferece mais de 60 vários elementos de design UX/UI. O Handy Components também usa design inteligente para replicar os estilos presentes em seu design e aplicá-los diretamente aos componentes adicionados do plug-in. Você não precisa editar para combinar com seu estilo.
Os componentes disponíveis são botões, cartões de recursos, itens de lista, tabelas, barras de progresso, adesivos de aviso, calendários e muitos outros elementos úteis.
Precisa de um mapa em seu web design? Você pode incorporar facilmente um com o plug-in do Map Maker. O plug-in permite adicionar um mapa personalizado inserido em uma forma.
Basta selecionar a forma pretendida — retângulo, elipse ou polígono — e executar o Map Maker. Em seguida, digite o endereço que deseja compartilhar. É muito fácil adicionar um mapa ao seu web design.
Os ícones tornam os designs de UX/UI universais e acessíveis. O plug-in Iconify hospeda uma biblioteca de mais de 1.000.000 ícones para praticamente qualquer uso. Os ícones SVG de código aberto da Iconify podem ser usados em muitos softwares de desenvolvimento para levar seus designs Figma de protótipos a produtos ativos com facilidade.
Adicionar maquetes aos seus designs Figma ajuda você a incorporar a realidade em possíveis ideias de produtos. Quer você esteja adicionando maquetes ao seu Design de apresentação Figma ou incorporá-los em um site, eles são uma coisa útil de se ter.
Clay Mockups 3D é um dos muitos plug-ins de maquete excelentes. veja nosso guia sobre maquetes de smartphones Figma para ver o que mais está disponível. Você pode inserir maquetes para telefones, computadores e outros dispositivos, bem como mãos para segurá-los.
Este plug-in simples permite alinhar seus quadros, arrumar e manter sua arte organizada. Basta selecionar seus elementos, executar o plug-in e sua janela do Figma ficará super organizada.
Ele não apenas ordena uma prancheta bagunçada, mas também renumera os quadros se a ordem for alterada. Chega de procurar o quadro 5 depois de movê-lo, você o encontrará aninhado ao lado de 4 e 6.
Mantenha seu trabalho fluindo com plug-ins Figma
Com essas 16 ótimas ferramentas, você pode transformar facilmente seu fluxo de trabalho. Os plug-ins permitem que você faça mais sem sair da janela de design do Figma.
Esses plugins são os mais úteis que existem, e se você usar todos eles, você pode vetorizar imagens, adicionar imagens de Unsplash, adicione designs HTML ao Figma e vice-versa com o Webflow Labs, adicione mapas personalizados e redimensione seu projetos. Tudo com plug-ins.