Herooos 💪🏽

Product Design

May 3, 2020


May 8, 2020

A Ui design & prototype library built of hero sections built using the Figma & framer X integration.

Goal 🎯

The aim of this project was to test out multiple ideas for a landing page of a website by blending typography, button & navigation bar component, patterns, and icon style. Also, I wanted to take advantage of the recent FramerX web & Figma integration and see what kind of prototypes can be created and how those prototypes can be exported to code to developers.

Approach 🛠

First of, I "FED MY EYES 👀", basically went through few hours of exploration making research on common website design patterns, understand how they leveraged white spacing, content real-estate, typography & colour to create balance on the UI, and then I drafted out ideas and also tried to create unique design styles that still follow common design principles to create balance on the UI.

Next, I created a style guide for the project that consisted of colors, typography, and button style which evolved over time as I created more and more design explorations. I also did a bit of exploration of patterns to see how best I can relay that on the UI.

Solution 🎨

I started off by creating simple styles common to major web interfaces and then as I kept on designing I grew more confident to explore uncharted territories 😅. Created designs in Figma and exported to Framer X.

Building in figma


Being my first time in Framer X, I had to get used to certain things like how primarily frames are used majorly to group elements, create components, mask, etc and creating a graphic component like shapes and vectors, you'll have to import a "Graphics component" 😅, it wasn't bad but just felt unnatural at first because that's not how Xd, Figma or Sketch are built but it took so getting used to.

Also how big the constraints created in Figma affected how things moved around. But little by little I started to get the hang of it and I created my prototypes, exported, created a branding video using Adobe After effects & voila 🎉. Herooos is ready to be launched.

It was an awesome learning experience and I'm looking forward to including Framer X into the product design process.

Link to project

Till next time, see you as we keep building products for the next billion users.

Herooos 💪🏽




Kia Kia wireframing Kit


View More