May 2020
A Ui design & prototype library built using the Figma & framer X integration.
Working with different dev teams over the years, I always explored new ways to improve my design, prototyping & hand-off process to make sure clients and devs are clear on how the product is meant to look and work.
Figma is the design tool I use for design & dev hand-off documentation. In mid-2020, I saw an ad about Framer X and its design integration with Figma, React and Javascript. I was intrigued.
Apparently, the Framer X allows designers build components in the editor's view that can be exported to react for developers to improve development time. It also had some amazing prototyping tools and I was really interested so I created a fictitious project to test out how I can improve better hand-off.
The goal of project Herooos was to test out multiple ideas for a landing page of a website by blending typography, button & navigation bar components, patterns, and icon style. Also, I wanted to test Framer X prototyping and component-code exporting tools.
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 & color 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.
Being my first time in Framer X, I had to get used to certain nuances like how primarily, frames are used majorly to group elements, create components, masks, 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 other design tools; Xd, Figma or Sketch are built, so it took some getting used to.
Also realized how the constraints created in Figma affected how things moved around. Little by little I started to get the hang of it and I created my prototypes & exported.
After I concluded with the project, I added a little extra...(just because I can). I created a branding video using Adobe After effects & voila 🎉🎉🎉 Herooos is ready to be launched.
What I learned
The change in design experience was a big deal for me because, when I design, I am basically testing out different ideas and I'm changing, removing, and adding stuff really fast and Figma was the best tool for this process but for Framer X the design experience seemed like I had to do a lot of relearning and even the Figma import wasn't seamless.
Please note: This research was done mid-2020 and I'm sure the Framer X team has done a lot of updates to improve the product because I see a lot of discussions around it. This is not in any way to shame the product.
Will I be going back?
There's a possibility because working with the prototyping interaction there were a lot of amazing features I really was excited to try out and will like to give a second shot at it if I need to.
Regardless, It was an awesome learning experience and I'm looking forward to the updates Framer X will make in the future.
Till next time, see you as we keep building products for the next billion users.
