Encontrei uma alternativa Figma de código aberto gratuito e continuei encontrando motivos para não voltar

Nunca tive um problema específico com o Figma, é provavelmente a melhor ferramenta de design do mercado. Eu o mantenho aberto na maioria dos dias e a maior parte dos meus cursos e projetos pessoais residem nele. Mas estou sempre procurando um equivalente de código aberto para qualquer ferramenta que uso. Existe o Penpot, que é praticamente um espelho do Figma, e é minha melhor recomendação alternativa de código aberto do Figma. No entanto, ainda é um acesso pago. Recentemente, descobri o OpenPencil, uma incrível alternativa Figma de código aberto com um excelente fluxo de trabalho baseado em IA. Mas a busca não parou por aí…

O Quant-UX apareceu no meu radar logo depois, embora já exista há vários anos. É uma ferramenta de design totalmente gratuita e de código aberto, e possui alguns elementos integrados que o Figma não possui.

O que exatamente é Quant-UX

Há algo nisso que não é Figma

Quant-UX é uma ferramenta gratuita e de código aberto que lida com prototipagem, testes de usuários e análises, tudo em um só lugar. Ele é executado no navegador para que você possa se inscrever e começar sem instalar nada. Também existe a opção de hospedá-lo você mesmo se quiser executá-lo em seu próprio servidor, mas a maioria das pessoas provavelmente usará a versão hospedada e é a mesma ferramenta. Já faz mais tempo do que eu imaginava – o desenvolvimento começou em 2017.

A ideia básica é que você crie protótipos interativos, compartilhe-os por meio de um link e obtenha dados reais de uso de quem os está testando. Então, em vez de apenas construir telas, você está construindo algo testável. Há uma seção de exemplos com modelos de trabalho – fluxos de compras, telas de login, painéis e assim por diante – que é realmente útil se você é o tipo de pessoa que congela em uma tela em branco (sou eu). E possui os recursos usuais do sistema de design, como marcadores, telas principais e componentes reutilizáveis, bem como um assistente de IA integrado com BYOK. Se você já possui trabalho no Figma, também pode importá-lo para não precisar começar do zero (mas lembre-se de que ele alinha todas as camadas, portanto é apenas para referência, não para edição posterior).

O que é interessante sobre o Quant-UX é que ele se trata mais do lado da pesquisa do UX do que qualquer outra coisa. Normalmente, uma ferramenta como o Maze é combinada com o Figma para testes do usuário, mas o Quant-UX já o possui integrado.

A tela de design é um pouco opressora

Mas é mais do que prático

Não vou mentir, fiquei um pouco desapontado quando experimentei a tela de designer pela primeira vez. O conjunto de recursos é cerca de metade do que estou acostumado a ver em uma ferramenta de design UI/UX. Você obtém o essencial – formas, texto, imagens, alinhamento básico, controles de posição e tamanho, restrições, bordas, efeitos simples como sombras e desfoques e um painel de camadas – mas muitos dos controles mais profundos que você obteria com algo como Figma ou Penpot simplesmente não estão lá. Os controles de tipografia são bem finos, a lista de elementos pré-fabricados é bem curta e falta edição vetorial avançada.

Dito isso, assim que comecei a construir, percebi que não estava acertando as coisas que faltavam tanto quanto esperava. O Canvas cobre terreno suficiente para eu montar telas reais, e o que falta em profundidade de design é praticamente compensado em qualquer outro lugar…

A prototipagem e os testes andam de mãos dadas

É aqui que Figma fica aquém

O maior ponto de venda do Quant-UX é a prototipagem. No Figma, os protótipos são essencialmente cliques em frames estáticos. O menu suspenso é um ponto de acesso que salta para outro quadro onde você o abriu e a entrada não aceita escrita. Os widgets Quant-UX são reais – a entrada aceita texto, os menus suspensos são realmente abertos, os modais se sobrepõem corretamente e o estado pode persistir nas telas. Por exemplo, um contador de carrinho que vai de 0 a 1 após clicar em Comprar é uma das ações do Quant-UX. Na figma, este seria um quadro separado para cada estado da cesta.

Você também pode executar validação de formulário e lógica condicional, de modo que quando um testador passa por um protótipo, o que ele está usando funciona muito mais próximo de um produto real do que de uma apresentação de slides de telas. Na verdade, o Figma não possui testes de usuários locais implementados dessa forma, nem mesmo no nível pago. Você pode adicionar ferramentas de terceiros, como o Maze, e também há um plugin UserTesting Figma, mas todas são plataformas pagas.

Quant-UX inclui todo o loop. Você define suas tarefas com antecedência, compartilha um link de protótipo com os testadores e o Quant-UX registra cada sessão – cliques, tempo de tela, onde eles travaram e assim por diante. Também há testes A/B integrados se você quiser comparar duas versões lado a lado.

Do lado dos dados, são usados ​​mapas de calor. O Quant-UX agrega automaticamente tudo dessas sessões de teste em uma tela analítica, e você pode visualizar esses dados usando mapas de calor de cliques que mostram onde as pessoas tocaram. Há também mapas de calor de visualização que mostram quais telas foram visualizadas, tempo de permanência da tela, taxas de sucesso para cada tarefa e caminho de usuário agregado para que você possa ver caminhos comuns versus desvios. Você também pode obter gravações de tela individuais para assistir às sessões de trás para frente.

Portanto, você não está apenas substituindo o Figma, você está substituindo o Figma plus Maze por uma ferramenta, e a análise é mostrada anexada ao protótipo real, em vez de um painel separado para o qual você precisa mudar. Não há recrutamento integrado de testadores, então você traz seu próprio pessoal para o teste.

Mais próximo do produto real do que o Figma oferece

Acho que a tela de design poderia precisar de um pouco mais de atenção, mas todo o resto que o Quant-UX oferece é realmente impressionante, especialmente a combinação de prototipagem e teste que você normalmente teria que pagar com duas ferramentas separadas. Como um estudo de design, é difícil superestimar gratuitamente toda essa pesquisa no processo de design.