The Design Encyclopedia for Figma

The world's largest Figma UI kit.

8 followers

The world's largest Figma UI kit.

8 followers

The Design Encyclopedia is a Figma Design System containing thousands of meticulously documented UI tokens, UI components, page layouts, interaction patterns, and visualizations.

The Design Encyclopedia for Figma gallery image

Payment Required

Launch tags:Design Tools•User Experience

Launch Team

Unblocked AI Code Review — High-signal comments based on your team's context

High-signal comments based on your team's context

Promoted

GitNoter

Nice collection

Report

5yr ago

Hobby Disco

Maker

@vivekweb2013 Thanks, Vivek! I appreciate the support :)

Report

5yr ago

tl;dv

Really nice gallery. Super useful for product makers with no specific design background!

Report

5yr ago

Hobby Disco

Maker

@carlo_thissen Thanks, Carlo! I appreciate it very much :)

Report

5yr ago

Stratum UI Design Kit for Figma

Wow, that's HUGE! How much time did you spend? How did you stay motivated?

Report

5yr ago

Hobby Disco

Maker

The web tool was built during quarantine last year, and the design companion for Figma took the past two months :)

Report

5yr ago

Great work @thejmoore! (Also nice name 😏 ) I feel like most teams could use something like this. I love how the smaller components are nicely general while you provide super specific use-cases in the larger interaction patterns and page templates. Posting in my team's slack now!

Report

5yr ago

Hobby Disco

Maker

@_jonlehman Cheers, Jon (nice name 😏)! That was definitely the intent with components and patterns, so I'm happy that was clear. Let me know if you have any questions or suggestions!

Report

5yr ago

Find Your First Frontend Job

Wow, it's huge.

Report

5yr ago

Hobby Disco

Maker

Browse the Figma file: https://www.figma.com/file/5faUr... Watch a tour of the system:

--- Hi everyone! My name is Jon Moore, and I'm a practicing product designer with 10 years of experience in the field. Having not gone to school for UX design, I've learned and honed my skills over the years on real design projects with real clients. I initially created the Design Encyclopedia as a free resource for aspiring designers and product professionals to have a place to go for inspiration–or simply to learn the difference between a checkbox and a radio button. Sites like Dribbble and Behance are wonderful for eye candy, but there wasn't a resource that collected EVERYTHING in one place. I started by simply documenting everything in Airtable, then decided to teach myself Webflow by building a simple site. It's now been live for almost a year and people have reacted well to it. I've long been a Sketch user (and huge fan), but saw that the industry was starting to shift to Figma, and I needed to learn the tool so that I could better support my design team. I decided that designing a system with everything from my Design Encyclopedia was a good way to learn the tool. Months later, I've finally completed the system. It will continue to grow as I encounter new design components, interaction patterns, page templates, and visualizations. I hope you enjoy!

Report

5yr ago

Nice collection, i bought the encyclopedia and i want to know why the encyclopedia doesn't update when you make changes to it. Is it a one off payment because I noticed changes have been made on the original source file but its not reflecting on mine.

Report

4yr ago

Browse the Figma file: https://www.figma.com/file/5faUr... Watch a tour of the system: