Ir para o conteúdo principal

Como a Flipster cria design para ter velocidade, escalabilidade e estabilidade em um mercado de criptomoedas 24/7

App da plataforma de trading da Flipster para dispositivos móveis

A Flipster é uma plataforma global de negociação de criptomoedas construída por traders, para traders. Fundada pela equipe por trás de uma das principais empresas de trading quantitativo do mundo, a plataforma combina profunda expertise de mercado com infraestrutura de alto desempenho projetada para mercados 24/7.

A Flipster registrou um recorde histórico de mais de US$ 230 milhões em ativos de clientes, atendendo milhões de usuários em quase 200 mercados em todo o mundo. A empresa opera com uma equipe global totalmente remota e continua a expandir seu conjunto de produtos em perpétuos, mercados à vista, produtos de rendimento e recursos Web3.

À medida que a equipe ultrapassava 230 pessoas, a Flipster precisava de sistemas que pudessem acompanhar seu ritmo de envio. A plataforma avança na velocidade dos mercados que atende—lançando novos recursos semanalmente e implementando correções em um ou dois dias. Isso cria um desafio familiar: manter a agilidade de uma startup enquanto entrega estabilidade, consistência e escala em nível Enterprise.

Para atender a isso, a Flipster adotou o Figma Enterprise como sua única fonte de verdade para o design de produto e execução. A equipe agora usa o Figma como infraestrutura central, permitindo um design system unificado que suporta iteração rápida em escala global.

A Flipster continua a expandir as possibilidades com o Figma Enterprise—explorando recursos de IA, desenvolvendo plugins personalizados, reduzindo o tempo de entrega em 40% e simplificando a localização em várias regiões para fortalecer a consistência operacional em todo o mundo.

No setor de criptomoedas, tudo se move a uma velocidade relâmpago e atravessa fronteiras. O Figma se tornou nossa única fonte da verdade. É onde equipes descentralizadas, do design à engenharia e à localização, permanecem alinhadas. Isso nos dá a mesma transparência e confiança que nossos usuários esperam das criptomoedas, mas aplicada à forma como construímos nosso produto.

Christian Park, Líder de Design, Flipster

Desafio: Atender aos clientes mais voláteis, mas também os mais disseminados do mundo

No mundo das criptomoedas, atrasos têm um custo. O mercado funciona sem parar, e as mudanças acontecem sem aviso prévio. Uma mudança regulatória, um único tweet ou uma oscilação repentina de preço pode forçar decisões de produto em horas, não semanas. Para a Flipster, velocidade é um requisito para se manter atualizada.

Mas as ferramentas em que confiavam não conseguiram acompanhar. Os designers usavam ferramentas diferentes como Sketch e Abstract. Os engenheiros construíam a partir de capturas de tela. QA identificou bugs em planilhas. A documentação vivia espalhada entre Google Docs e Notion, separada dos designs reais.

À medida que a equipe ampliou suas operações globalmente, as lacunas nesta configuração se tornaram mais difíceis de ignorar. Os arquivos estavam desatualizados. Especificações se perdiam. As conversas tinham que ser repetidas em vários fusos horários. Ao mesmo tempo, os requisitos do produto estavam se tornando mais complexos. Tokens como o DOGE são negociados em incrementos de quarta casa decimal, e um erro na exibição dos valores pode causar confusão ou, pior, prejudicar a confiança dos usuários.

Eventualmente, a Flipster percebeu que sua pilha de design existente estava ativamente impedindo a equipe de escalar.

Queríamos regras de numeração robustas para oferecer aos clientes um novo padrão, superando a experiência de negociação de criptomoedas improvisada. Antes do Figma, havia quatro maneiras diferentes de exibir decimais nas plataformas. Depois que passamos para a documentação baseada em Figma, alcançamos 100% de consistência em diferentes números e pontos decimais.

Christian Park, Líder de Design, Flipster

três telas de vários componentes dentro do design system da Flipstertrês telas de vários componentes dentro do design system da Flipster
Design system da Flipster no Figma

Solução: ganhos de eficiência multifuncional aumentam a velocidade em 50% com o Figma

A Flipster adotou o Figma Enterprise cedo, antes da maioria das empresas de seu porte o considerarem. A equipe sabia que o crescimento rápido só seria sustentável com a base certa em funcionamento. Eles precisavam de uma plataforma que pudesse reunir equipes distribuídas, acelerar a tomada de decisões e apoiar a iteração constante sem desacelerar.

Em apenas três semanas, a equipe de design reconstruiu todo o seu sistema no Figma. O que começou como uma iniciativa liderada por design rapidamente se tornou a base para como toda a empresa constrói.

Hoje, o Figma é o alicerce do produto da Flipster. 14 designers, 6 gerentes de produto e mais de 50 engenheiros o utilizam diariamente, juntamente com marketing, QA, dados, localização e operações.

A precificação de acessos fixos no Figma Enterprise removeu a hesitação em adicionar novos coautores. O acesso completo ao editor deu a cada equipe a capacidade de trabalhar dentro do mesmo arquivo sem barreiras.

"Estávamos recebendo convites de pessoas de toda a organização pedindo acesso completo. O plano Enterprise com preços anuais fixos significava que podíamos dizer sim a todos sem nos preocupar," diz Christian Park.

Os ganhos foram imediatos. As especificações redundantes desapareceram. Os engenheiros de QA começaram a marcar os IDs de teste diretamente nos designs. Os analistas de dados deixaram o Excel para trás e marcaram pontos de registro de cliques nos mesmos arquivos dos quais a equipe de produto estava trabalhando. A gestão de ativos entre design gráfico e de produto também foi agregada em uma única fonte de verdade.

“Assim que implementamos o processo, o tempo de discussão entre analistas de dados e engenheiros foi reduzido em cerca de 50%,” diz Christian Park, o Líder de Design na Flipster.

A localização também se tornou muito mais eficiente. Com o plugin Crowdin Figma, a Flipster agora gerencia traduções diretamente da camada de design. As strings de UX sincronizam automaticamente, e as versões localizadas dos novos recursos são lançadas no mesmo cronograma que as globais. Idiomas diferentes não requerem mais fluxos de trabalho separados.

O alinhamento da liderança teve grandes avanços. Antes do Figma, lançar um recurso poderia envolver duas ou três reuniões apenas para revisar os designs finais. Agora, os envolvidos navegam por arquivos ao vivo, deixam comentários e tomam decisões de forma assíncrona. Em uma empresa que prioriza o trabalho remoto e lança atualizações semanalmente, esse tipo de alinhamento é difícil de manter. Mas com o Figma Enterprise, a Flipster tornou isso um padrão.

Antes, precisávamos de duas a três reuniões ao redor do mundo por recurso, apenas para alinhar com os envolvidos. Agora, a liderança pode consultar o arquivo sempre que quiser. A lacuna entre a gestão e os coautores individuais diminuiu significativamente.

Christian Park, Líder de Design, Flipster

Eliminando atritos no handoff em 40% com o Dev Mode

Para os engenheiros da Flipster, o Dev Mode mudou a forma como o handoff funcionava. Antes, os designers tinham que anotar cada tela com detalhes de espaçamento, tamanho e tipografia. Cada plataforma tinha suas peculiaridades: iOS usava pontos, Android usava outras unidades, e isso muitas vezes significava criar tabelas lado a lado apenas para comparar valores.

"Antes do Dev Mode, os designers tinham que explicar cada detalhe. Costumávamos criar tabelas comparando medidas entre plataformas", diz Christian. "Agora, os desenvolvedores buscam as coisas automaticamente sem que precisemos especificar tudo. Isso sozinho nos economiza 40% do tempo de entrega."

Para uma equipe que faz entregas semanais, esse tipo de eficiência é equivalente a aumentar a capacidade de desenvolvimento sem aumentar o número de funcionários. Também significa menos erros entre plataformas e construções mais rápidas desde o primeiro dia.

modal de playground de componente no dev mode com alternâncias para elementosmodal de playground de componente no dev mode com alternâncias para elementos
Tela do Dev Mode da Flipster

Experimentando o que vem a seguir

Para apoiar a adoção e a melhoria contínua, a Flipster estabeleceu o “Capítulo de Design”—um grupo de designers por domínio focado em testar novas funcionalidades, treinar colegas e aumentar os padrões de design da empresa.

um membro da equipe Flipster em uma sala de reunião, com o Figma e participantes de uma chamada zoom na paredeum membro da equipe Flipster em uma sala de reunião, com o Figma e participantes de uma chamada zoom na parede
Equipe “Capítulo de Design” da Flipster no Figma

Esse grupo também desenvolveu um plugin personalizado Cursor-Figma para fazer com que as revisões remotas parecessem mais interativas e imediatas. O mesmo plugin também automatiza a localização sincronizando os nomes das camadas do Figma com o Crowdin, de forma que, quando um designer atualiza um componente, a chave de tradução correspondente é atualizada automaticamente. Isso elimina a rotulagem manual, reduz as idas e vindas, e mantém a localização no mesmo ritmo do design.

Queríamos ser mais eficazes e eficientes, e estamos analisando os novos recursos do Figma. Criamos um plugin Cursor-Figma que atualiza o Crowdin quando você muda o nome da camada. Isso elimina etapas de rotulagem manual.

Christian Park, Líder de Design, Flipster

uma tela da Flipster com um plugin de localização por cima, com camposuma tela da Flipster com um plugin de localização por cima, com campos
CrowdIn, o plug-in de localização da Flipster no Figma

As ferramentas de IA do Figma também tiveram impacto. Um recurso que rapidamente mudou os fluxos de trabalho diários foi a busca baseada em imagem. Os desenvolvedores e gerentes de produto agora inserem uma captura de tela no Figma para localizar a tela correspondente em segundos. O que costumava levar cinco minutos agora leva um, e esse tempo economizado ajuda a acompanhar o ciclo de lançamento semanal.

Em uma indústria onde a confiança é fundamental, precisão e governança importam tanto quanto velocidade. Com o Figma Enterprise, a Flipster lança em ritmo de mercado—enquanto se mantém alinhada em conformidade, localização e precisão de design em todas as equipes.

"Enviamos semanalmente porque as criptomoedas exigem isso. O Figma é como tornamos essa velocidade possível. Para uma equipe de 230 pessoas, é o que nos permite operar com a agilidade e produção de uma empresa dez vezes maior", diz Christian.

Veja como o Figma ajuda a escalar o design

Um design excelente tem o potencial de diferenciar seu produto e sua marca. Mas tudo o que é bom é feito em equipe. O Figma une equipes de produtos em um fluxo de trabalho de design rápido e mais inclusivo.

Entre em contato para saber mais sobre como o Figma pode ajudar empresas a escalar o design.

Vamos abordar como o Figma pode ajudar a:

  • Centralizar todas as etapas do processo de design, desde a concepção até a criação e a construção, em um único lugar
  • Acelerar os fluxos de trabalho de design com um design system compartilhado por toda a empresa
  • Incentivar a inclusão no processo da equipe de produto com produtos que são acessíveis, online e fáceis de usar

Conecte-se com nossa equipe

Ao clicar em “Enviar”, você concorda com nossos Termos de Serviço e Política de Privacidade.