How did they do that?
There are plenty of sites like mobbin.com and appshots.com that help designers find inspiration or understand how the best apps handle workflows. However, the screenshots on those sites can't tell you what grid layout is used, why those drop-shadows look so nice, or the spacing between elements. For me, that was question - how did the designer… design this?
To answer my own question, I decided to build a resource for all designers: pixel-perfect recreations of the best-designed applications, built in Figma.
Building designdrops.io
I built a spreadsheet listing the most common pages found in websites or applications:
Homepages
Pricing
Sign Up
Sign In
Onboarding
Dashboards
Notifications
Chat/Messaging
Search Results
User Settings
For each of these categories, I recreated 10 screens from real, design-led companies like AirBnB, Dropbox, Calendly, Linear, Basecamp, and more.
Do I sell it, or give it away for free?
Initially, I chose to pursue selling these resources. I built the website, connected it to Lemonsqueezy for payments, and off we went.
The purchases started to trickle in, but it was slow. I couldn't understand why more designers weren't buying. So, I reached out to a few people who downloaded a free pack, but didn't purchase the full product. The main theme was:
It's great - it's just not worth the cost.
Run a test
I had to know - is this resource only valuable to me? Or is it valuable to others, too? So I tested it. I took one pack of 10 designs and put it up for free in the Figma Community. A week later… over 1000 downloads.
Let's give it away
Ultimately, the feeling of providing designers with a valuable resource was more important than income for me. I loaded up every file to my Figma community profile and let my fellow designers reap the benefits.
In total these resources have been downloaded over 56,000 times. That's a win.
