Here's how I approach turning a Figma design into a Framer website:

1. Open Figma file

2. Import design into Framer

3. Clean up the structure (gaps, paddings, layout...)

4. Build the responsive behavior

5. Add interactions & animations

6. Test every breakpoint

7. Final check before launch

Import is only the beginning.

Real work is turning the design into a responsive, interactive website that works properly across different screen sizes.

*It's not client project, credits to Olga for figma design -https://www.figma.com/community/file/1230604708032389430/positivus-landing-page-design?q_id=593e993a-acf8-4522-9a3b-5c20a775d126

Rebuilding Dropbox’s hero section in Framer.

This is a personal showcase project, not a client project.

The hero section is still a work in progress, but I wanted to share where it’s at so far.

Recreating the layout, responsive behavior and interactions in Framer to get as close to the original as possible.

More soon.

A small Framer setting that can completely ruin your text animations.

If your text animation looks like it’s being cut off instead of smoothly animating, check the stack holds your text.

If it's overflow is set to Hidden/Clip, the animation can get chopped.

Set it to:Overflow → Visible

And the animation works as expected.

I ran into this when I started, so heres a quick screen recording showing the problem → the fix → the final result.

This cool interactive component is coming to Framer Components.

I named it “Flipping Cards” - simple and easy to find.

It’ll be free for a limited time, so be prepared, I’ll let you know when it’s live.

Thanks to Shruti Khandelwal for the idea to publish it.

Responsiveness part 2!

Responsive at any size - any screen :)

Built this Framer site from scratch.

The interesting part wasn't the design.

It was building this team section with a flipping interaction and full-card expansion on hover.

Here's the final result.

Fixing and developing Framer websites live on YouTube.

Come say hi! If you need your website fixed, I’ll do it for free during this live.

https://www.youtube.com/watch?v=oeDt1bV2iDE

Premium quality

Developed in Framer💫

From Figma design to fully working simple landing page.

Design is made by @_heyfaisal (on X/twitter)

Framer development (Figma to Framer) part 4!

Design is not mine, credits to @_heyfaisal

Framer development (Figma to Framer) part 3

Design is not mine, credits to @_heyfaisal (on X/twitter)