✦ TLDR:

I found this design on twitter, now known as X and requested to collaborate on the design, transforming it from a design into an amazing website experience. I was not contracted as this was all voluntary work, trying to show the world what I can do. The overall experience was educating and fun as a developer who does not use IDE like framer for his development, but looking at the future, I see my self exploring more into the world of framer, spending a lot of time in code components and code overrides.

Contact the designer

here

✦ Live Preview

🚀 The Process

I completed the project in the following steps:

✧ Setting up Framer:

Created a new Framer project and laid down the basic site layout with responsive framer from the get go. The design had a custom font that was not present in framer, so I had to import all custom download and import all custom fonts used in the design, that way, the Figma plugin will work seamlessly.

✧ Getting to know the Figma designs:

Since the design was not optimized for smooth framer conversion, I had to take a deep look at the design, the layers, and how they are structured, then I duplicated the design to have one as a reference and work on the other where I converted individual sections into the right layout, and spacing and just to make sure that everything is exactly similar to the reference page

✧ Matching the design with the webpage:

After moving the design from Figma to framer, It was now time to make sure that It looked like the design and also ensure that it had breakpoints for responsiveness of the website

✧ feedback:

After I had completed the implementation of the design to framer, I reached out to the designer for his feedback on the website, and he was really happy with the outcome.

📸 More Visuals

✨ Conclusion

Overall really enjoy taking on this challenge and surprised with how easy it is to build unique and creative website with framer, and when I harness the code components and overrides features framer provides, I feel superpowered, and I look to building more websites with framer.

Lets work on your next big project✨

send me a dm or email me at kelvinohemeng59@gmail.com