How I built my first Framer site and made a free component pack!
A first-person story of moving from Figma to a live Framer site, tackling forms, animations, and reusable components, and turning the result into a free component pack.
Why we picked it
It captures the messy, real-world learning curve of a first Framer build, with practical takeaways around forms, components, and design handoff.
What you’ll learn
- Start a real Framer site after designing in Figma
- Solve form and component challenges without a developer
- Build reusable components and a free component pack
- Ship a client-ready studio site with animations and forms
Who it’s for
Product designers and first-time Framer builders looking for a relatable, end-to-end build story.
Open this article at the source
medium.com/design-bootcamp
Related tutorials
More from design patterns and other beginner resources3 picks
Utilizing collection lists in Framer
Official lesson on repeating indexes: insert a collection list, bind card fields, then sort, filter, limit, and paginate.
How to add dynamic filters to CMS lists
Help Center guide to interactive filters — search, tabs, toggles, dropdowns, and checkboxes on published collection lists.
Framer CMS Tutorial: Build a Blog or Portfolio
Step-by-step 2026 article for shipping a blog or portfolio: collections, fields, detail pages, lists, filters, and CMS SEO basics.