L’effet Liquid Glass sur Figma

Le design d’interface évolue vers des effets plus organiques et immersifs. En 2025, nous voyons émerger le Liquid Glass comme une tendance phare. Inspiré du glassmorphism, il évoque la transparence et la fluidité d’un verre en mouvement. Grâce à Figma, cet effet devient accessible et nous permet d’explorer de nouvelles façons de créer de la profondeur et de la lumière dans nos interfaces. Chez La Grande Ourse, nous y voyons une esthétique sensible et raffinée qui rapproche le numérique du réel et enrichit nos expériences de design.

Origines et contexte

Le Liquid Glass s’inscrit dans la continuité du glassmorphism, ce style apparu avec les interfaces translucides d’Apple et de Windows. Là où le glassmorphism jouait sur la superposition et le flou, le Liquid Glass va plus loin en introduisant une sensation de matière fluide, presque vivante. Cette évolution traduit un désir croissant de rendre les interfaces plus sensorielles et expressives.

Depuis 2024, plusieurs studios et créateurs partagent des explorations visuelles autour de cet effet, mêlant reflets, distorsions et lumière dynamique. L’arrivée de nouvelles options de flou et de transparence dans Figma en 2025 rend désormais cette esthétique réalisable sans recourir à la 3D.

L’effet dans Figma

Les nouveautés qui changent tout

Figma franchit un cap en matière de rendu visuel. Depuis ses dernières mises à jour, la plateforme intègre des effets capables de simuler avec finesse la profondeur, la lumière et la texture d’un verre liquide. Ce que nous appelons l’effet Liquid Glass s’appuie sur plusieurs améliorations clés : un flou d’arrière-plan plus précis, une gestion plus naturelle de la transparence, et des dégradés dynamiques qui réagissent mieux à la lumière. Ces avancées permettent aux designers de créer des interfaces où la matière semble respirer et refléter son environnement, sans avoir recours à des logiciels 3D.

Créer l’effet étape par étape

Pour reproduire l’effet Liquid Glass dans Figma, nous jouons sur l’équilibre entre profondeur optique et légèreté visuelle. Voici notre méthode :

Commencer par une forme simple
- Utiliser un fond clair, légèrement dégradé, pour créer une base lumineuse.
Appliquer un flou d’arrière-plan
- Régler la valeur entre 20 et 40 px, selon la densité visuelle de l’interface.
- Ce flou apporte une translucidité réaliste et une impression de profondeur.
Ajuster la transparence
- Choisir une opacité douce, autour de 10 à 15 %, pour conserver la clarté du fond.
Ajouter une ombre interne subtile
- Elle renforce la sensation de volume et simule la lumière traversant la surface.
Accentuer la brillance
- Ajouter une lueur interne ou un éclat de surbrillance dans des tons froids pour obtenir un effet de verre humide ou poli.
Équilibrer et simplifier
- Éviter l’accumulation d’effets.
- Chercher la combinaison juste entre texture, lisibilité et performance.
Documenter les réglages
- Noter les paramètres utilisés pour assurer la cohérence entre les projets et faciliter la collaboration dans Figma.

Astuces et limites

Comme tout effet expressif, le Liquid Glass doit être utilisé avec modération. Une intensité excessive du flou ou des reflets peut vite rendre l’interface confuse, voire fatigante à l’œil. Nous veillons donc à tester les contrastes et à adapter la densité de lumière selon le contexte d’usage : sombre ou clair, mobile ou desktop. L’effet fonctionne particulièrement bien sur des éléments isolés — cartes, boutons, panneaux — où il crée une hiérarchie visuelle claire sans nuire à la lecture.

Sur le plan technique, il est aussi essentiel d’anticiper les limites de performance. Bien que Figma gère désormais mieux les effets complexes, une utilisation trop massive peut ralentir le rendu. Dans notre démarche, nous cherchons toujours à équilibrer l’émotion visuelle et la fluidité d’expérience. L’effet Liquid Glass, bien maîtrisé, devient alors un atout pour enrichir nos interfaces d’une dimension sensible et poétique, tout en conservant leur efficacité.

Quand et pourquoi l’utiliser dans un projet UI/UX ?

Donner de la profondeur et de la vie à l’interface

L’effet Liquid Glass n’est pas un artifice esthétique. Il agit comme un langage visuel qui ajoute une profondeur émotionnelle à l’expérience utilisateur. En introduisant reflets, transparences et légèreté, il permet de créer des interfaces plus vivantes, presque sensibles au toucher. Dans nos projets, nous l’utilisons pour évoquer la fluidité, la clarté ou la pureté, des sensations qui soutiennent le message d’une marque. Une carte, un bouton ou un panneau de navigation doté de cet effet semble respirer, créant un lien visuel entre l’utilisateur et l’univers graphique.

Contextes d’usage et cohérence visuelle

Le Liquid Glass se déploie idéalement dans des environnements où la matière et la lumière participent à la narration. Sur des applications premium, des sites de marque ou des produits orientés design, il renforce la perception de qualité et d’innovation. Nous évitons en revanche de l’appliquer sur l’ensemble d’une interface, car il perd alors son impact et risque de compromettre la lisibilité. Notre approche consiste à l’utiliser comme un accent visuel, une respiration au sein d’une composition plus sobre. En jouant sur les contrastes, entre flou et netteté, entre transparence et opacité, nous parvenons à créer des hiérarchies subtiles qui guident le regard sans détourner de l’essentiel.

Une esthétique sensible, mais mesurée

Chez La Grande Ourse, nous voyons dans le Liquid Glass une occasion de réconcilier le fonctionnel et le poétique. Il rappelle la matérialité du monde réel tout en s’inscrivant dans une modernité numérique. Toutefois, son efficacité repose sur une utilisation consciente. Nous privilégions une approche mesurée, où chaque effet a une raison d’être. Cette discipline nous permet d’assurer la cohérence visuelle des projets tout en offrant aux utilisateurs une expérience douce et élégante. Le Liquid Glass devient alors un symbole d’équilibre : un design à la fois technique et sensoriel, ancré dans son époque, mais toujours tourné vers la fluidité de demain.

Mise en œuvre pratique pour notre agence

Intégrer le Liquid Glass dans nos maquettes

Lorsque nous concevons une interface, nous abordons le Liquid Glass comme un outil narratif au service de l’expérience. Dans Figma, nous l’intégrons dès la phase de composition afin de travailler la hiérarchie visuelle et la lumière. Nous définissons des styles d’effets partagés pour que toute l’équipe applique une base visuelle commune sur les composants. Cette méthode renforce la cohérence et facilite les itérations. Nous testons différentes combinaisons de flou, d’opacité et de teintes pour ajuster la texture selon le ton du projet. Ce processus collectif nous permet d’obtenir un rendu équilibré, harmonieux et lisible.

Collaboration entre design et développement

L’effet Liquid Glass exige une traduction technique précise lors du passage du prototype au code. Nous travaillons avec les développeurs pour valider la faisabilité des effets et maîtriser leur impact sur les performances. L’utilisation des propriétés CSS comme backdrop-filter et blur() nous aide à reproduire fidèlement le rendu obtenu dans Figma. Chaque composant est documenté avec ses valeurs, ses paramètres et ses contraintes d’accessibilité. Cette rigueur garantit une expérience fluide et cohérente sur tous les supports, du mobile au grand écran.

Vers une esthétique cohérente et responsable

Adopter le Liquid Glass signifie adopter une approche consciente du design. Nous veillons à ce que l’effet soutienne le contenu sans détourner l’attention ni ralentir l’interface. Chaque projet fait l’objet d’un contrôle de contraste et de lisibilité afin d’assurer confort et clarté d’usage. L’objectif est d’offrir des interfaces lumineuses, expressives et durables. En combinant exigence technique et sensibilité visuelle, nous cherchons à créer des expériences qui unissent émotion et fonctionnalité.

Vers une matière numérique augmentée

Le Liquid Glass représente une avancée tangible dans la conception d’interfaces, mais son potentiel s’étend encore davantage avec l’intégration de l’intelligence artificielle. En combinant effets visuels dynamiques et outils d’IA, nous pouvons désormais générer, ajuster et personnaliser ces textures en fonction du contexte, du contenu ou du profil utilisateur. Cette évolution transforme notre manière de travailler dans Figma : l’IA devient un véritable partenaire de création, capable de proposer des variations, d’optimiser la lisibilité ou de simuler le rendu en conditions réelles.

Nous voyons dans cette convergence entre design et intelligence artificielle une opportunité d’inventer des interfaces plus fluides, adaptatives et intelligentes.

Un projet ?

Vous avez un projet et vous souhaitez en parler ?

Prendre contact