❎ 🎹 🌨️ Revisão de 14 plugins novos para o Figma que ajudarão a aumentar a produtividade enquanto todos nós 🤓 🎲 🕵🏾

Hoje falaremos sobre os seguintes novos plugins do Figma:

AutoGrid - Suporte de grade para AutoLayout.
Rastreamento - Plug-in para criar anotações de rastreamento.
Localizar e substituir cores - organize estilos de cores em seus designs
Spacing Manager - Plugin para recuo consistente nos componentes
Geometric –
Halftones – ,
Batch Styler –
Spell Inspector —
Sitemap –
Style Organizer —
Focus CSS — CSS Figma
Flipbook – Figma
SwiftUI Inspector – Apple
Filter –

Olá a todos! Esperamos que, durante este período de crise, você esteja bem.

A proliferação do COVID-19 teve um impacto em todo o mundo, e muitos de nós agora mudaram completamente para o trabalho remoto. Era difícil para muitos estar em casa com as crianças e permanecer produtivo, mas todos devemos permanecer profissionais e apoiar nossa comunidade.

É bom ver como as pessoas se reúnem, colaboram e se ajudam nesses tempos sem precedentes. Também não nos afastamos, porque a idéia principal de Figma é a cooperação. Considerando que a primeira questãofoi recebido de maneira muito positiva pela comunidade Figma. Temos o prazer de continuar o trabalho útil, economizar seu tempo aprendendo novos plugins e fornecer plugins selecionados para o Figma que ajudarão você no trabalho e preservarão sua produtividade e criatividade.

Amigos, antes de começarmos a falar sobre plugins, gostaríamos de dizer que o mais importante para nós agora é permanecer positivo, porque não há dúvida de que a pandemia terminará em breve e tudo voltará ao normal. Para todas as pessoas do mundo, essa é uma experiência nova, como para nós - designers, e isso se reflete em nosso trabalho.

Apesar da difícil situação econômica, não perdemos a esperança de que o setor de design seja menos afetado pela crise, embora alguns designers já estejam reclamando de uma queda na atividade comercial. No entanto, muitas empresas hoje trabalham remotamente e acreditamos que este é um bom momento para a Figma e outras ferramentas aumentarem a produtividade, aumentarem sua importância para projetos e demanda do mercado.

Bem, agora vamos mergulhar na análise de plugins! Começamos do último lugar - o mais interessante está esperando por você abaixo.

14. Sitemap

Se você precisar fazer um mapa do seu site - este plugin o ajudará nessa tarefa.
A funcionalidade do plug-in Sitemap é bastante simples: insira ou cole o URL do seu site, clique em "Criar mapa". O plug-in exibirá todos os links encontrados na fonte HTML.

13. Meios-tons

Com a ajuda de meios-tons, você pode aplicar filtros legais de pontos e meios-tons às suas imagens.

Basta selecionar 1 ou mais imagens, selecionar o tipo de filtro que você deseja aplicar (efeito de pontos ou meio-tom). Em seguida, usando os controles deslizantes, determine o ângulo e o tamanho da imagem, clique em "Aplicar" e pronto - sua imagem ficou mais moderna.

12. Flipbook

Dilua a nossa classificação com uma pequena porção de diversão através do plugin Flipbook! Este é um plugin para animar seu design no Figma. Possui muitos recursos, incluindo visualização em tempo real, alteração de velocidade, ajuste de velocidade da animação usando o controle deslizante, além de animação reversa e exportação para GIF.

Há também uma versão Pro deste plugin. Ele não possui marca d'água e também possui uma função de casca de cebola (casca de cebola, ou seja, a função de exibir a tampa do quadro para verificar sua animação).

11. Inspetor Ortográfico

Você já precisou de uma ferramenta que encontrasse erros de ortografia dentro da Figura? Bem, o plug-in Spell Inspector o ajudará com isso.

O Spell Inspector usa a API SpellCheck especial. No momento, o dicionário consiste em 40.000 palavras. O Inspetor ortográfico verifica a página na qual você deseja encontrar erros de ortografia e fornece uma lista de frases relevantes. Esperamos que, no futuro, os criadores deste plugin adicionem mais idiomas e expandam o dicionário.

Inscreva-se no meu canal Telegram "Útil para o designer", haverá anúncios das seguintes partes e muitos outros recursos úteis de design. Sempre acompanho e acompanho o lançamento de novos recursos, ferramentas e aplicativos úteis que ajudam designers, desenvolvedores e gerentes de equipe a acelerar.

10. Foco CSS

Este plugin melhorará o processo de trabalhar com CSS no Figma e detectará estilos inconsistentes.

Recursos do plug-in:

Geração de CSS para todos os elementos no documento Figma;
A capacidade de ocultar as propriedades CSS que você não deseja copiar para o código.
Há também uma função de filtragem que ajuda a exibir apenas os tipos de camadas CSS necessárias.

9. Rastreamento

Com este plug-in, você pode criar, atualizar ou anexar anotações de rastreamento diretamente do arquivo Figma.

Por meio do Rastreamento, você pode explicar aos desenvolvedores o que exatamente você deseja rastrear e também acompanhar os itens necessários a partir de uma visão geral. Além disso, o plug-in possui uma função "status", para que você saiba se o rastreamento foi realizado ou não.

Para entender melhor como usar o plugin, você pode ver o manual aqui .

8. Filtro

Apesar do fato de este plugin ter sido lançado no mês passado, ele é constantemente atualizado e o autor adiciona filtros cada vez mais interessantes. Por isso decidimos adicionar este maravilhoso plugin à nossa lista.

Com o Filter, você pode aumentar sua criatividade e acelerar seu fluxo de trabalho. Com esse plug-in no seu arsenal Figma, você não precisa mais sair do Figma para usar o Photoshop, porque o Filter oferece excelente controle sobre as configurações de imagens ou nós.

No momento, você tem mais de 30 filtros à sua disposição, incluindo: pitada de bojo, meio-tom colorido, desenho animado, desfoque de triângulo, Denoise, desfoque de lente, visão noturna, crosshatch e muitos outros filtros.

7. SwiftUI Inspector

Trabalhando com Swift e procurando uma ferramenta para ajudá-lo a transferir estilos de elementos do Figma para o Xcode? Você pode interromper sua pesquisa, porque o SwiftUI Inspector resolverá esse problema. Com este plugin legal, você pode exportar os estilos dos seus elementos de design para o código SwiftUI.

Os recursos suportados incluem: cores, rótulos de texto, formas básicas. O autor do plugin promete adicionar suporte a elementos como componentes, vetores e sombras em um futuro próximo.

6. Geométrico

Adicione um pouco de beleza matemática aos seus projetos com este ótimo plugin. Graças ao Geometric, criar formas complexas agora é mais fácil do que nunca. À sua disposição estão figuras como Rosa, Polígonos, Espirais de vários tipos, Superellips, Astroid, Funções trigonométricas. Você pode alterá-los usando vários parâmetros. E, de acordo com o criador do plugin, em um futuro próximo, haverá figuras matemáticas ainda mais interessantes.

5. Gerenciador de espaçamento

Muitos designers se depararam com a prática de aplicar recuos diferentes entre elementos. Alguns elementos foram recuados 10px, outros - 14px, etc. Mais tarde, se você precisasse fazer alterações de recuo, eles precisariam alterar cada elemento manualmente. O AutoLayout resolveu esse problema. No entanto, com o plug-in Spacing Manager, você pode melhorar ainda mais seu processo de indentação.

4. Encontre e substitua cores

Você já teve situações ao importar um design desorganizado do Sketch? Ou seu colega envia um modelo do Figma sem estilos de cores? Com este plugin, você pode encontrar facilmente todas as cores no arquivo e substituí-las pelas que você precisa.

O plugin está disponível para trabalhar com qualquer tipo de arquivo, seja componentes, instâncias, retângulos, molduras, objetos de vetor ou textos.

O plugin é fácil de usar: instale e execute. Em seguida, clique no campo de entrada ao lado da cor correspondente e insira um novo valor de cor. Depois disso, você pode iniciar o processo de substituição de todas as correspondências clicando no botão "Substituir cores".

3. Modelador de lotes

O Batch Styler é uma ótima solução para situações em que existem muitos estilos de texto, e você precisa alterar as fontes desses estilos de texto rapidamente e sem ações desnecessárias.

Não importa quantos estilos de texto ou fontes você precise alterar, o Batch Styler cuidará de tudo e salvará todos os tipos de espessura de fonte e outros estilos.

2. Organizador de estilos

Este plug-in ajuda a exibir e organizar os estilos de cores na página. Além disso, tendo estilos organizados, essa ferramenta gera automaticamente uma paleta de cores.
O que é ignorado neste plugin: preenchimento / traçado de imagens, recuo invisível de camadas / nós invisíveis.

Lembre-se também de que o Style Organizer não suporta o recurso de atualização automática ao fazer alterações no design. Você precisará clicar no botão Atualizar depois de fazer as alterações.

1. AutoGrid

Talvez você esteja enfrentando uma situação em que precisa criar várias camadas de AutoLayout para garantir que os cartões em seu layout estejam em perfeitas condições?

Este plugin é uma ótima solução. O AutoGrid cuida de tudo relacionado à grade. Tudo o que você precisa fazer é definir as colunas, linhas e recuos, e o AutoGrid fará o resto.

O plugin é muito fácil de usar:

Selecione o elemento raiz para sua grade (por exemplo, uma carta)
Defina a estrutura da grade: quantas linhas, colunas e recuos.
Clique em Criar nova grade.

O AutoGrid criará um clone do seu elemento raiz para preencher a grade recém-criada.
O plug-in também possui uma função de atualização automática. Com esse recurso, você não precisará atualizar manualmente sua grade sempre que sua estrutura for alterada.

Escolhemos o AutoGrid , o Style Organizer e o Batch Styler como líderes na classificação de hoje, porque esses plugins são muito úteis e aceleram os processos de design, especialmente quando se trata de criar sistemas de design.

Esperamos que este conjunto de plugins tenha sido útil para você. Se você precisar de sistemas e modelos profissionais de design Figma, consulte Setproduct.com. Bem, da nossa parte, manteremos você atualizado sobre tudo o que há de novo. Fique conosco e # fique em casa!