Reverse-Engineering Dropbox’s Landing Page in Figma.
Ria Majumder
As a beginner in UI/UX design, I’ve been diving into real-world projects to sharpen my skills and understand what makes great designs stand out. Recently, I reverse-engineering Dropbox’s landing page in Figma to analyze it’s layout, typography, colors, and spacing. Here’s a quick look at my process, what I learned, and how it’s shaping my growth as a designer!
The Project:
I chose Dropbox’s landing page because of it’s clean, user-friendly design that balances aesthetics and functionality. My goal was to deconstruct it’s design system and recreate it in Figma to better understand how top-tier websites are built.
My Process:
Research & Analysis:
Used “Fonts Ninja” to identify typography (e.g., likely fonts like "SHARP GROTESK" for headings and "ATLAS GROTESK" for body text).
Leveraged “Color Zilla” to extract the color palette (vibrant blues for CTA’s, neutral grays , and subtle accents).
Studied the layout to curated the grid system and spacing.
Design Choices:
Assumed a 12-column grid with 20px gutters and 24px margins to structure the layout.
Adopted an 8px spacing scale for consistent padding and margins.
Recreated the page in Figma, focusing on pixel-perfect alignment .
Annotation:
Documented my findings (layout, typography, colors, and spacing) to enriched my understanding and create a reference for future projects.
Challenges:
Grid & Spacing: Initially, I struggled to curated the exact grid system Dropbox used. Was it 12-column? 16-column? The 20px gutters and 8px spacing scale were educated guesses, but aligning elements precisely was tricky.
Feedback Loop: Without access to Dropbox’s design system, I had to rely on visual estimation, which pushed me to trust my design intuition.
Key Learnings:
A well-defined grid system (like the 12-column I used) ensures consistency and scalability in layouts.
An 8px spacing scale simplifies design decisions and creates a harmonious flow.
Reverse-engineering isn’t about perfection—it’s about learning through doing and refining.
Checkout Figma file:
Subscribe to my newsletter
Read articles from Ria Majumder directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by