Notre nouveau système de conception mobile pour iOS et Android

Offrir des expériences mobiles cohérentes est dur.

Entre les langages de conception distincts d’iOS et d’Android, les différentes versions de composants natifs et le propre langage de conception de Buffer, les applications mobiles peuvent parfois sembler fragmentées. Les concepteurs et les développeurs finissent par parler des langues différentes, dupliquer le travail et proposer des expériences qui semblent incohérentes sur toutes les plateformes.

Chez Buffer, nous avons vraiment ressenti cette friction. Notre flux de travail de conception mobile n’était pas aussi efficace qu’il aurait pu l’être. Nous avons passé trop de temps à réinventer la roue, à assembler manuellement les captures d’écran et à rattraper notre homologue d’application Web. Nous savions que nous avions besoin d’une meilleure solution.

Nous en avons donc construit un.

Rencontrer 🍿 Pop-corn à emporter

Le nouveau système de conception mobile de Buffer pour iOS et Android. C’est notre réponse au chaos, et elle vient de passer son premier test majeur : nous aider à expédier notre application iOS avec le nouveau langage de conception Liquid Glass d’Apple au moment du lancement d’iOS 26 en septembre 2025.

Allons creuser. 🍿

Pourquoi nous l’avons construit

Avant Popcorn To Go, notre processus de développement mobile présentait quelques points de friction douloureux :

• Mauvaise communication entre la conception et l’ingénierie. Sans langage de conception partagé, les transferts étaient lents et sujets aux erreurs. Notre application iOS s’est retrouvée avec plus de 300 couleurs, dont la plupart étaient des nuances légèrement différentes de la même couleur. Aucune source de vérité n’existait.
• Décisions de conception prises à la volée. Sans source de vérité, les ingénieurs ont dû improviser et prendre des décisions de conception à la volée pour que les choses fonctionnent.
• Interface utilisateur incohérente et inaccessible. Des différences mineures se sont glissées entre les plates-formes, et même entre les différents écrans d’une même plate-forme. Nos applications ne semblaient pas aussi perfectionnées qu’elles pourraient l’être et nous n’utilisions pas pleinement les fonctionnalités d’accessibilité intégrées aux composants natifs.
• Aspect et sensation datés. Avec toutes ces choses qui s’accumulent, il est devenu plus difficile d’adopter les derniers composants natifs ou de mettre en œuvre des modifications dans l’apparence générale de Buffer.

Ces problèmes ont commencé à nous freiner. Notre vision pour Popcorn To Go était simple : créer un système qui offre efficacité, cohérence, accessibilité et pérennité, sans sacrifier le caractère unique et les avantages que les composants natifs apportent à une petite équipe mobile comme la nôtre.

Les objectifs de Popcorn To Go

Nous nous sommes fixés quatre objectifs clairs :

1. Efficacité pour les équipes d’ingénierie et de conception grâce à des composants standardisés et à une utilisation intelligente des composants natifs de la plateforme.
2. Langage de conception unifié cela réduit les problèmes de communication et accélère les itérations.
3. L’accessibilité intégrée en héritant des bonnes pratiques des composants natifs d’iOS et d’Android.
4. Préparation à l’évolution de la plateformecomme Liquid Glass d’iOS 26, afin que nous puissions avancer rapidement lorsque les plates-formes le font.

Comment ça marche

À la base, Popcorn To Go repose sur deux concepts clés : jetons et kits de composants.

Jetons sont les décisions de conception qui définissent votre langage visuel – des éléments tels que les couleurs, l’espacement, la typographie et les rayons des bordures. Considérez-les comme les ingrédients d’une recette. Au lieu de coder en dur « utilisez la marque verte #8FC67D », nous définissons un jeton comme fill-brand qui s’adapte automatiquement au mode clair, au mode sombre et aux différentes plates-formes. Cela signifie moins de risques qu’une mauvaise couleur soit appliquée à tout moment.

Kits de composants sont des blocs de construction d’interface utilisateur prédéfinis (boutons, cartes, barres de navigation) qui utilisent ces jetons. Ils résident dans Figma pour les concepteurs et sont implémentés dans le code pour les ingénieurs, créant ainsi une source de vérité partagée.

La partie délicate ? Équilibrage spécificité de la plateforme avec cohérence multiplateforme.

iOS et Android ont leurs propres langages de conception : celui d’Apple Directives relatives à l’interface humaine et celui de Google Conception matérielle. Nous ne voulions pas tout aplatir dans une expérience générique du « plus petit dénominateur commun ». Au lieu de cela, Popcorn To Go respecte les modèles natifs de chaque plate-forme tout en conservant une sensation de Buffer cohérente.

Cette approche présente un avantage : nous pouvons utiliser des composants prêts à l’emploi qui sont testés sous contrainte par les plates-formes natives en termes d’accessibilité et de compatibilité entre appareils – un atout considérable pour une équipe d’ingénierie mobile composée de deux personnes.

Voici comment nous l’avons structuré dans Figma :

Relations de jetons entre les fichiers Figma dans les systèmes de conception Web et mobile

• Mobiles/Styles: Notre couche de base avec des couleurs primitives et des jetons spécifiques à la plateforme. Nous avons utilisé la dénomination Material 3 pour Android et une dénomination personnalisée pour Apple. Les couleurs primitives reflètent celles de notre application Web.
• Mobile/Android M3: Composants construits avec le langage Material 3 Expressive de Google, entièrement liés à nos tokens Android.
• Mobile/iOS et iPadOS 26: Composants natifs iOS 26 utilisant le langage de conception Liquid Glass d’Apple lié à nos tokens Apple.
• Mobile/iOS et iPadOS 18: Un kit plus léger pour la version iOS précédente (puisque nous prenons en charge une version antérieure).
• Composants mobiles/personnalisés: composants spécifiques au tampon qui n’existent nativement sur aucune des deux plates-formes.

Les défis des opérations de conception que nous avons résolus

Pour que ce système fonctionne correctement, il fallait relever certains défis épineux en matière d’opérations de conception :

• Lien Figma: Le plus grand défi auquel nous avons été confrontés était de relier les primitives. Dans un monde idéal, les couleurs primitives proviendraient directement de notre système de conception principal, Popcorn, et Popcorn To Go les mapperait simplement sur des jetons spécifiques à Android ou Apple. Cependant, l’ensemble de fonctionnalités actuel de Figma ne prend pas en charge cela. Nous avons dû créer un nouveau fichier de primitives pour Popcorn To Go qui reflète manuellement les primitives du Web.

• Dénomination des jetons: Création d’un système de dénomination sur le Web, iOS et Android quelque peu rationalisé tout en respectant les conventions spécifiques à la plate-forme.

• Style des kits: Appliquer nos jetons à des kits spécifiques à la plateforme tout en conservant la flexibilité pour les futures mises à jour. Cela nécessitait l’utilisation de plusieurs plugins pratiques comme Figma Tokens et Variables Importer.

Honnêtement, ce n’est pas le système parfait, connecté et bourdonnant, dont rêve tout concepteur lors de la mise en place d’un système de conception.

Les kits de composants d’Apple, en particulier, sont complexes et parfois incohérents, tandis que la dénomination des jetons d’Android est très spécifique et délicate à sa manière. Mais nous sommes tombés sur des solutions pragmatiques qui fonctionnent pour un usage quotidien et qui atteignent les objectifs que nous nous sommes fixés.

Timing stratégique : Le test iOS 26

Nous avons lancé Popcorn To Go avec un timing intentionnel. iOS 26 était à l’horizon, apportant le nouveau langage de conception Liquid Glass d’Apple : une esthétique fraîche et moderne avec des effets de verre dépoli, des animations raffinées et un raffinement visuel élevé.

En construisant Popcorn To Go avant iOS 26 lancé, nous nous sommes positionnés pour :

• Soyez prêt dès le premier jour quand iOS 26 est tombé
• Tirez parti des dernières fonctionnalités de la plateforme immédiatement
• Expédiez l’actualisation visuelle de notre application aux côtés du nouveau langage de conception d’Apple pour un impact maximal.

Et ça a marché. Lorsque iOS 26 a été lancé en septembre, nous étions prêts. Notre application iOS mise à jour livrée avec Liquid Glass et L’esthétique de la marque rafraîchie de Buffer, offrant une expérience raffinée et moderne qui semble native de la plate-forme tout en restant distinctement Buffer.

Quelle est la prochaine étape

Popcorn To Go est en ligne et fonctionne, mais nous ne faisons que commencer. Voici ce qui figure sur la feuille de route :

À court terme :

• Application à Android et affinement en fonction des commentaires sur les deux plates-formes.
• Extension de la couverture des jetons au-delà des couleurs (échelles d’espacement, rayons de bordure, échelles typographiques).
• Améliorer la découvrabilité avec une meilleure documentation.

Moyen terme :

• Création de notre bibliothèque de composants personnalisés avec des modèles spécifiques à Buffer.
• Création de directives d’utilisation complètes pour le système.
• Évoluer avec les mises à jour de la plate-forme à mesure qu’iOS et Android continuent d’itérer.

À long terme :

• Suivre l’évolution de la plateforme (iOS 27 et au-delà, mises à jour Material Design, etc.).
• Explorer les opportunités de rapporter les apprentissages à notre système de conception Web, Popcorn.

Pourquoi c’est important

Pour notre concepteurs et ingénieursPopcorn To Go signifie une collaboration plus fluide, un prototypage plus rapide et moins de temps consacré aux travaux répétitifs. Au lieu de se demander quelle couleur utiliser et où, les équipes peuvent se concentrer sur la résolution de problèmes plus complexes et la création de meilleures expériences.

Pour Utilisateurs du tamponcela signifie des applications plus soignées, cohérentes et accessibles. Lorsque les systèmes de conception fonctionnent bien, les utilisateurs ne le remarquent peut-être pas consciemment, mais ils sentir il. Les interactions sont plus fluides, l’interface utilisateur est plus prévisible et tout fonctionne mieux.

Relever la barre

Construire Popcorn To Go ne consistait pas seulement à résoudre les problèmes d’aujourd’hui, mais aussi à nous préparer pour l’avenir.

Les plateformes mobiles évoluent constamment. Les tendances du design changent. Les attentes des utilisateurs augmentent. En investissant dès maintenant dans une base solide, nous permettons de suivre plus facilement le rythme, d’expédier plus rapidement et de maintenir la qualité au fur et à mesure de notre croissance.

Ce projet est le fruit d’un véritable effort d’équipe : les concepteurs, les ingénieurs iOS, les ingénieurs Android et les chefs de produit ont tous collaboré pour y parvenir. C’est le genre de travail qui n’est pas toujours sous le feu des projecteurs, mais c’est ce qui permet tout ce que nous construisons.

Nous sommes fiers de ce que nous avons créé et nous sommes ravis de continuer à bâtir sur cette base. Si vous voulez voir Popcorn To Go en action, téléchargez notre application iOS et découvrez la nouvelle expérience Liquid Glass.

Pas sur un appareil Apple ? Gardez l’œil ouvert, Popcorn To Go arrive bientôt sur Android !

Voici une collaboration plus fluide, de meilleures applications et un peu plus de cohérence dans le chaos. 🍿