MyResume Framer Website Development

Benjamin from ProductHQ sent me an inquiry stating that he was building a new SaaS product called MyResume and needed a Framer expert to build this new product's website pages in Framer from the provided Figma file.

The scope of work was the following:

Develop the homepage and the pre-checkout pages in Framer from the provided designs.

Ensure there is a pixel-perfect implementation that faithfully follows the Figma design.

Ensuring all pages are responsive across desktop, tablet, and phone breakpoints.

The site must be structured and optimised for SEO.

There should be multi-language support.

I completed the project in the following steps:

✧ Analysing the design: I was provided with the Figma file which consisted of the two pages’ UI for desktop and phone breakpoints. I checked how each section, component, and element was made (auto-layout, positioning, masks, etc.), how interactions should be implemented (if any), and how the tablet breakpoint design should be implemented so that it is both adaptive and responsive.

✧ Developing the website: after I got to know about the UI design, I started importing all the essential design tokens/variables like colors styles, text styles, assets, icons etc to the Framer project. The next step was to start developing the layout of the homepage, create repeated elements as components (with variables), checking out responsiveness, adding meta tags inside Site Settings and more.