FrameKit: Design System Generator Plugin for Framer
Kanishak Mahendiratta
FrameKit: Design System Generator Plugin for Framer
About the Project:
Setting up a design system in Framer is an hour of clicking. Six
heading levels, paragraph styles, then a colour palette with all
its tints and shades, built by hand, every project, and it drifts
the moment anyone adds a style. FrameKit does the whole setup in
one action. I designed and built it solo, and it's live on the
Framer marketplace.
What I Used to Complete This Job:
React for the plugin interface inside the Framer editor
Cloudflare Workers running the generation at the edge, so the
heavy work never freezes the editor
Supabase storing saved style systems, so a system built once
can be reused across projects
Type scales generated from a base size and a ratio: H1 to H6
plus paragraph styles in one click
Colour systems computed from source colours, with consistent
tints and shades
One-click apply and re-apply across a whole project, so
updating the system never means rebuilding it
The Results:
FrameKit is live on the Framer marketplace, turning an hour of
design-system setup into one action
Like this project
Posted Jan 2, 2025
A Framer plugin that builds your whole design system in one action: type scales, colour palettes and styles, powered by Cloudflare Workers and Supabase.
