Check out the free Figma file here. We're continuously improving it with your feedback, stay tuned ✨

Hello, design geeks. We're back at our usual antics again - this time, with a Figma recreation of the infamous Adobe Creative Cloud, a staple for many designers across the world.

> Check out our Google Gemini recreation here.

Preface

We wanted to develop cutting-edge deepfake detection tools, which led us to a search for existing deepfake detection dashboards made in Adobe Spectrum Design Library.

Why Adobe Spectrum?

Previously, we have worked on creating extensions in Adobe Premiere Pro for our product OmniDub. We did maintain a UI component library that could be brought to our use again. We wanted to follow the same design pattern for reusability of our UI components and to offer a cohesive experience across all our tools hence resulting in nominating Adobe spectrum design library for our deep fake detection tool as well. However, to our surprise, we found a lack of accessible options to gather the bare minimum which is - examples for our Deepfake detection tool. We did stumble upon Resemble AI's deepfake detection dashboard which showcases a seamless method for identifying deepfake audio across various media formats.

Beyond this discovery, we really struggled in finding any deepfake dashboard samples yet alone built with Adobe Spectrum Design System. We did discover something that was not deepfake but relevant : some Malware/ antivirus , speech detection / lip sync dashboards which helped us brainstorm some ideas.

Nevertheless, we don't stop, do we? So we thought of a new venture. Creative yet challenging.

Recreating Adobe Creative Cloud

We weren't demotivated by the lack of available deepfake detection examples across the internet. We took it upon ourselves! We started off by recreating one of Adobe’s products, the Adobe Creative Cloud, using Adobe Spectrum, but with a twist – we employed Figma as our canvas!

Surprisingly we did find the Adobe Spectrum Library in the Figma community but the version wasn’t the latest Adobe Spectrum 2. Bummer. The only library available on Figma isn't even the official Adobe Spectrum file. Adobe Spectrum 2 recognizes the new era of design referring to colors, typography, a joyful user experience and something a user can call home, mainly inspired by material design system and atomic design. We used the existing library to its best to craft what can only be described as a masterpiece.

Here's a side-by-side comparison, with the original (left) and the recreation (right):

Challenges

Unlike Material design, Spectrum 1 doesn't really give users the independence they need. In our case, designing and prototyping the system for our dashboard was quite difficult. The design system is extremely narrow - It does not give flexibility as other design systems do (in terms of layout, component sizing, etcetera). It's extremely standardized. Building custom components to be in theme with this design system is relatively difficult. Theming this design system is almost impossible.

Would you call it a robust design system? We wouldn't say it isn't robust. Everything is always relative and differs from case to case. In some use cases its very robust ( might call it opinionated or flexible). For our use case: Spectrum is highly opinionated and not flexible.

Suggestions to Adobe

Adobe can make its design library available on other platforms as well such as Figma, for the ease of its user. Adobe can follow the material design system’s principles for interactions including different states and clicks. That adds so much value to the experience - for both the designer and the user at the end. Plus, they could add better theming in their design system to allow more creative interfaces to emerge.

Conclusion

This marks not the peak but the beginning of our journey. Next step: We would be creating a Deepfake Detection Dashboard in our upcoming iteration considering two options: Custom design system built with Headless logic, and polymorphic UI Use a more flexible design system (Like Radix) and customize it for looks. Keep an eye out for our next breakthroughs as we continue our journey! Follow us for the latest advancements and insights in deepfake detection and deisgn.

------

This case study was written by Aniqa Sadaf, UX/UI Designer at Grayhat and an avid Product Design enthusiast.