0

2009-2021 Celula Nerd ®

Brazilian Nerd on planet earth

0
0
Design – 10 coisas que o Framer faz melhor que o Figma
>
>
Design – 10 coisas que o Framer faz melhor que o Figma

Design – 10 coisas que o Framer faz melhor que o Figma

Compartilhe esse conhecimento:

Serei o primeiro a dizer que o Figma é uma dádiva de Deus para os designers.

Isso tornou meu processo de design mais eficiente e me tornou um designer melhor.

Figma disparou para sua merecida posição de superioridade na comunidade de design, não por acaso. Ainda assim, nós, como designers, não podemos contar com uma ferramenta para fazer TUDO.

Mesmo que a Figma tenha aparentemente engolido Abstract, Invision, Zeplin, Sketch e qualquer outra coisa em seu caminho, Framer ainda pode ser um contendor.

Eu ainda uso figma para um ll do meu trabalho UI, gestão de sistemas de design, a colaboração da equipe e muito mais. Quando se trata de criar protótipos clicáveis para teste de usuário ou criação de animação sexy para Dribbble, porém, estou impressionado com o poder do Framer.

Por que a comunidade de design está dormindo no Framer ???

Vamos falar sobre todas as maneiras como podemos flexionar o Framer para melhorar nossos designs.

O que é Figma ?

Figma é um editor gráfico de vetor e prototipagem de projetos de design baseado principalmente no navegador web, com ferramentas offline adicionais para aplicações desktop para GNU/Linux, macOS e Windows. Wikipédia

O que é Framer?

Como UX Lord colocou em seu artigo Figma vs Framer – “ Framer é uma ferramenta de design de prototipagem, mas que pode usar código real para criar ou personalizar componentes. Embora a ferramenta de codificação possa assustar os designers, o Framer funciona perfeitamente e funciona muito bem como uma ferramenta de design independente, mesmo que você opte por não usar a codificação. ”

A maioria das ferramentas de design e prototipagem hoje são apenas sistemas para pintar suas idéias em uma tela. O Framer é a única ferramenta desenvolvida com base em tecnologias da web e oferece uma saída verdadeiramente interativa e realista em menos tempo.

1. Inputs fields / Campos de entrada

Documentação Framer –– Leia mais

Os campos de entrada desempenham um papel em praticamente todas as interfaces de uma forma ou de outra. Com os componentes interativos no Figma, você pode hackear algo que imita a digitação em um campo de entrada, mas vai demorar uma eternidade para criar e ainda não chega perto do campo de entrada padrão no Framer.

É tão fácil quanto clicar em inserir e, em seguida, arrastar e soltar um campo de entrada e estilizar como quiser. Seu projeto terá imediatamente a capacidade de entrada real do usuário, sem quaisquer dores de cabeça ou hackeamentos.

2. Sticky Scroll Elements / Elementos de rolagem pegajosa

Tutorial Framer –– Assistir no YouTube

Ocasionalmente, um determinado quadro deve ficar em uma posição durante a rolagem. Isso é especialmente útil para cabeçalhos de seção e navegação flutuante. No entanto, é realmente difícil de fazer no Figma, então temos que contar com exemplos e documentação de terceiros para explicar esse recurso aos nossos desenvolvedores.

Em Framer, os objetos em uma pilha rolável podem ser definidos como um objeto “aderente” e as regras podem ser definidas para ajustar o seu comportamento. Eu recomendo seguir o tutorial do Framer para entender como isso funciona.

3. Sliders / Controles deslizantes

Slider Tutorial Framer –– Leia mais

Recentemente, foi criado um tutorial sobre como criar um slider / controle deslizante de layout automático no Figma e recebeu um ótimo feedback, mas muitas pessoas perguntaram, “como faço para que funcione na prototipagem?”

Bem, você não pode fazer isso no Figma, mas o Framer tem um componente padrão que pode ser arrastado na prototipagem como na coisa real. Você também pode anexá-lo facilmente a um valor numérico com um pequeno trecho de código.

4. Swipe Effects / Efeitos de deslize

Os diferentes efeitos de deslize são muito divertidos e fáceis de usar. Isso me lembra o antigo criador de filmes do Windows – basta arrastar um efeito para uma tela e pronto!

Cover Flow

É frustrante quanto tempo gastei criando um protótipo capaz de deslizar com um efeito de fluxo de cobertura no Figma. Sim, pode ser feito, mas você precisará de uma nova tela para cada cartão e é uma dor enorme de gerenciar.

Framer torna essa experiência uma brisa. Você pode arrastar um quadro de “página” e, em seguida, apenas conectar os cartões que gostaria de passar e funciona instantaneamente, sem necessidade de animação automática.

Cube Effect / Efeito Cubo

Pile Effect / Efeito Pilha

Um efeito de pilha é complicado de conseguir no Figma, mas divertido de brincar para conseguir algo semelhante aos cartões de crédito empilhados, como na Carteira da Apple.

5. Map Integration / Mapas integração

A integração do mapa é uma das centenas de diferentes integrações que podem ser usadas no Framer. Vá para Pacotes de Framer e navegue por todas as diferentes maneiras de explodir a cabeça de sua equipe de design.

6. Perspective Hover / Perspectiva mouse hover

Este é outro pacote realmente interessante e fácil de implementar. Novamente, existem centenas desses pacotes, então vá e verifique-os para ver o que está disponível – Confira

7. Sound Effects & Media / Efeitos Sonoros e Mídia

Se o seu aplicativo tiver efeitos sonoros, o Framer oferece cobertura para você. Você também pode reproduzir músicas, vídeos, GIFs, vídeos do Youtube e outros tipos de conteúdo dentro do seu protótipo.

8. Wheel Effect / Efeito da roda - girando

9. Heart Animation / Animação do coração / Liked

O Framer tem um número infinito de possibilidades quando se trata de substituições de código. Este é um deles. No Framer, você pode escrever funções e aplicá-las a qualquer elemento de sua tela.

Substituições podem ser usadas para passar dados entre entradas de texto, exibir dados dinamicamente de uma API e criar animações de gesto personalizadas.

Substituições de código são mais complicadas do que as outras opções que compartilhei, mas na maioria das vezes copiar e colar um trecho de código é tudo que você precisa fazer.
Veja mais substituições de código aqui.

10. Drawing Pad / Bloco de desenho

 


Ter uma assinatura ou bloco de desenho em um protótipo parece magia negra, mas tudo é possível com as integrações de pacote do Framer.

Neste artigo, cobrimos apenas uma pequena parte de todas as capacidades brilhantes do Framer. Eu recomendo navegar na lista completa para ver o que mais o Framer tem a oferecer.

Fonte: https://uxdesign.cc/

Compartilhe esse conhecimento:

Digite o que procura e aperte enter

Carrinho

Nenhum produto no carrinho.