Escolhendo processos no Framer
Protótipos em Framer precisarão de código. Resta saber o pode ser feito antes dos trabalhos de interação.
Este artigo antecipa detalhes importantes nos processos disponíveis ao designer que quer começar com Framer.
Design no Framer
Usando outras ferramentas
O Framer importa trabalhos do Sketch e Photoshop com facilidade. Mas existem os seguintes problemas:
Imagens achatadas
Que bloqueiam a edição das propriedades nas camadas.
Textos achatados
Textos também viram imagens, impedindo a manipulação de suas camadas.
Dimensões distorcidas
Sobras e outros efeitos achatados alteram o tamanho esperado.
Sem aba de design
Framer não importa camadas, apenas as disponibiliza no código.
Usando a aba de design
O Framer focou suas últimas atualizações na aba de design. O trabalho ficou bom, mas alguma dificuldade ainda pode ocorrer:
Impossível importar
Framer não comunica os designs com o Sketch ou Potoshop.
Sem ferramenta de vetor
Pode-se importar, mas é impossível criar vetores no Framer.
Sem páginas e símbolos
Recursos importantes do Sketch ainda são ausentes no Framer.
Sem plugins
Módulos funcionam como plugins no Framer, mas apenas em códigos.
Usando apenas código
Provavelmente a forma mais poderosa. O Framer tem ferramentas que auxiliam, mas geram muito código:
Misturam-se processos
Códigos de design podem ficar maiores que os da interação.
Cria-se código demais
Um grupo comum de camadas pode gerar ~30 linhas de código.
Requer organização de código
Quando o projeto cresce, organizar torna-se uma necessidade.
Local errado para design
A aba de código não é ambiente ideal para trabalhos visuais.
Visão geral
Ferramentas externas
- Vantagens: Use ferramenta preferida; Rápido para protótipos simples.
- Desvantagens: Subutiliza a aba de design; Texto e efeitos achatados.
Aba de design
- Vantagens: Processo familiar; Fácil de aprender.
- Desvantagens: Trabalho duplicado; Ferramenta limitada.
Aba de código
- Vantagens: Processo unificado; Protótipos avançados.
- Desvantagens: Código demais; Requer organização.
Conclusion
O Framer não trabalha em potencial máximo com design importado, e a alternativa duplica alguns trabalhos.
A aba de design é limitada em comparação a outras ferramentas. Desenhar na aba de código gera código demais.
Até que o @framerteam entregue um ambiente como o Sketch, por exemplo, trabalhar no Framer sempre terá prós e contras.
As vantagens do Framer cobram seu preço. É importante ponderar estes fatores antes de adotá-lo como parte do processo.
Próximo tópico
Novidades da Aba de Design
O que o Framer oferece na aba de Design. O que foi único até então e o que parece estar sendo preparado.
