18 plugins do Figma para melhorar o design do seu produto

O Figma é um aplicativo de interface e design baseado em navegador que pode ajudar você a criar designs e protótipos e que pode ser usado para gerar código para o seu aplicativo. É provavelmente a maior ferramenta de design de interface no mercado no momento e possui recursos que dão suporte às equipes ao longo de cada passo do processo de criação.

Ao comparar com Adobe XD ou Sketch, o Figma possui muitas vantagens. Por exemplo, ele funciona online e permite que você colabore com outras pessoas em tempo real.

Ele também possui funcionalidades excelentes, uma UI elegante e ainda tivemos o lançamento relativamente recente dos plugins do Figma.

Atualmente, há inúmeros plugins para funções e processos no Figma, os quais podem automatizar a criação e o lançamento do projeto. Neste artigo, veremos os 18 plugins que consideramos que você precisa usar hoje mesmo.

Os melhores plugins do Figma

Novos plugins são criados quase todos os dias, e muitos são de nicho ou direcionados para grupos de usuários selecionados. Navegue por toda a comunidade e confira os plugins disponíveis usando os links fornecidos no fim do post ou veja alguns dos plugins mais populares da lista abaixo.

New plugins are created almost daily, and many are niche and targeted at select user groups. Browse the entire community and check the available plugins using links further down this post or jump right to some of the most popular plugins from the list below.

Unsplash:

Unsplash é um banco de fotos que criou um plugin para o Figma. Ele permite que você escolha imagens belas e gratuitas enviadas pela comunidade.

Palette:

Esse plugin fornece cores da paleta que complementam o design do seu app. Ele conta com uma IA que gera esquemas de cores personalizados e ajusta o visual do seu tema, de acordo com as suas preferências.

Content Reel:

Esse plugin ajuda a inserir conteúdo (texto, ícones, avatares) no seu design. Você pode até usá-lo para adicionar dados aleatórios no seu design para não precisar adicionar textos fictícios.

Color Contrast Checker:

Esta é uma ferramenta rápida e fácil para analisar todas as camadas do seu app de uma só vez e identificar imediatamente qualquer uma que não atenda às Diretrizes de Acessibilidade para Conteúdo Web (WCAG). O plugin permite que você clique em uma amostra de cor para verificar a camada e ajustar a claridade dos textos inseridos ou do plano de fundo de acordo com a WCAG.

Iconify:

Esse plugin fornece aproximadamente 40.000 ícones para você escolher. Designers de ícones podem se tornar obsoletos em breve por conta desse plugin!

This plugin provides roughly 40,000 icons from which to choose. Third-party icon designers may soon find themselves obsolete because of this plugin!

Figmotion:

Em geral, não é possível criar animações in-app no Figma, mas o Figmotion permite que você supere essa limitação sem precisar usar outro app.

Mockuuups Studio:

Esse plugin oferece mais de 500 cenas para você escolher e adicionar ao seu design com apenas alguns cliques. Ele pode ser usado para redes sociais, blogs, campanhas de marketing, mockups e muito mais.

Coda for Figma:

Esse plugin permite que você preencha layouts com dados de serviços externos, como Wikipédia, Gmail, Dropbox, Jira, Github e muito mais.

LilGrid:

Esse plugin prático ajudará você a limpar a interface do seu app. Ele pega todos os diversos elementos no seu painel de controle ou app e os organiza em uma tabela que você mesmo pode definir. É ótimo para organizar muitos botões e/ou ícones que o seu design ou sistema usam.

Table Paste:

Como o nome sugere, esse plugin pode ajudar você a exportar dados de uma planilha do Excel para tabelas estilizadas criadas no Figma.

Por exemplo, você pode criar uma linha no Figma com um campo de texto para cada célula individual e então criar um componente a partir dele. Em seguida, você pode criar uma tabela a partir dessas linhas e escolher aqueles em que você gostaria de aplicar seus dados. Para isso, basta abrir o Excel, selecionar os dados e copiá-los na sua tabela no Figma; em seguida, a tabela do Excel será estilizada para o Figma!

Movie Posters:

Excelente para qualquer pessoa que queira criar aplicativos ou sites para filmes e séries de TV. Ele preenche aleatoriamente objetos vetoriais com imagens ou posters de filmes ou séries de TV.

GiffyCanvas:

Esse plugin permite que você crie imagens GIF com o Figma. Instale o plugin, selecione as imagens com as quais você deseja criar seu GIF, defina os parâmetros relevantes, como intervalo, largura e altura, e baixe o arquivo GIF pronto.

BeatFlyer Lite:

Essa ferramenta incrível permite que você anime e adicione efeitos aos seus designs com apenas alguns cliques.

Color Kit:

Esse plugin muito prático ajuda você a criar tons de cores de acordo com as suas necessidades. Ele é ainda mais útil se você quiser que o seu app tenha um esquema de cores testado e aprovado em vez de algo que pareça bom, mas não atende às normas de design estabelecidas.

Wire Box:

Use esse plugin para criar mockups de UI. Ele também pode ser usado para converter mockups em HD para wireframes de baixa fidelidade sempre que você quiser se concentrar na experiência do usuário do seu projeto.

Vector Maps:

Esse plugin permite que você adicione mapas vetoriais de países, regiões e cidades ao seu mockup no Figma.

LottieFiles:

Esse plugin dará vida aos seus designs adicionando animações incríveis e belíssimas. Você pode adicionar milhares de animações Lottie gratuitas (em formato GIF ou SVG).

Design Lint:

Use esse plugin para garantir que os seus arquivos de design são consistentes. Esse plugin verifica discrepâncias dentro dos seus mockups – até mesmo os menores problemas, como cores ou fontes que não combinam, efeitos diferentes, além de preenchimentos, traços ou bordas arredondadas que não combinam – e corrige essas discrepâncias.

Baixando plugins do Figma

Está em busca de um plugin do Figma para o seu projeto?

Encontre todos os plugins aqui e explore os projetos e ferramentas aqui. Há plugins para praticamente qualquer necessidade, variando de ícones e processos usados em sistemas de design, wireframes e ilustrações a ícones, tipografia, design móvel, web design, kits de UI e muito mais.

Como eu instalo os plugins do Figma?

Para instalar um plugin do Figma, primeiro você precisa encontrar o plugin desejado.

Você pode usar os links acima ou, usando sua conta no Figma, pode acessar a página da Community. A partir daí, você pode explorar recursos populares da comunidade ou acessar a aba Feed para visualizar os recursos publicados pelos criadores que você segue. Você também pode navegar pelos plugins de destaque ou ordená-los por nome, desenvolvedor ou palavras-chave.

Cada plugin tem sua própria página de recursos. Você pode ver todos os detalhes sobre os plugins que lhe interessam usando a página de recursos do plugins. Depois disso, você pode simplesmente clicar em Instalar para adicionar o plugin à sua conta no Figma. Isso vincula o plugin à sua conta no Figma; você poderá ver o plugin em arquivos nos seus rascunhos e também poderá usá-lo em qualquer navegador ou dispositivo que preferir.

Vantagens de usar plugins

Os plugins possuem uma forma simples, porém poderosa, de melhorar as funcionalidades do Figma.

Eles podem ajudar a simplificar e automatizar tarefas repetitivas, criar rapidamente novos recursos e camadas de grupos, construir pesquisas e agrupamentos avançados, adicionar funções especiais, adicionar conteúdo aos mockups do projeto e muito mais. Novos plugins são adicionados o tempo todo, sendo desenvolvidos pela ativa comunidade do Figma. Com funcionalidades multiplataforma, gestão de transferência de design entre as equipes e obtenção de feedback e automação para os seus sistemas, o Figma é uma solução multifuncional que pode melhorar a eficiência e o desempenho das suas equipes de design.

Vamos analisar alguns dos seus recursos e benefícios.

É multiplataforma

O Figma funciona em qualquer navegador ou sistema operacional. Você pode ter um Mac, um PC com Windows ou Linux ou até mesmo um Chromebook; seja como for, você pode usar o Figma onde quiser.

Talvez seja a única ferramenta de design desse tipo que pode fazer tudo isso, e se você trabalha em equipe ou em um escritório que usa computadores e sistemas operacionais diferentes, todo mundo pode usar o SO de preferência para compartilhar, abrir e editar seus arquivos do Figma.

Colaboração rápida e fácil

Por ser baseado em navegador, o Figma permite que as equipes colaborem da mesma forma que fariam com documentos do Google Drive.

Qualquer pessoa que estiver visualizando ou editando um arquivo aparecerá no topo do app, e cada pessoa possui um cursor com seu próprio nome. Monitorar o que as pessoas estão fazendo é fácil, e basta clicar no avatar de uma pessoa específica para ver o que ela está fazendo ou visualizando.

Com a colaboração, você pode ter a visão dos seus companheiros de equipe para evitar que ocorra o chamado “design drifting”, que é quando os designers desviam ou entendem mal os temas e princípios do design em questão. Isso pode ocorrer a qualquer momento entre a concepção e a implementação do projeto. A interpretação equivocada do design ou erros humanos simples podem gerar retrabalho – o que pode custar caro – e atrito entre os membros da equipe.

Os líderes de design podem usar o Figma para conferir o que cada designer está fazendo. Se o líder da equipe de design notar que alguém entendeu mal uma história do usuário, por exemplo, ele ou ela pode intervir, corrigir a trajetória do design e economizar muitas horas de trabalho que seriam perdidas.

É verdade que os seus designers podem não gostar dessa microgestão, mas o líder pode explicar os benefícios do recurso para fazer o onboarding da equipe e obter a aprovação de todos.

Slack e comunicação em equipe

O Figma usa o Slack.

Os canais do Figma no Slack contam com comentários e edições de design no canal apropriado da equipe. Os membros da equipe podem ver rapidamente as atualizações e tratar dos problemas sempre que virem que uma issue foi atualizada no canal ou grupo relevante no Slack.

Compartilhamento fácil e flexível

O Figma permite o compartilhamento de arquivos, páginas e frames com base em um sistema de permissões.

Frames são os que os outros apps chamam de “artboards”. Sempre que um link de compartilhamento para um frame em uma página for criado, clicar no link abrirá uma versão de navegador do Figma com foco no frame em questão. Esse recurso funciona para qualquer pessoa com as permissões relevantes e faz com que o compartilhamento de projetos, arquivos, páginas e frames seja fácil e flexível. Esse tipo de compartilhamento – do arquivo para o nível do frame – pode ajudar os designers, product owners e desenvolvedores a compartilhar o que precisam compartilhar, e isso traz o poder do rastreamento de bugs de plataformas como Confluence e SharePoint para o mundo do design.

Atualização em tempo real

O Figma pode compartilhar os snippets de código incorporados para serem colados em ferramentas externas.

Você não precisa atualizar um arquivo salvo se o arquivo fonte for alterado, já que o arquivo incorporado é o próprio arquivo Figma. As alterações no arquivo do mockup serão renderizadas em tempo real na página ou no arquivo de destino.

Melhorando o UX design

Com o Figma, você não precisa mais de aplicativos dedicados para prototipar, comentar ou colaborar.

With Figma, you no longer need dedicated apps applications for prototyping, commenting, or collaborating.

No passado, os designers e estúdios de design tinham que usar múltiplas ferramentas para compartilhar os mockups de design e outras atualizações. Isso envolvia muito vaivém entre as diferentes partes – líderes da equipe, operadores de negócios e clientes – e os designers. No entanto, agora as ferramentas externas não são mais necessárias. O Figma lida com as funcionalidades que eram fornecidas por ferramentas externas, e agora não é preciso mais fazer a transferência de designs e mockups entre as diferentes pessoas envolvidas em um mesmo projeto.

Obtendo avaliações e feedback

O Figma suporta comentários in-app – tanto para design quanto para protótipos.

Os comentários podem ser vistos e rastreados no Slack ou por e-mail. Suas equipes podem compartilhar comentários e feedback durante o processo de avaliação, e as equipes podem discutir seu trabalho, fazer brainstorms e resolver problemas – tudo sem sair do Figma.

Transferência

O Figma é capaz de exibir o código dos frames ou objetivos selecionados em formatos comuns.

Suas equipes podem avaliar os protótipos e transferir o código usando arquivos aos quais as partes envolvidas têm acesso. Você não precisa usar ferramentas externas para esse processo.

Controle de versão automático ou sob demanda

O Figma possui um sistema de controle de versão integrado que resolve as incertezas envolvendo atualizações e controle de versão do arquivo.

Prototipagem simples e intuitiva

O Figma melhora a prototipagem ao fornecer transições entre os frames.

Figma improves prototyping by providingprovides transitions between frames.

Esse recurso elimina a necessidade de outra ferramenta que forneça a funcionalidade de prototipagem de apresentações – pense em InVision ou Marvel. Se você precisa de uma apresentação com transições, não é preciso exportar os seus arquivos para outro aplicativo.

O Figma melhora o trabalho em equipe

Com o Figma, você verá rapidamente os benefícios da colaboração em tempo real com e entre as suas equipes.

Ele pode ajudar a manter as equipes na tarefa e estimulará a divulgação de todo o trabalho, ajudando você a construir um sistema de design para diversos setores diferentes.

Velocidade

Ferramentas de design só funcionam bem se forem rápidas o bastante para dar suporte ao seu trabalho.

Atrasos nos lugares errados e nos momentos errados podem ser prejudiciais à saúde do seu projeto ou negócio. O Figma foi feito para ser uma extensão perfeita da criatividade dos designers. Para alcançar esse objetivo, foi preciso remover o atrito das fases de idealização, concepção, design, prototipagem e produção. As ferramentas de colaboração e a conversão do design em um software funcional também foram necessárias.

O Figma foi criado com foco em velocidade e desempenho. Os desenvolvedores do Figma reestruturaram seu renderizador de documentos e corrigiram os bugs do WebAssembly, o que deixou o aplicativo significativamente mais rápido. Eles trabalharam nessas otimizações por meses, melhorando muito o desempenho de tarefas mais pesadas, como dar zoom, arrastar ou carregar arquivos densos – com ganhos de até 300%!

Figma was designed with speed and performance in mind, so Figma’s developers restructured their document renderer and ironed out WebAssembly bugs to make Figma substantially faster. They worked on these optimizations for months and there is not a massive improvement in zooming, dragging, and file loading in dense files – gains of up to 300%!

Desenvolvimento de plugins para o Figma

Você gostaria de criar os seus próprios plugins para o Figma?

Você pode cadastrar e publicar plugins usando o app desktop do Figma. Ele só está disponível para macOS e Windows. Todos os plugins do Figma interagem com o Figma por meio de uma API dedicada. Essa API foi desenvolvida usando um conjunto de parâmetros fixos e controlados para garantir que os novos plugins criados pela comunidade não terão problemas quando novos recursos e atualizações forem lançados para o Figma. A API concede acesso de leitura e escrita para os arquivos relevantes, e você também pode usar APIs externas – como a API do Google Maps, entre outras – para criar plugins que podem visualizar, modificar e criar outros objetos ou camadas.

Para começar, primeiro cadastre o seu plugin com o Figma. Siga os passos neste link e comece com apenas alguns cliques.

Em seguida, você precisa construir e testar o seu plugin seguindo as instruções no site para Desenvolvedores de Plugins do Figma. Os passos são bem simples e definem claramente cada passo que você precisa tomar para publicar o seu próprio plugin.

Em seguida, você precisa publicar o seu plugin para a comunidade do Figma.

Apenas um desenvolvedor pode estar envolvido na publicação, então você precisa de um perfil na Figma Community para ser reconhecido como desenvolvedor. Você também precisa preparar as informações do plugin, como nome, tags e palavras-chave relevantes, além de um ícone que será usado para representar o seu plugin para a Comunidade e a arte da capa com as dimensões corretas (1920 x 960 ou pelo menos 1600 x 960). Escreva uma descrição do seu plugin e adicione até 12 palavras-chave ou tags para classificar o arquivo do seu plugin. Você também precisa fornecer suporte para os seus plugins e fornecer um endereço de e-mail de suporte, um site ou um link para uma central de ajuda.

Após fazer tudo isso, chegou a hora de enviar o seu plugin para análise. Atualmente, você só pode enviar plugins usando o app desktop do Figma.

Ao longo do processo, você pode adicionar outros colaboradores ao plugin, mas eles também devem ter perfis na Figma Community.

Quando o plugin entrar no processo de análise, ele terá um emblema que diz “In Review”. Você receberá uma decisão quanto à publicação dentro de 10 dias úteis. Após ser aprovado, você poderá compartilhar o seu plugin por meio da Figma Community, que é onde os usuários do Figma poderão encontrar e instalar o seu plugin!

Conclusão

Os processos de design e prototipagem são partes importantes do sucesso de qualquer negócio. Para implementar ideias boas e atender à demanda do mercado, é preciso ter as ferramentas certas para o trabalho. Não adianta muito ter um espírito criativo e ideias incríveis se você não consegue implementá-las ou dar suporte para obter a tração que você precisa para ter sucesso.

Foi assim que o Figma redefiniu o jogo.

Se você está buscando ícones, uma forma melhor de gerenciar as operações de design, uma colaboração melhor, ferramentas de alto desempenho, templates prontos, designs responsivos e elegantes ou quer ter acesso a ferramentas de desenvolvimento e a uma rica comunidade de desenvolvedores e aplicativos, o Figma é o caminho certo. Espero que esses plugins ajudem você a melhorar ainda mais a sua experiência com o Figma.