New Mobile Design System on iOS and Android

Providing consistent mobile experiences is Hard to believe?.

Buffer has its own design language and Buffer is a part of the mix. This can make mobile apps feel fragmented. Designers and engineers end up using different languages, reworking their work and delivering experiences that are inconsistent across platforms.

We felt it at Buffer. We could’ve been more efficient in our mobile design workflow. Our mobile design workflow was not as efficient as it could have been. We were spending too much time manually patching screenshots together and playing catch up with our web application counterpart. We needed to find a new way.

Then we decided to build one.

Meet 🍿 Popcorn To go

Buffer’s latest mobile design system, available on iOS and Android. This is our solution to chaos and has just completed its first test, which was helping us launch our iOS app using Apple’s Liquid Glass Design Language when iOS 26 launches in September 2025.

Let’s dig in. 🍿

We built it

Prior to Popcorn To Go our mobile development had some frustrating friction points.

• Miscommunication between design and engineering. The handoff process was slow and prone for errors when there wasn’t a design shared by all. The iOS app we created ended up having 300+ different colors. Most of them were slight variations of the same colour. It was impossible to find any source of information.
• Design decisions are made in the moment. Without a reliable source, engineers had to improvise to solve problems and make design decisions on the spot.
• Unreliable and difficult to use UI. Even within the same platform, there were minor differences. We didn’t use the native accessibility features to their full potential, nor did our apps feel polished.
• The look of the site is dated. It became more difficult to implement the newest native components and to change Buffer’s overall look.

This problem started to slow us down. Popcorn To Go’s vision was to create a system which would deliver efficiency, consistency and accessibility without losing the advantages and unique characteristics that native components can bring to small mobile teams like ours.

Popcorn To Go’s goals

Four goals were clearly defined.

1. Engineering and Design Teams: Efficiency is key Through the use of standardized components, and native platform components.
2. Unified design language This reduces the risk of miscommunication, and accelerates iteration.
3. Baked accessibility By inheriting the best practices of native iOS and Android components.
4. Prepare for the next platform generationWe’re able to move quickly when platforms are updated, as with iOS 26 Liquid Glass.

It works

Popcorn To Go’s core is built around two concepts. tokens The following are some examples of how to get started: component kits.

Tokens are the design decisions that define your visual language — things like colors, spacing, typography, and border radii. Imagine them as ingredients for a dish. Hardcoding is not the best way to go. “use brand green #8FC67D,” we define a token like fill-brand It automatically adapts between light mode and dark mode as well as different platforms. There is less risk of applying the wrong colour at any given point.

Component kits There are pre-built UI components (buttons cards and navigation bars) which use these tokens. The tokens are stored in Figma and implemented by engineers in code, creating a single source of truth.

What is the tricky part? Balancing platform specificity You can also find out more about cross-platform consistency.

Apple and Android each have a unique design language. Human Interface Guidelines Google is a good example. Material Design. We did not want to turn everything into generic “lowest common denominator” experience. Popcorn To Go, on the other hand, respects every platform’s native pattern while maintaining an overall Buffer feeling.

This approach comes with a bonus: we get to use ready-made components that are stress-tested by the native platforms for accessibility and cross-device compatibility — a huge asset for a two-person mobile engineering team.

How to structure it using Figma

Figma Files and Web Design Systems

• Mobile/StylesOur base layer, with its primitive colors and tokens specific to each platform. Material 3 for Android was the naming scheme, while Apple used a custom-made naming. Our web app uses the same primitive colors as our Android app.
• Mobile/Android M3Components developed with Google Material 3 Expressive Language, and fully integrated into our Android tokens.
• Mobile/iOS & iPadOS 26Apple Tokens are linked with native iOS 26 components that use Apple’s Liquid Glass Design Language.
• Mobile/iOS & iPadOS 18The kit is designed for iOS versions prior to iOS 5.0 (because we still support the older version).
• Components for Mobile/Customized DevicesBuffer specific components which are not native on any platform.

We solved the design operations challenge

To get this system to work smoothly, we had to overcome some difficult design challenges.

• Figma linkWe faced the greatest challenge in linking primitives. Popcorn To Go could map the colors directly to Android and Apple tokens. Figma does not currently have a feature that allows this. Popcorn To Go required us to manually create primitives files that mirrored the web.

• Token namingCreate a system of naming that can be used across platforms, including web, iOS and Android, while still maintaining platform specific conventions.

• Kit StylingThis required using several plugins like Figma Tokens and Variables Importer. This meant using a few plugins, such as Figma Tokens or Variables Exporter.

Honestly, it’s not the perfect, smoothly connected & humming system every designer dreams of when setting up a design system.

Apple’s components kits are particularly complex and inconsistent. Android token naming, on the other hand, is specific and confusing. We found pragmatic solutions to our problems that are easy-to-use and meet the objectives we had set.

Time your iOS 26 testing strategically

Popcorn To Go launched with a deliberate timing. Apple was releasing iOS 26, which introduced Apple’s Liquid Glass Design Language: A fresh, modern aesthetic, with refined animations and enhanced visual polish.

Popcorn To Go is a great way to make popcorn. Then, We positioned ourselves for:

• Get ready to go from Day One iOS 26 is now available
• Take advantage of the latest platform features You can start immediately
• Our app is getting a visual update Alongside Apple’s latest design language to maximize impact.

It worked. Our iOS 26 app was ready when iOS 26 released in September. We shipped our updated iOS app with Liquid Glass The following are some examples of how to get started: Buffer’s new brand aesthetic. A polished, modern, native experience.

What is next?

Popcorn to Go has been launched and is working. But we are just beginning. What’s next?

Short-term:

• Applicating to Android, and then refining the application based on feedback from both platforms.
• Expanding coverage of tokens beyond color (spacing, border radius, typography, scales).
• Improve discoverability by better documentation

Medium-term:

• Buffer patterns are used to build our library of custom components.
• Making comprehensive system usage guides.
• As iOS and Android iterate, the platform will continue to evolve.

Long-term:

• Keep up with the latest platform updates (iOS 27, Material Design, etc.).).
• Popcorn’s web design system is being re-designed to incorporate the learnings.

Why it is important

Our Designers and engineersPopcorn To Go leads to a smoother and faster collaboration. It also means less time is spent doing repetitive tasks. Teams can now focus more on creating better experiences and solving complex problems instead of being stuck over which color to use.

The following are some of the ways to improve your own ability. Buffer usersIt means that apps are more consistent, polished and accessible. When design systems work well, users might not consciously notice — but they You can also find out more about it. Everything works much better. Interactions feel smoother and the UI more predictable.

Raising The Bar

Popcorn To Go was not just about solving the problems of today but also about creating a future.

The mobile platforms are always evolving. The design trends are changing. Expectations of users are increasing. We can keep up with the pace of growth, deliver faster and maintain high quality by investing now in a strong foundation.

The project involved a real team effort. Designers, iOS engineers and Android engineers worked together to bring it into reality. This is the type of work which doesn’t get much attention, but is what allows us to build everything else.

Popcorn To Go is proud of its creation and excited to continue building it. Popcorn To Go is available for viewing. download our iOS app Liquid Glass is a new experience.

Are you using an Apple device but not Popcorn To Go? Popcorn To Go for Android is soon to be released!

Let’s hope for smoother collaboration and better apps. 🍿