Providing regular mobile experiences is tough

Between iOS and Android’s distinct style languages, different variations of indigenous elements, and Barrier’s very own layout language, mobile apps can often really feel fragmented. Designers and developers end up talking various languages, duplicating work, and delivery experiences that really feel irregular throughout systems.

At Buffer, we truly felt this friction. Our mobile design workflow wasn’t as effective as it can have been. We invested too much time transforming the wheel, manually patching together screenshots, and playing catch-up with our web application counterpart. We understood we needed a much better way.

So we built one.

Meet Popcorn To Go

Barrier’s new mobile style system for iOS and Android. It’s our answer to the disorder, and it just passed its first major examination: assisting us deliver our iOS application with Apple’s new Liquid Glass design language the minute iOS 26 introduced back in September 2025

Allow’s dig in.

Why we built it

Prior To Snacks To Go, our mobile growth process had some agonizing rubbing points:

• Miscommunication in between style and design. Without a common layout language, handoffs were slow-moving and error-prone. Our iphone application wound up with 300 + colors, the majority of which were a little different tones of the same color. No source of reality existed.
• Design decisions made on the fly. Without source of fact, designers were entrusted to improvise and take on-the-fly layout choices to make things work.
• Inconsistent and hard to reach UI. Small differences crept in between platforms, and even in between various displays on the very same platform. Our apps didn’t feel as sleek as they could be, and we weren’t completely using the ease of access includes built right into native components.
• Dated look and feel. With all these things accumulating, it became harder to take on the current native parts or execute modifications to Buffer’s general look and feel.

These issues began to hold us back. Our vision for Popcorn To Go was simple: produce a system that provides efficiency, consistency, access, and future-proofing, without giving up the one-of-a-kind character and benefits that indigenous components offer a small mobile team like ours.

The goals of Snacks To Go

We laid out with four clear goals:

1. Effectiveness for engineering and layout groups via standardized parts and smart use of indigenous system components.
2. Unified design language that decreases miscommunication and accelerate model.
3. Availability baked in by acquiring best practices from iphone and Android’s native parts.
4. Readiness for platform evolution , like iOS 26’s Liquid Glass, so we can scoot when the platforms do.

Just how it functions

At its core, Snacks To Go is built on 2 crucial concepts: tokens and part kits

Symbols are the style decisions that define your visual language– things like shades, spacing, typography, and border distances. Think of them as the components in a dish. Rather than hardcoding “utilize brand name green # 8 FC 67 D,” we specify a token like fill-brand that instantly adapts throughout light setting, dark mode, and different systems. This indicates less chance of the wrong shade being applied at any kind of factor.

Part sets are pre-built UI foundation (switches, cards, navigating bars) that use those tokens. They live in Figma for designers and are carried out in code for designers, developing a shared source of reality.

The difficult part? Stabilizing system specificity with cross-platform uniformity

iOS and Android have their very own design languages: Apple’s Human Interface Standards and Google’s Material Design We really did not want to squash every little thing right into a common “lowest usual denominator” experience. Rather, Popcorn To Go respects each platform’s native patterns while maintaining a natural Buffer feel.

This method features a bonus: we get to make use of ready-made components that are stress-tested by the indigenous systems for availability and cross-device compatibility– a big asset for a two-person mobile engineering group.

Right here’s how we structured it in Figma:

Token partnerships in between Figma submits across the Internet and Mobile design systems

• Mobile/Styles : Our foundation layer with primitive colors and platform-specific symbols. We utilized Product 3 naming for Android and customized identifying for Apple. The primitive colours mirror those in our web application.
• Mobile/Android M 3 : Components built with Google’s Product 3 Expressive language, fully linked to our Android tokens.
• Mobile/iOS & iPadOS 26 : Indigenous iphone 26 components making use of Apple’s Liquid Glass design language linked to our Apple symbols.
• Mobile/iOS & iPadOS 18 : A lighter-touch package for the previous iphone variation (considering that we support one version back).
• Mobile/Custom Parts : Buffer-specific parts that do not exist natively on either system.

Style operations challenges we resolved

Obtaining this system working smoothly implied tackling some gnarly style operations obstacles:

• Figma connecting : The most significant difficulty we faced was linking primitives. In an excellent world, the primitive colors would come straight from our major style system, Popcorn, and Popcorn To Go would simply map these to Android or Apple-specific symbols. However, Figma’s current feature set doesn’t sustain this. We needed to create a new primitives apply for Popcorn To Go that manually mirrors the web’s primitives.

• Token naming : Creating a naming system throughout web, iOS, and Android that is rather structured whilst appreciating platform-specific conventions.

• Set styling : Applying our symbols to platform-specific packages while preserving flexibility for future updates. This required utilizing several handy plugins like Figma Tokens and Variables Importer.

Honestly, it’s not the ideal, efficiently linked & whistling system every developer dreams of when establishing a layout system.

Apple’s part packages, particularly, are complex and in some cases irregular, whilst Android’s token identifying is very specific and tricky in its very own way. But we arrived at pragmatic solutions that help daily use and attain the goals we set out to attain.

Strategic timing: The iOS 26 examination

We launched Popcorn To Opt for intentional timing. iOS 26 was on the perspective, bringing Apple’s brand-new Liquid Glass layout language: a fresh, contemporary visual with frosted glass effects, refined computer animations, and elevated aesthetic polish.

By constructing Snacks To Go before iphone 26 introduced, we positioned ourselves to:

• Be ready from the first day when iOS 26 dropped
• Utilize the current platform capacities quickly
• Ship our app’s aesthetic refresh alongside Apple’s brand-new style language for maximum impact.

And it worked. When iphone 26 launched in September, we were ready. Our updated iOS app shipped with both Fluid Glass and Barrier’s refreshed brand name visual, providing a refined, modern experience that really feels native to the platform while staying clearly Barrier.

What’s following

Popcorn To Go is live and functioning, but we’re just getting started. Below’s what’s on the roadmap:

Short-term:

• Relating to Android and refining based on responses on both systems.
• Increasing token coverage past shades (spacing ranges, border spans, typography scales).
• Improving discoverability with better documents.

Medium-term:

• Building out our personalized part library with Buffer-specific patterns.
• Developing extensive use standards for the system.
• Developing with system updates as iOS and Android continue to iterate.

Lasting:

• Equaling platform evolution (iphone 27 and past, Material Layout updates, and so on).
• Checking out possibilities to bring understandings back to our web design system, Popcorn.

Why it matters

For our designers and designers , Snacks To Go means smoother cooperation, faster prototyping, and much less time invested in repetitive job. Rather than obtaining stuck on which colour to use where, groups can focus on resolving more intricate problems and crafting much better experiences.

For Buffer customers , it suggests extra sleek, regular, and easily accessible applications. When style systems function well, individuals might not consciously discover– but they feel it. Interactions are smoother, the UI is more predictable, and every little thing simply functions much better.

Raising bench

Structure Popcorn To Go wasn’t nearly addressing today’s problems however regarding setting ourselves up for the future.

Mobile platforms are continuously developing. Design patterns shift. Individual assumptions climb. By purchasing a strong structure currently, we’re making it less complicated to keep up, ship much faster, and preserve top quality as we expand.

This project was a true synergy: designers, iphone designers, Android engineers, and item leaders all teaming up to make it happen. It’s the kind of work that does not always get the spotlight, yet it’s what makes it possible for everything else we develop.

We take pride in what we’ve developed, and we’re excited to keep structure on it. If you wish to see Popcorn To Go in action, download our iphone app and have a look at the new Fluid Glass experience.

Out an Apple tool? Watch out, Snacks To Go is concerning Android soon!

Below’s to smoother partnership, much better applications, and a little bit more uniformity in the disorder.