DesignCode UI

Name: DesignCode UI
Rating: 5.0 (3 reviews)

300+ beautiful and functional Figma and Framer components

5.0•3 reviews•

128 followers

300+ beautiful and functional Figma and Framer components

5.0•3 reviews•

128 followers

•

•

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.

Free Options

Launch tags:Design Tools•User Experience•No-Code

Launch Team

Framer AI AgentsDesign and publish professional sites with AI

Promoted

DesignCode UI

Maker

📌

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!

Report

3yr ago

@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.

Report

3yr ago

DesignCode UI

Maker

@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!

Report

3yr ago

DesignCode UI

Maker

@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!

Report

3yr ago

Meshy

@mengto congrats！

Report

3yr ago

Statused

Your landing page is absolutely stunning, which serves as a great selling point to your customers 😁 love it!! What is the real target audience of your product? Existing Framer users? Does one have to be a designer? I'm an indie maker with little-to-no experience with web FE, I wonder if Framer (or your product) would be easy for me to pick up and start from?

Report

3yr ago

DesignCode UI

Maker

@rogeroba Great question, this product is for any maker, designer, developer who wishes to create a site effortlessly. I don't think you need to be a designer since Figma and Framer are fairly easy to learn. What's difficult is coming up with a system, which is the part we do. If you've used either of these tools, you'll find this each to pick up.

Report

3yr ago

Statused

@mengto Thanks for clarifying! Sounds great! 🤩

Report

3yr ago

SyncSignature

@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!

Report

3yr ago

DesignCode UI

Maker

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

Report

3yr ago

Crustdata

Congratulations Team DesignCode UI on your Producthunt launch! Your design system sounds comprehensive and user-friendly, which is highly notable. One suggestion - considering your meticulous organization using variants and adaptive layouts, perhaps a tutorial section demonstrating the usage and flexibility of these components could be a valuable addition. Everyone loves a tool paired with easy learning materials. Keep up the great work!

Report

3yr ago

DesignCode UI

Maker

@manmohit Thanks for the suggestion. We have some tutorials inside the Design system itself on how to use it, adaptive layouts, colors, shadows, spacing, etc and I just did a livestream on it: https://www.youtube.com/live/Ato... I agree that we should add a lot more tutorials!

Report

3yr ago

I just bought it and man I am stunned. Your landing page is quiet amazing which actually made me by your product. But once I bought the product it's even better - I have bought ~7-8 Design systems so far and none of them has delivered what this design system has. We are working on creating a Game Server Hosting website, so we wanted to have a cinematic and gaming kind of experience when someone lands on our website, and this design system truly has that vibe which can deliver to what I am looking for my website.

Report

3yr ago

DesignCode UI

Maker

@enon11 Wow, thank you so much Piyush for the kind review. If there's anything we can add to the UI Kit to help you with building your site, please let us know. :)

Report

3yr ago

I have been following your work for years now and absolutely love what you create! It’s inspiring and makes me want to learn the stuff you do and even add some of the things you create and tweak it to make it my own design and add to the websites I create (or at least it gives me the idea on what to create)! The design work you do is just absolutely beautiful! Personally I believe it’s the best design work I have ever seen! I hope you and your team continue to create this good work for many years to come! Amazing job Meng!

Report

3yr ago

Hey there, massive kudos on the launch of the DesignCode UI Kit! This sounds like a game-changer for designers, a real treasure trove of design goodness. I'm really intrigued by the unique theming and the flexibility it offers. Can you share more about how the color and shadow systems work? How can they help in creating more modern, functional, and code-friendly designs? Also, with the huge number of components and variants, how does one navigate or search for specific elements within the kit? Again, congratulations on launching this ambitious project! Can't wait to explore all the design possibilities with the DesignCode UI Kit.

Report

3yr ago

DesignCode UI

Maker

@new_user__29120239998af695869b433 Hi Yara, we have a Preview file for Figma which has multiple pages, including tutorials for colours and drop shadows:https://www.figma.com/file/tMjSw... I also have a long video explaining everything: https://www.youtube.com/live/Ato... If you have any question, please let me know

Report

3yr ago

1 2

5.0

Based on 3 reviews

Review DesignCode UI?

Reviews

Most Informative