Introducing Showcase: A New Interactive Design Community
Show off your interactive designs, explore, and experiment with others’ projects to level up your skills.
Community has always been a focus for Framer as a company and undoubtedly has made the tool what it is today. Framer employees, alongside committed community members, have jumped in and helped others tackle complex prototyping problems or quickly get up to speed with interactive design. We’ve shared, shaped, and riffed on everything from powerful components to fully realized design systems within the community.
Our communities, both in-person and online (like our Discord), have helped people grow their skills, connect with like-minded designers, and push the boundaries of prototyping. Today, we introduce a new space for our community, where you can share work, learn from what others create, and build up a collection of your best work.
What is Showcase?
Showcase is our new home for community-created interactive designs and prototypes. Browse this gallery to see the latest and greatest things made in Framer—from individual components with delightful micro-interactions to comprehensive app concepts with detailed user journeys.
Showcase gives contributors the chance to build up their own Framer design portfolio. Contributors get their own profile page where they can create a bio, link to other social profiles, and check out their all-time stats—views, likes, and opens.
Now, you can get your own unique Framer handle, too. Your unique handle connects to your profile page. This effectively gives you your own portfolio of interactive Framer designs on a unique URL, so it’s a great way to share your best work all in one place. You can claim your handle even before sharing a project, so get in quick to reserve yours!
Showcase isn’t just a place to browse and show off projects, though. It’s a whole new way to learn interactive design.
We believe in learning by doing, so we made it easy for everyone to open Showcase projects in Framer and learn from them. Simply click through to a project you like and click the Open in Framer button. This duplicates the project so you can pull it apart and learn how it works or iterate on it to create something new.
We asked a handful of designers to share their work while Showcase was in beta. Here are some of the projects that caught our team’s eye, plus a little about each creator and what the design community means to them.
Fantasy Forever by Jay Ji
Jay Ji works as a UX designer for OPPO in Shanghai. He focuses on designing software for new hardware technology, just as AR/VR headsets and foldable phones. Outside of UX design, Jay is also passionate about code and has a keen interest in sociology.
Jay created Fantasy Forever as a way to help Chinese designers learn Framer. In this prototype, Jay pulled in components—like a working input field at the bottom. He also added a parallax scroll animation and created his own custom transitions between cards with simple Framer Motion code. He plans to turn this prototype into a real website and keep it updated as the team adds new functionality to Framer.
“Learning and sharing are essential for designers. The community has offered me a platform to learn and share. Not only to share inspiration but also to learn new skills from the examples of others. I am happy to contribute my part to Framer through the community.”
— Jay Ji, UX Designer at Oppo
Grow Your Future by Pietertje Westerink
Pietertje recently graduated from Avans University with a Bachelor’s of Communication and Multimedia Design. During her four years of study, Pietertje has worked across a variety of design disciplines but found that she is most passionate about connecting digital design with human behavior. She currently works as a UX designer at Achmea, a large insurance group in the Netherlands.
Grow Your Future was part of Pietertje’s final graduation project. She was challenged to create something that made millennials conscious of their financial decisions and their impact on their retirement. As part of the process, she conducted her own design research and used this to inform the proposed solution.
Pietertje created her own swipeable cards and used components like sliders and input fields in addition to Lottie animations (which can be accessed from the Insert Menu) to create an app concept that makes retirement planning a piece of cake.
“Community means a lot to me as a designer. Besides building a network, it provides inspiration, help, and guidance from professionals that share the same interests from all over the globe. I really love to meet new people and see their personal and professional growth.”
— Pietertje Westerink, UX Designer at Achmea
Steakwallet Staking Flow by James Stackhouse
James joined the design industry as an illustrator at the age of 16 and later transitioned to digital design, where he worked through the rise and fall of Flash, moving onto Web 2.0 and Apps. He now specializes in design for crypto and Web 3. James is currently a designer at Steakwallet, a multi-chain wallet that enables users to earn interest on their crypto coins.
This prototype is all about the flow that the user goes through to ‘stake’ their assets. Staking happens when a crypto investor locks their crypto assets in a ‘proof-of-stake’ blockchain for a period of time. This process helps to secure the network and write new transactions into the blockchain, ensuring their validity. The people who stake are rewarded for doing this.
Staking can be a complicated process in other apps, but James made it his mission to build something simple with as few steps as possible. He used prebuilt Framer components, like buttons and sliders, and personalized them to his design.
“My design career has been pretty isolated, being based in Tasmania for much of it… Framer Discord and Stackoverflow have been critical when I run into coding issues”
— James Stackhouse, Designer at Steakwallet
Huel Shaker Product Page by Alex Woodward
Alex works for Huel as a senior UI/UX designer. Design fascinated him from a young age—he studied graphic design in college, realizing along the way that his real passion lies in UX and UI. For the last 6 years, Alex has specialized in UX specifically in e-commerce.
The Huel team redesigned their shakers from the ground up, and they realized before launch that they needed a brand new product page to suit. Alex was tasked with reimagining the presentation.
Alex created the new page in Framer complete with zooming hover states and an option to see an expanded view of each image. “Being able to create such an in-depth prototype to hand over to the engineers was amazing”, Alex explains. You can see how successful the process was just by taking a peek at the live page—it looks and behaves almost exactly the same as Alex’s prototype.
“For me personally, I would not be where I am today without design communities. So much can be learned from simply engaging with other people or reading other experiences. A community is vital for receiving help and providing knowledge on certain aspects. They are a great place to be able to inspire and be inspired, build confidence and develop as designers. The Framer community has helped me on more than one occasion and without it, I would not have been able to produce the shaker page animations. I am really looking forward to watching the Framer showcase grow and seeing even more quality prototypes!”
— Alex Woodward, Senior UI/UX Designer at Huel
Sweatcoin Buying Experience by Tavi Rosca
Tavi is a senior product and interaction designer with more than 7 years of experience helping startups and businesses grow and build better products. Tavi currently works at Sweatcoin, heading up their marketplace redesign.
Sweatcoin is a new form of cryptocurrency that rewards people for being healthy. Daily steps convert into Sweatcoin.
This prototype shows a detail page where a user can buy physical goods with their Sweatcoins. Tavi used a new ‘swipe to buy’ mechanic complete to make the whole purchasing experience as simple and enjoyable as possible. This new interactive component includes multiple custom animations (including the small arrows that encourage the user to swipe), the walking person that acts as a loading state, and the green checkmark to indicate success.
“As a designer being part of a community is a must! The easiest way to learn, grow, and share knowledge is through other professionals… The introduction of Showcase will most definitely help other new joiners, and even veterans, to learn new ways of making great work in Framer.”
— Tavi Rosca, Senior Product and Interaction Designer at Sweatcoin
Dive in to explore more of the amazing projects like these that are already live on Showcase and get inspired to create your own. Browse through the live projects and don’t forget to claim your Framer handle, too. We can’t wait to see what you share!