Delivering constant cell experiences is arduous.
Between iOS and Android’s distinct design languages, completely different variations of native elements, and Buffer’s personal design language, cell apps can typically really feel fragmented. Designers and builders find yourself talking completely different languages, duplicating work, and transport experiences that really feel inconsistent throughout platforms.
At Buffer, we actually felt this friction. Our cell design workflow wasn’t as environment friendly because it may have been. We spent an excessive amount of time reinventing the wheel, manually patching collectively screenshots, and enjoying catch-up with our net app counterpart. We knew we wanted a greater means.
So we constructed one.
Meet 🍿 Popcorn To Go
Buffer’s new cell design system for iOS and Android. It is our reply to the chaos, and it simply handed its first main check: serving to us ship our iOS app with Apple’s new Liquid Glass design language the second iOS 26 launched again in September 2025.
Let’s dig in. 🍿
Why we constructed it
Earlier than Popcorn To Go, our cell improvement course of had some painful friction factors:
- Miscommunication between design and engineering. And not using a shared design language, handoffs have been gradual and error-prone. Our iOS app ended up with 300+ colours, most of which have been barely completely different shades of the identical shade. No supply of fact existed.
- Design selections made on the fly. With no supply of fact, engineers have been left to improvise and take on-the-fly design selections to make issues work.
- Inconsistent and inaccessible UI. Minor variations crept in between platforms, and even between completely different screens on the identical platform. Our apps did not really feel as polished as they may very well be, and we weren’t totally utilizing the accessibility options constructed into native elements.
- Dated appear and feel. With all this stuff piling up, it grew to become tougher to undertake the most recent native elements or implement modifications to Buffer’s basic appear and feel.
These issues began to carry us again. Our imaginative and prescient for Popcorn To Go was easy: create a system that delivers effectivity, consistency, accessibility, and future-proofing, with out sacrificing the distinctive character and benefits that native elements carry to a small cell workforce like ours.
The targets of Popcorn To Go
We set out with 4 clear targets:
- Effectivity for engineering and design groups by way of standardized elements and sensible use of native platform elements.
- Unified design language that reduces miscommunication and accelerates iteration.
- Accessibility baked in by inheriting finest practices from iOS and Android’s native elements.
- Readiness for platform evolution, like iOS 26’s Liquid Glass, so we will transfer quick when the platforms do.
The way it works
At its core, Popcorn To Go is constructed on two key ideas: tokens and element kits.
Tokens are the design selections that outline your visible language — issues like colours, spacing, typography, and border radii. Consider them because the substances in a recipe. As an alternative of hardcoding “use model inexperienced #8FC67D,” we outline a token like fill-brand that robotically adapts throughout gentle mode, darkish mode, and completely different platforms. This implies much less likelihood of the flawed shade being utilized at any level.
Part kits are pre-built UI constructing blocks (buttons, playing cards, navigation bars) that use these tokens. They reside in Figma for designers and are carried out in code for engineers, making a shared supply of fact.
The tough half? Balancing platform specificity with cross-platform consistency.
iOS and Android have their very own design languages: Apple’s Human Interface Tips and Google’s Materials Design. We did not wish to flatten the whole lot right into a generic “lowest frequent denominator” expertise. As an alternative, Popcorn To Go respects every platform’s native patterns whereas sustaining a cohesive Buffer really feel.
This method comes with a bonus: we get to make use of ready-made elements which are stress-tested by the native platforms for accessibility and cross-device compatibility — an enormous asset for a two-person cell engineering workforce.
This is how we structured it in Figma:
Token relationships between Figma recordsdata throughout the Internet and Cellular design techniques
- Cellular/Types: Our basis layer with primitive colours and platform-specific tokens. We used Materials 3 naming for Android and customized naming for Apple. The primitive colors mirror these in our net app.
- Cellular/Android M3: Parts constructed with Google’s Materials 3 Expressive language, totally linked to our Android tokens.
- Cellular/iOS & iPadOS 26: Native iOS 26 elements utilizing Apple’s Liquid Glass design language linked to our Apple tokens.
- Cellular/iOS & iPadOS 18: A lighter-touch equipment for the earlier iOS model (since we help one model again).
- Cellular/Customized Parts: Buffer-specific elements that do not exist natively on both platform.
Design operations challenges we solved
Getting this technique working easily meant tackling some gnarly design operations challenges:
- Figma linking: The largest problem we confronted was linking primitives. In an excellent world, the primitive colours would come straight from our foremost design system, Popcorn, and Popcorn To Go would merely map these to Android or Apple-specific tokens. Nevertheless, Figma’s present function set would not help this. We needed to create a brand new primitives file for Popcorn To Go that manually mirrors the net’s primitives.
- Token naming: Making a naming system throughout net, iOS, and Android that’s considerably streamlined while respecting platform-specific conventions.
- Package styling: Making use of our tokens to platform-specific kits whereas sustaining flexibility for future updates. This required utilizing a number of helpful plugins like Figma Tokens and Variables Importer.
Actually, it isn’t the right, easily linked & buzzing system each designer goals of when organising a design system.
Apple’s element kits, specifically, are advanced and typically inconsistent, while Android’s token naming may be very particular and tough in its personal means. However we landed on pragmatic options that work for on a regular basis use and obtain the targets we got down to obtain.
Strategic timing: The iOS 26 check
We launched Popcorn To Go along with intentional timing. iOS 26 was on the horizon, bringing Apple’s new Liquid Glass design language: a contemporary, trendy aesthetic with frosted glass results, refined animations, and elevated visible polish.
By constructing Popcorn To Go earlier than iOS 26 launched, we positioned ourselves to:
- Be prepared from day one when iOS 26 dropped
- Leverage the most recent platform capabilities instantly
- Ship our app’s visible refresh alongside Apple’s new design language for max affect.
And it labored. When iOS 26 launched in September, we have been prepared. Our up to date iOS app shipped with each Liquid Glass and Buffer’s refreshed model aesthetic, delivering a cultured, trendy expertise that feels native to the platform whereas staying distinctly Buffer.
What’s subsequent
Popcorn To Go is reside and dealing, however we’re simply getting began. This is what’s on the roadmap:
Brief-term:
- Making use of to Android and refining based mostly on suggestions on each platforms.
- Increasing token protection past colours (spacing scales, border radii, typography scales).
- Enhancing discoverability with higher documentation.
Medium-term:
- Constructing out our customized element library with Buffer-specific patterns.
- Creating complete utilization tips for the system.
- Evolving with platform updates as iOS and Android proceed to iterate.
Lengthy-term:
- Retaining tempo with platform evolution (iOS 27 and past, Materials Design updates, and many others.).
- Exploring alternatives to carry learnings again to our net design system, Popcorn.
Why it issues
For our designers and engineers, Popcorn To Go means smoother collaboration, quicker prototyping, and fewer time spent on repetitive work. As an alternative of getting caught on which color to make use of the place, groups can concentrate on fixing extra advanced issues and crafting higher experiences.
For Buffer customers, it means extra polished, constant, and accessible apps. When design techniques work effectively, customers may not consciously discover — however they really feel it. Interactions are smoother, the UI is extra predictable, and the whole lot simply works higher.
Elevating the bar
Constructing Popcorn To Go wasn’t nearly fixing right this moment’s issues however about setting ourselves up for the long run.
Cellular platforms are consistently evolving. Design tendencies shift. Person expectations rise. By investing in a strong basis now, we’re making it simpler to maintain tempo, ship quicker, and keep high quality as we develop.
This venture was a real workforce effort: designers, iOS engineers, Android engineers, and product leaders all collaborating to make it occur. It is the type of work that does not all the time get the highlight, but it surely’s what allows the whole lot else we construct.
We’re happy with what we have created, and we’re excited to maintain constructing on it. If you wish to see Popcorn To Go in motion, obtain our iOS app and take a look at the brand new Liquid Glass expertise.
Not on an Apple gadget? Maintain a watch out, Popcorn To Go is coming to Android quickly!
This is to smoother collaboration, higher apps, and just a little extra consistency within the chaos. 🍿
