Oferecer experiências móveis consistentes é duro.

Entre as linguagens de design distintas do iOS e do Android, as diferentes versões de componentes nativos e a própria linguagem de design do Buffer, os aplicativos móveis às vezes podem parecer fragmentados. Designers e desenvolvedores acabam falando idiomas diferentes, duplicando trabalhos e entregando experiências que parecem inconsistentes entre plataformas.

No Buffer, realmente sentimos esse atrito. Nosso fluxo de trabalho de design móvel não foi tão eficiente quanto poderia ser. Passamos muito tempo reinventando a roda, corrigindo manualmente as capturas de tela e atualizando nosso aplicativo da web. Sabíamos que precisávamos de uma maneira melhor.

Então construímos um.

Encontrar 🍿 Pipoca para viagem

O novo sistema de design móvel do Buffer para iOS e Android. É a nossa resposta ao caos e acabou de passar no primeiro grande teste: ajudar-nos a enviar nosso aplicativo iOS com a nova linguagem de design Liquid Glass da Apple no momento em que o iOS 26 foi lançado em setembro de 2025.

Vamos nos aprofundar.

Por que construímos

Antes do Popcorn To Go, nosso processo de desenvolvimento móvel tinha alguns pontos de atrito dolorosos:

• Falta de comunicação entre design e engenharia. Sem uma linguagem de design compartilhada, as transferências eram lentas e propensas a erros. Nosso aplicativo iOS acabou com mais de 300 cores, a maioria das quais eram tons ligeiramente diferentes da mesma cor. Nenhuma fonte de verdade existia.
• Decisões de design tomadas em tempo real. Sem nenhuma fonte de verdade, os engenheiros tiveram que improvisar e tomar decisões de design em tempo real para fazer as coisas funcionarem.
• UI inconsistente e inacessível. Pequenas diferenças surgiram entre plataformas e até mesmo entre telas diferentes na mesma plataforma. Nossos aplicativos não pareciam tão sofisticados quanto poderiam e não estávamos usando totalmente os recursos de acessibilidade integrados aos componentes nativos.
• Aparência datada. Com todas essas coisas se acumulando, ficou mais difícil adotar os componentes nativos mais recentes ou implementar mudanças na aparência geral do Buffer.

Esses problemas começaram a nos impedir. Nossa visão para o Popcorn To Go era simples: criar um sistema que oferecesse eficiência, consistência, acessibilidade e proteção para o futuro, sem sacrificar o caráter único e as vantagens que os componentes nativos trazem para uma pequena equipe móvel como a nossa.

Os objetivos do Popcorn To Go

Estabelecemos quatro objetivos claros:

1. Eficiência para equipes de engenharia e design por meio de componentes padronizados e uso inteligente de componentes nativos da plataforma.
2. Linguagem de design unificada que reduz a falta de comunicação e acelera a iteração.
3. Acessibilidade incorporada herdando as melhores práticas dos componentes nativos do iOS e do Android.
4. Preparação para a evolução da plataformacomo o Liquid Glass do iOS 26, para que possamos avançar rapidamente quando as plataformas o fizerem.

Como funciona

Em sua essência, Popcorn To Go é baseado em dois conceitos principais: fichas e kits de componentes.

Fichas são as decisões de design que definem sua linguagem visual – coisas como cores, espaçamento, tipografia e raios de borda. Pense neles como ingredientes de uma receita. Em vez de codificar “use marca verde #8FC67D”, definimos um token como fill-brand que se adapta automaticamente ao modo claro, modo escuro e diferentes plataformas. Isso significa menos chance de a cor errada ser aplicada a qualquer momento.

Kits de componentes são blocos de construção de UI pré-construídos (botões, cartões, barras de navegação) que usam esses tokens. Eles residem no Figma para designers e são implementados em código para engenheiros, criando uma fonte compartilhada de verdade.

A parte complicada? Equilíbrio especificidade da plataforma com consistência entre plataformas.

iOS e Android têm suas próprias linguagens de design: a da Apple Diretrizes de Interface Humana e do Google Design de materiais. Não queríamos nivelar tudo em uma experiência genérica de “mínimo denominador comum”. Em vez disso, o Popcorn To Go respeita os padrões nativos de cada plataforma, mantendo uma sensação coesa do Buffer.

Essa abordagem vem com um bônus: podemos usar componentes prontos que são testados pelas plataformas nativas quanto à acessibilidade e compatibilidade entre dispositivos – um grande trunfo para uma equipe de engenharia móvel composta por duas pessoas.

Veja como estruturamos no Figma:

Relacionamentos de token entre arquivos Figma nos sistemas de design da Web e Mobile

• Celular/Estilos: Nossa camada base com cores primitivas e tokens específicos da plataforma. Usamos a nomenclatura Material 3 para Android e nomenclatura personalizada para Apple. As cores primitivas refletem as do nosso aplicativo web.
• Celular/Android M3: Componentes construídos com a linguagem Material 3 Expressive do Google, totalmente vinculados aos nossos tokens Android.
• Celular/iOS e iPadOS 26: Componentes nativos do iOS 26 usando a linguagem de design Liquid Glass da Apple vinculada aos nossos tokens da Apple.
• Celular/iOS e iPadOS 18: Um kit de toque mais leve para a versão anterior do iOS (já que oferecemos suporte a uma versão anterior).
• Componentes móveis/personalizados: componentes específicos do buffer que não existem nativamente em nenhuma das plataformas.

Desafios de operações de design que resolvemos

Fazer com que esse sistema funcionasse sem problemas significava enfrentar alguns desafios complicados de operações de design:

• Vinculação de figma: O maior desafio que enfrentamos foi vincular primitivos. Em um mundo ideal, as cores primitivas viriam diretamente de nosso sistema de design principal, Popcorn, e Popcorn To Go simplesmente as mapearia para tokens específicos do Android ou da Apple. No entanto, o conjunto de recursos atual do Figma não suporta isso. Tivemos que criar um novo arquivo de primitivos para Popcorn To Go que espelhasse manualmente os primitivos da web.

• Nomenclatura de token: Criação de um sistema de nomenclatura na Web, iOS e Android que seja um tanto simplificado, respeitando as convenções específicas da plataforma.

• Estilo do kit: Aplicar nossos tokens a kits específicos da plataforma, mantendo a flexibilidade para atualizações futuras. Isso exigiu o uso de vários plug-ins úteis, como Figma Tokens e Variables Importer.

Honestamente, não é o sistema perfeito, perfeitamente conectado e vibrante com que todo designer sonha ao configurar um sistema de design.

Os kits de componentes da Apple, em particular, são complexos e às vezes inconsistentes, enquanto a nomenclatura dos tokens do Android é muito específica e complicada à sua maneira. Mas chegámos a soluções pragmáticas que funcionam para o uso diário e que atingem os objetivos que nos propusemos alcançar.

Momento estratégico: o teste do iOS 26

Lançamos o Popcorn To Go com um timing intencional. O iOS 26 estava no horizonte, trazendo a nova linguagem de design Liquid Glass da Apple: uma estética nova e moderna com efeitos de vidro fosco, animações refinadas e polimento visual elevado.

Construindo Popcorn To Go antes Lançado o iOS 26, nos posicionamos para:

• Esteja pronto desde o primeiro dia quando o iOS 26 caiu
• Aproveite os recursos mais recentes da plataforma imediatamente
• Envie a atualização visual do nosso aplicativo juntamente com a nova linguagem de design da Apple para máximo impacto.

E funcionou. Quando o iOS 26 foi lançado em setembro, estávamos prontos. Nosso aplicativo iOS atualizado fornecido com Liquid Glass e A estética renovada da marca Buffer, proporcionando uma experiência moderna e sofisticada que parece nativa da plataforma, ao mesmo tempo que permanece distintamente Buffer.

O que vem a seguir

Popcorn To Go está ativo e funcionando, mas estamos apenas começando. Aqui está o que está no roteiro:

Curto prazo:

• Aplicando ao Android e refinando com base no feedback de ambas as plataformas.
• Expandindo a cobertura de tokens além das cores (escalas de espaçamento, raios de borda, escalas de tipografia).
• Melhorando a capacidade de descoberta com melhor documentação.

Médio prazo:

• Construindo nossa biblioteca de componentes personalizados com padrões específicos do Buffer.
• Criação de diretrizes de uso abrangentes para o sistema.
• Evoluindo com atualizações de plataforma à medida que iOS e Android continuam a iterar.

Longo prazo:

• Acompanhar a evolução da plataforma (iOS 27 e posteriores, atualizações do Material Design, etc.).
• Explorando oportunidades para trazer o aprendizado de volta ao nosso sistema de web design, Popcorn.

Por que isso importa

Para o nosso designers e engenheirosPopcorn To Go significa colaboração mais tranquila, prototipagem mais rápida e menos tempo gasto em trabalho repetitivo. Em vez de ficarem presas em qual cor usar e onde, as equipes podem se concentrar na solução de problemas mais complexos e na criação de experiências melhores.

Para Usuários de bufferisso significa aplicativos mais sofisticados, consistentes e acessíveis. Quando os sistemas de design funcionam bem, os usuários podem não perceber conscientemente – mas eles sentir isto. As interações são mais suaves, a IU é mais previsível e tudo funciona melhor.

Elevando a fasquia

Construir o Popcorn To Go não se tratava apenas de resolver os problemas de hoje, mas de nos prepararmos para o futuro.

As plataformas móveis estão em constante evolução. As tendências de design mudam. As expectativas dos usuários aumentam. Ao investir agora em uma base sólida, tornamos mais fácil acompanhar o ritmo, entregar mais rapidamente e manter a qualidade à medida que crescemos.

Este projeto foi um verdadeiro esforço de equipe: designers, engenheiros iOS, engenheiros Android e líderes de produto, todos colaborando para que isso acontecesse. É o tipo de trabalho que nem sempre ganha destaque, mas é o que viabiliza tudo o mais que construímos.

Estamos orgulhosos do que criamos e entusiasmados em continuar desenvolvendo isso. Se você quiser ver o Popcorn To Go em ação, baixe nosso aplicativo iOS e confira a nova experiência do Liquid Glass.

Não está em um dispositivo Apple? Fique de olho, Popcorn To Go chegará ao Android em breve!

Um brinde a uma colaboração mais tranquila, aplicativos melhores e um pouco mais de consistência no caos. 🍿