Back
SIDE PROJECT
A complete design system & UI kit for Framer
In my spare time, I am creating the largest design system for Framer, a new no-code visual website builder - like Figma, but with the ability to publish to the web. This project has challenged my design system craft and taught me valuable skills on building a product from start to finish.
The story on how Framepad came about
I've been using Framer since it launched in March 2022. I've created templates, used it for freelance work, and kept up with the latest features. But starting each project from scratch got tiring, so, a few months ago, I decided to build a complete design system for Framer. I was already making website components like hero sections and navbars for myself, so it made sense to combine them. This allowed me to hone my design system skills and apply what I've learned from Figma to Framer.
How Framepad helps designers build faster in Framer
The Framepad Design System and UI Kit is designed to help designers, developers, and freelancers build websites faster. It includes foundational styles like colors, typography, shadows, and spacing and components such as buttons, badges, tabs, and more. What makes Framepad stand out from competitors is its inclusion of numerous website sections like navbars, hero sections, FAQs, footers and more.
Takeaways
Building this design system and UI kit over the past few months has really helped me hone my design system and system thinking skills. Applying what I have learnt from Figma and translating it to Framer has been an interesting challenge due to the fact that Framer publishes to the web. So elements must be responsive, lightweight and built to be flexible enough to apply to any users project.
This project has reinforced the utility and benefits of involving users early on. I have been building publicly on Twitter, frequently posting about updates about Framepad, asking questions, engaging with my users and seeking their opinions. From this I've received great ideas and strategies on building lighter and more flexible components.
Building my first product has taught me a lot about building a product 0 -> 1 and the intricacies that expand outside of product design. I am still learning, and my knowledge of building a product is still in it's infancy, however this project has prompted me to learn so much more about market research, product development, testing and feedback, scalability, market fit, marketing and go to launch strategies.
Back
SIDE PROJECT
A complete design system & UI kit for Framer
In my spare time, I am creating the largest design system for Framer, a new no-code visual website builder - like Figma, but with the ability to publish to the web. This project has challenged my design system craft and taught me valuable skills on building a product from start to finish.
The story on how Framepad came about
I've been using Framer since it launched in March 2022. I've created templates, used it for freelance work, and kept up with the latest features. But starting each project from scratch got tiring, so, a few months ago, I decided to build a complete design system for Framer. I was already making website components like hero sections and navbars for myself, so it made sense to combine them. This allowed me to hone my design system skills and apply what I've learned from Figma to Framer.
How Framepad helps designers build faster in Framer
The Framepad Design System and UI Kit is designed to help designers, developers, and freelancers build websites faster. It includes foundational styles like colors, typography, shadows, and spacing and components such as buttons, badges, tabs, and more. What makes Framepad stand out from competitors is its inclusion of numerous website sections like navbars, hero sections, FAQs, footers and more.
Takeaways
Building this design system and UI kit over the past few months has really helped me hone my design system and system thinking skills. Applying what I have learnt from Figma and translating it to Framer has been an interesting challenge due to the fact that Framer publishes to the web. So elements must be responsive, lightweight and built to be flexible enough to apply to any users project.
This project has reinforced the utility and benefits of involving users early on. I have been building publicly on Twitter, frequently posting about updates about Framepad, asking questions, engaging with my users and seeking their opinions. From this I've received great ideas and strategies on building lighter and more flexible components.
Building my first product has taught me a lot about building a product 0 -> 1 and the intricacies that expand outside of product design. I am still learning, and my knowledge of building a product is still in it's infancy, however this project has prompted me to learn so much more about market research, product development, testing and feedback, scalability, market fit, marketing and go to launch strategies.
Back
SIDE PROJECT
A complete design system & UI kit for Framer
In my spare time, I am creating the largest design system for Framer, a new no-code visual website builder - like Figma, but with the ability to publish to the web. This project has challenged my design system craft and taught me valuable skills on building a product from start to finish.
The story on how Framepad came about
I've been using Framer since it launched in March 2022. I've created templates, used it for freelance work, and kept up with the latest features. But starting each project from scratch got tiring, so, a few months ago, I decided to build a complete design system for Framer. I was already making website components like hero sections and navbars for myself, so it made sense to combine them. This allowed me to hone my design system skills and apply what I've learned from Figma to Framer.
How Framepad helps designers build faster in Framer
The Framepad Design System and UI Kit is designed to help designers, developers, and freelancers build websites faster. It includes foundational styles like colors, typography, shadows, and spacing and components such as buttons, badges, tabs, and more. What makes Framepad stand out from competitors is its inclusion of numerous website sections like navbars, hero sections, FAQs, footers and more.
Takeaways
Building this design system and UI kit over the past few months has really helped me hone my design system and system thinking skills. Applying what I have learnt from Figma and translating it to Framer has been an interesting challenge due to the fact that Framer publishes to the web. So elements must be responsive, lightweight and built to be flexible enough to apply to any users project.
This project has reinforced the utility and benefits of involving users early on. I have been building publicly on Twitter, frequently posting about updates about Framepad, asking questions, engaging with my users and seeking their opinions. From this I've received great ideas and strategies on building lighter and more flexible components.
Building my first product has taught me a lot about building a product 0 -> 1 and the intricacies that expand outside of product design. I am still learning, and my knowledge of building a product is still in it's infancy, however this project has prompted me to learn so much more about market research, product development, testing and feedback, scalability, market fit, marketing and go to launch strategies.