Interface de busca de cartas
Instituição de ensino:
EBAC
Ano:
2026
Projeto de interface desenvolvido como trabalho final do módulo de Figma da pós-graduação da EBAC. O objetivo principal é a simplificação do processo de busca de cartas de Magic: The Gathering para o formato Commander, eliminando a necessidade de sintaxes de texto complexas por meio de filtros visuais e navegação intuitiva.
O trabalho abrange a criação da landing page, mapeamento de fluxos, wireframes responsivos e um Design System, resultando em protótipos interativos para validação das mecânicas de filtragem na ferramenta.
Contexto
Interface de busca para jogo de cartas colecionáveis
A montagem de baralhos no formato Commander do jogo Magic: The Gathering envolve a consulta de mais de 30.000 cartas com regras e restrições específicas. As principais ferramentas do mercado dependem de sintaxes de texto e lógica booleana para buscas avançadas, criando uma barreira de entrada para jogadores iniciantes.
Este projeto analisa as limitações de usabilidade dessas plataformas para propor uma interface que substitua linhas de comando por filtros visuais intuitivos, atualizando os resultados em tempo real.
Benchmarking e Análise Comparativa
Avaliação técnica dos dois principais mecanismos de busca de cartas de Magic: The Gathering (Gatherer e Scryfall), mapeando o comportamento de navegação, persistência de dados e limitações de consulta para o formato Commander.
Oportunidade Identificada
Integrar os filtros de busca diretamente na interface de resultados, permitindo a aplicação e o ajuste de parâmetros em tempo real com resposta visual imediata, eliminando a dependência de sintaxe textual e a troca contínua entre páginas de busca e listagem.
| Parâmetro | Gatherer (WotC) | Scryfall |
|---|---|---|
| Sistema de Tags | Ausente. | Presente (tags mecânicas e visuais). |
| Persistência de Filtros | Mantém campos no formulário avançado. | Converte em query; esvazia formulário. |
| Busca Simples | Apenas nome da carta. | Apenas nome da carta. |
| Documentação de Sintaxe | Guia externo de sintaxe de query. | Guia externo de sintaxe de query. |
| Edição de Parâmetros | Reabertura do formulário. | Edição manual da query na barra. |
Abordagem
Simplificação de buscas complexas através de filtros.
A abordagem priorizou a eliminação da complexidade técnica das ferramentas tradicionais. O processo iniciou com o mapeamento do fluxo principal e a estruturação de wireframes responsivos, garantindo a organização clara dos elementos de interface antes da fase de alta fidelidade.
O desenvolvimento focou na construção de um Design System no Figma. A criação de componentes reutilizáveis, variants e variáveis de estilo permitiu estruturar uma interface escalável, otimizada para prototipagem e focada na experiência visual do usuário.
Mapa do aplicativo
Fluxo principal
- Landing page;
- Página de busca e resultados;
- Menu expandido com filtros;
- Página de detalhes da carta.
Foco nas especificações dos filtros
Cada filtro será detalhado com suas respectivas opções e comportamentos.
Wireframes
Telas desenvolvidas:
- Landing page;
- Página de busca e resultados;
- Menu expandido com filtros;
- Página de detalhes da carta.
Edge cases
Página de detalhes da carta projetada no caso de cartas com o maior número de informações possíveis.
Responsividade
Versões mobile, tablet e desktop.
Filtros de busca
Criação de um componente de lista único para gerir todas as categorias de filtragem (Color identity, Colors, Type, Category, Status, Rarity, Mana cost e Set).
Uso de pills para o estado colapsado e slots nos dropdowns expandidos, permitindo abrigar conteúdos específicos para cada tipo de filtro.
Comportamento responsivo
Implementação de animações distintas para desktop e mobile, garantindo respostas visuais adequadas a cada tipo de dispositivo..
Design system
Exercício do módulo de Figma da pós-graduação da EBAC, com o objetivo de aperfeiçoar o domínio técnico da ferramenta.
Principais componentes:
- Menu superior expansivo;
- Listas com variantes para diferentes contextos;
- Dropdowns para cada tipo de filtro.
Escalabilidade e consistência
O sistema foi documentado no Figma com componentes reutilizáveis e variáveis de estilo, permitindo evolução futura e aplicação consistente em novas versões do produto.
Resultado
Interface responsiva, design system e protótipos interativos.
O resultado do projeto é uma interface de busca visualmente simplificada para o formato Commander. As linhas de comando e sintaxes complexas foram substituídas por controles visuais diretos, reduzindo o esforço cognitivo do usuário na aplicação de filtros combinados.
As entregas contemplam a landing page institucional e de apresentação do produto, a arquitetura de telas responsivas (mobile, tablet e desktop) e a documentação completa dos componentes e variáveis no Figma.
Os protótipos em alta fidelidade demonstram o comportamento do menu expansível de busca, a aplicação de filtros em tempo real e a navegação fluida pelas informações detalhadas das cartas.
Landing page
Projeto no Figma de landing page focada em conversão na primeira seção, com Call to Action em destaque para ação imediata.
O layout apresenta as principais funcionalidades da ferramenta em blocos visuais objetivos, priorizando a clareza e a navegação fluida.
Figma Motion
As animações da página foram feitas utilizando a ferramenta de animação nativa do figma.
Protótipo do menu de filtros
Protótipo interativo no Figma projetado para demonstração do menu expansível de busca. Permite a navegação direta por todos os menus suspensos das categorias de filtragem sem a necessidade de um fluxo linear rígido.
Implementação do componente com o uso de variants para controle de estados e overlays em posicionamento absoluto com fechamento automático ao clicar fora.
Responsividade
Estruturação do layout direcionada ao posicionamento do menu na região inferior em telas de dispositivos móveis e na região superior em telas de computadores.
Protótipo de simulação de busca
Protótipo estruturado no Figma demonstrando o percurso do usuário para encontrar cartas específicas. A interface substitui linhas de comando por um menu expansível com filtros em formato de pills e menus suspensos.
Organização dos parâmetros complexos do formato Commander em controles visuais diretos, reduzindo o esforço cognitivo do jogador na aplicação de critérios combinados.
Navegação do protótipo
Recomendado utilizar os botões de avanço do protótipo no Figma para visualizar a sequência linear completa projetada para a busca.