A vast, dynamic design system with hundreds of customizable UI components and templates, ready for Framer deployment and meticulously organized with variables, variants and adaptive layouts. Made from decades of pushing pixels.

About three months ago, as a designer who teaches, I thought what if I could create a UI kit that not only taught designers about the ins and outs of modern design systems but also equipped them with a treasure trove of customizable components? Think of it as your mega toolkit for design. With over 300 components, more than 2,000 Figma variants, and a whopping 2,116 unique icons, it's packed to the brim with everything you need. Plus, it's got Auto Layout and 200+ Variables, all wrapped up in Glass, Outline, and Flat styles. This is decades of my experience as a designer into a single package. But it's not just about quantity. Design tools have evolved so much that you can basically do your adaptive layout. And this project, with its color and shadow systems, gradients, and spacing systems, not only helps you keep up with the pace of modern design but also guides you in creating designs that are modern, functional, and code-friendly. Now, what really sets the DesignCode UI Kit apart is its unique theming. It's got its own distinct vibe, with the background setting the mood, the glass soaking up the colors, and the shadows adding depth. Yet, it's also super flexible. You can switch between light and dark mode, or adjust styles to Glass, Outline, or Flat. Plus, all styles use a blurred layer, perfect for any background, whether it's a desktop or a webpage. So, that's the DesignCode UI Kit in a nutshell. A tool that lets you create beautiful designs with ease. Can't wait to hear what you think! It's currently at 50% off!

@mengto Great work guys! The theming options and flexibility to switch between modes and styles make it even more appealing. Kudos on putting together such a valuable design tool.

@tornike_tsiramua1 Worked really hard a unique theming system, including the various background patterns and 3 distinct styles. Glad it's being noticed. Thank you!

@brendanciccone Wow, thank you so much for purchasing the kit. I will make sure add a lot more components, specifically for modals and tables! :) Btw, if you could add a review on PH, that'd be amazing. Would love to have you as a customer testimonial!

@mengto Looks like a massive resource for all the designers out there. Happy to see you launching this. I wish you good luck :) I'd be happy to share across my designer friends and colleagues!

@neelptl2602 Wow, thanks so much Neel for recommending this to your friends and colleagues!

The design is so neat and elegant, congrats!

@julienergan Extra happy to hear the word elegant. :)

While most UI kits out there understandably take a very minimalist approach to appeal to more projects, this UI kit commendably goes against the grain by introducing creative, vibrant diffusions of color and light with glass, line, and flat styling options, all with accompanying dark and light modes. All of these components could easily be used as the foundation for a new project that wants to stand out. Components are thoughtfully laid out and crafted with variables for styling, there are some solid example screens, and you get not only Figma components, but also Framer components, which makes this even more worth it in my book.

很有用的设计教学网站，有很多未来感的设计作品，我很喜欢，推荐给其他设计师

This is easily one of the most complete and concise design kits I have found. Included instructions are clear and exhaustive. The designs themselves are unique, distinct and downright beautiful. After purchasing I experienced some user error with the download and the support line quickly responded with a short video to highlight my error and resolved the issue on the first try. 10/10 highly recommend.

DesignCode UI

300+ beautiful and functional Figma and Framer components

Do you use DesignCode UI?