Image for post
Image for post
#PraCegoVer: Gif animado mostrando uma animação com o texto: Por que mudamos nossa ferramenta de prototipação. Na imagem tem o logo do Bootstrap Studio e o logo da Conta Azul Design.

Por que mudamos nossa ferramenta de prototipação

Tempos atrás escrevemos sobre como fazíamos protótipos em alta fidelidade usando HTML (leia mais aqui). Como citado no artigo, usávamos o Bootstrap Studio (BSS) como principal ferramenta de trabalho.

Ficamos por anos trabalhando assim e, embora o BSS trouxesse diversos ganhos na fidelidade das entregas, a velocidade de aprendizado era bastante comprometida. Avaliamos com o time e entendemos que os ganhos de fidelidade eram menores comparados à agilidade para criar algo por lá. Além disso, percebemos que:

  • O processo era complexo para as novas pessoas que chegavam no time;
  • Era necessário que designers entendessem sobre HTML e CSS, e isso dificultou nosso processo de contratação;
  • A ferramenta não facilitava a distribuição dos nossos componentes.

Quanto mais o time crescia, estes problemas somados à evolução de outras ferramentas, como Sketch e Figma, fizeram com que a gente repensasse nosso processo e as nossas ferramentas de trabalho.

Neste artigo vou falar sobre os testes que fizemos e onde estamos atualmente.

Vamos lá?

Pesquisa e avaliação de ferramentas

Para avaliarmos qual ferramenta melhor se encaixava as nossas necessidades, fizemos um levantamento com diversas ferramentas de prototipação considerando alguns aspectos:

  • Nível de fidelidade dos protótipos
  • Uso de símbolos/componentes
  • Funcionalidade de guia de estilos
  • Integração com CMS de design system e outros guias
  • Simulação de interações
  • Requer conhecimento de front-end?
  • Qual a familiaridade do time com a ferramenta?
  • Qual a familiaridade do mercado com a ferramenta?
  • Possui publicação de protótipos?
  • Como funciona a colaboração?
  • Como é o handoff para desenvolvedores?
  • Qual o custo anual por designer?

Neste estudo queríamos comparar a então atual ferramenta (BSS), com outras de mercado. Selecionamos estas para comparação:

  • Sketch
  • Figma
  • Adobe XD
  • Framer X
  • Justmind
  • Invision Studio
  • Axure
Image for post
Image for post
#PraCegoVer: Imagem mostrando várias ferramentas de design com o logo da Conta Azul ao centro e texto Sketch + Marvel do lado

A primeira mudança: Sketch + Marvel

Após o levantamento de ferramentas e a comparação, entendemos que a soma de pontos positivos entre o Sketch Cloud + Marvel atenderia a todas as nossas necessidades,

principalmente pela questão do custo benefício, pois estas duas ferramentas apontavam uma economia de mais de 50% em relação ao segundo colocado, o Figma.

No passado nós já utilizamos o Sketch, logo, a adaptação dos(as) designers foi mais rápida e alguns componentes já estavam desenhados por lá. Além disso, a integração dela com o ZeroHeight (ferramenta que usamos para Design System) funcionava perfeitamente bem.

A mudança forçada: pandemia

Algo que não estava em nenhum planejamento também nos pegou de surpresa. Com a pandemia e todo o time trabalhando de casa, todas as vantagens que estávamos vendo com Sketch Cloud, percebemos que não eram como pensávamos, pois, apesar de possibilitar o armazenamento dos arquivos em nuvem, a ferramenta deixou a desejar nas funcionalidades para trabalhos remotos colaborativos.

A pandemia evidenciou tudo isso, pois a Conta Azul entrou em uma fase em que a agilidade e o trabalho colaborativo, que já eram fortes, começaram a ser mais importantes ainda. Pois, com time reduzido e enfrentando a crise macroeconômica do Brasil, precisávamos responder e tomar decisões rápidas.

Diante do cenário, começamos a utilizar um plugin para sincronizar o Miro com o Sketch. Ele nos dava a colaboração que o Sketch não conseguia entregar. Além disso, a manutenção dos arquivos no Marvel ficava cada vez pior, pois ele se mostrou pouco eficiente quando precisamos de agilidade, velocidade e colaboração.

A mudança final: Figma

Comentamos acima que, quando fizemos nosso estudo, ficamos entre o Sketch e o Figma, pois este também atendia às nossas necessidades. Na época, optamos pela primeira proposta — principalmente — pelos custos envolvidos.

Optar então pelo Figma pareceu bastante óbvio, afinal alguns designers da equipe já haviam trabalhado com esta ferramenta.

Entretanto, a decisão não foi tão fácil ou tão simples, pois havíamos acabado de desenhar todos os componentes no Sketch e o time já estava fazendo entregas com essa biblioteca.

Tínhamos o desafio de importar os componentes para o Figma e ajustá-los, já que cada software tem a sua maneira de prototipar. Assim, com muita dedicação e em poucos dias, conseguimos importar toda a biblioteca e deixar os componentes prontos para um primeiro uso.

Image for post
Image for post
#PraCegoVer: Imagem mostrando a Conta Azul Pro com vários cursos com o nome das pessoas do time. No texto está escrito Sobre o Figma, mais agilidade, mais dinâmico, mais integrações.

Terminada esta etapa, ficamos de prontidão e, quando algum designer encontrava algo estranho (principalmente porque o Figma tem o Auto Layout e o Sketch não), já faziamos a correção naquela mesma hora. Também aproveitamos a empolgação dos designers que estavam fazendo alguns componentes, e já os importamos para o Design System, dentro do Figma.

Sempre preparados para mudar

Estar preparado para mudar, testar, aprender, esse é o nosso DNA, pois a única certeza que temos é que o mundo está em constante mudança. Acreditamos que resiliência, flexibilidade e vontade de investigar devem estar na essência de todo designer.

Sobre o Figma, estamos bem felizes até o momento, pois nossa plataforma está em processo de grandes atualizações, e o Figma tem sido crucial para a tomada de decisões rápidas com stakeholders, dinâmicas com o time de design, handoffs com os desenvolvedores e manutenção do nosso Design System.

Image for post
Image for post
Nossas ilustrações já se tornaram átomos (falaremos sobre elas em um próximo post)— #ParaCegoVer: Animação do Figma mostrando a possibilidade de trocar as partes do corpo de um boneco de uma ilustração

Outro fator positivo é a possibilidade de inserir o Figma no Confluence, deixando a documentação das nossas Discoveries ainda mais completas.

Mas, se amanhã houver a necessidade de mudar, estaremos preparados, pois esta é a nossa constante.

Hey, designer, sentiu que pensamos iguais? Você usa o Figma onde você trabalha? Conta pra gente nos comentários como você tem trabalhado.

E, se você quiser, temos vagas para o time de Design. Clica neste link e se inscreve!

Até uma próxima!

Written by

Design Ops at Conta Azul

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store