Google Gemini (previously Bard) Figma Recreation
Check out the free Figma file here. We're continuously improving it, stay tuned ✨
You can see the Flutter live version (based on this very design!) here.
Preface
We wanted to develop a Material design-based AI app for Omni, so we thought the best place to inspiration was from Google's official products like Gemini, Google Fonts, and Material.io.
We also needed our application to be available cross-platform, spanning screen sizes across mobile phones, tablets, desktops... Responsiveness on another level.
So we added a tinge of a challenge for ourselves in this project; Why not make a single, fully responsive screen in Figma in a way that it adjusts to any size of screen? It sure sounded like a dream come true for our engineers.
For starters, we thought we could build upon Gemini - previously known as Bard - Google’s most capable and generalized AI model. Unfortunately, we couldn't find a similar template that could cover up our needs. So we went with creating our own.
Recreating Google's Gemini in Figma
The aim was not only to just recreate using Material Design components, but make them responsive to a level that one screen does the job. There is no doubt in how well Google manages to design sleek and elegant products, and replicating the same aesthetic did come up with its own challenges. We used the official Material Design 3 Kit to reconstruct Gemini. The major role played was by AutoLayout and a Figma plugin called "Breakpoints".
Why use the Material Design Kit? Because it corresponds to the same language used in official implementations of Material like Angular Material and Flutter.
How did we execute it?
The agenda was:
Make a single screen look fully responsive, and,
Follow material design principles to its best on three types of screens.
In the quest, we realized the Autolayout feature can help you do wonders to your design in the area of responsiveness (if done right) and the Breakpoints plugin helps you decide on which point your screen size should change and provide a different view to your users without actually having to create different sized screens. Isn’t that cool? This way, you can make your prototypes super easy to test out, to ensure that your app remains user-friendly and visually appealing no matter what device someone is using. We kept things simple by sticking to Material colors, principles and components which made it easy to play around with different looks and even add a dark mode for those who like it.
Here's what it looks like!
And the highlight of the story? We shared our design for free on Figma, so anyone can use it and help make this Material Design template even better.
Material You? More like Material Yikes!
It's all fun and games until you hit a brick wall of inconsistency in your design system. During this recreation, we observed that Google deviated from its own traditional Material Design principles.
Observations:
Our team attempted to implement the standard Navigation Rail component based on the initial design of the Gemini website.
During development, engineers discovered that the actual implementation on Gemini deviated from the standard component.
The customized version on Gemini featured an advanced drawer-like behavior not documented in the official Material Design guidelines.
Analysis and Discussion:
This situation presents two potential interpretations:
Inconsistency with Material Design Principles: Google might not be strictly adhering to its own design principles in the case of the Gemini navigation rail. This is no trade secret; Google often adjusts its own design system for different use cases. In the case of Gemini, you can see this by using Inspect Element on the browser and seeing the custom navigation bar.
Inadequate Coverage of Edge Cases: The Material Design guidelines might lack comprehensive documentation for specific edge cases like the one observed in the Gemini implementation. As seen in the documentation for the Navigation Rail component in Material, there is indeed a section about the hamburger menu, but there is no solid example of an "extended" or "open" state for the navigation rail. Also, despite having a dedicated `extended` field, the Flutter implementation of the Navigation Rail renders a centralized open state, which does not align with the Material philosophy.
Moving Forward:
To ensure a consistent and user-friendly experience across Google products and services, it is crucial to address this inconsistency. Here are two potential solutions:
Update the Material Design Guidelines: Google can expand the Material Design guidelines to explicitly address and document the functionalities present in the customized navigation rail component used on Gemini. This would provide designers and engineers with clear instructions and prevent similar challenges in the future.
Refine the Flutter Implementation: Improving the documentation, and making the Navigation Rail component more malleable, could enable engineers to use it to consistently create beautiful Gemini-like applications, using the standard components.
What did we do? We had to come up with a solution to get going with our design. We created two variants - an expanded and non expanded version of the hamburger menu.
Conclusion
Our journey was not just about building an AI application; it was about crafting a snappy and familiar experience that would engage users from the moment they opened the app. And since we shared our design for free on Figma, we hope it'll inspire others to come up with even more awesome designs.
------
This case study was written by Aniqa Sadaf, UX/UI Designer at Grayhat and an avid Product Design enthusiast.
Edited by Saad B.
