DesignCode UI
A comprehensive UI kit with hundreds of Figma components and Framer templates for building modern websites.
| What is it | A comprehensive UI kit with hundreds of Figma components and Framer templates for building modern websites. |
|---|---|
| Pricing | Freemium |
| Free tier | Yes |
| Platform | Web Application |
| Best for | Building modern website interfaces, Creating design systems for projects |
| Domain registered | 2023 |
Data updated Aug. 1, 2026
What does DesignCode UI do?
DesignCode UI is a comprehensive design system that provides hundreds of ready-to-use UI components for Figma and Framer. The kit includes buttons, cards, navigation elements, and complete page templates that are organized with design variables, variants, and adaptive layouts. Everything is structured to work seamlessly between design and development workflows, making it easy to maintain consistency across projects.
The system stands out for its extensive theming capabilities and meticulous organization. With over 300 components, 2,000+ variants, and 2,116 unique icons, designers can quickly assemble professional interfaces without starting from scratch. The components are optimized for Framer integration, allowing for a smooth transition from design to a functional website. The kit is built with decades of UI/UX design expertise, focusing on practical usability rather than flashy trends.
This tool is particularly valuable for UI/UX designers and web developers who need to create modern, functional websites efficiently. It's ideal for freelance designers working on client projects, agency teams establishing design systems, or anyone building websites with Framer who wants to accelerate their workflow while maintaining high design standards.
Key features
What makes it stand outWho is DesignCode UI for?
Who benefits most from this toolPricing
Free tier available — start without a credit cardBasic
- 50 components
- 200+ Figma variants
- 1,000 unique icons
- Auto Layout
- Glass style only
- Figma only
- Lifetime updates
- Unlimited projects
- Single user license
All-Access
- All 300+ components
- 2,000+ Figma variants
- 2,116 unique icons
- Auto Layout, 200+ Variables
- Glass, Outline, Flat styles
- Figma & Framer components
- Lifetime updates
- Unlimited projects
- Single user license
Team
- All 300+ components
- 2,000+ Figma variants
- 2,116 unique icons
- Auto Layout, 200+ Variables
- Glass, Outline, Flat styles
- Figma & Framer components
- Lifetime updates
- Unlimited projects
- Up to 5 users license
Trust & presence
Gallery
Click any image to enlargeSimilar tools
Figma AI
Verified
UX Design
Design tokens are an integral part of design system. Figma styles are not enough to create all tokens. Start with Figma styles, and go beyond! This plugin create token inside Figma file/library. It will help to keep in sync all tokens and elements properties.
Codejet
Verified
Developer Tools
Convert Figma designs into production-ready code instantly using AI — includes visual editor and one-click publishing
1UI
Verified
Ui Design
AI tool that generates production-ready UI designs from text prompts or screenshots, with direct export to Figma and code.
Anima
Verified
UX Design
Anima allows humans to generate UX designs with AI, based on their Figma, Brand, or live website. Designers, product managers, and everyone can vibe-code on-brand with Anima. For AI agents, Anima can generate high-end UX projects in a single shot, starting from: Prompt, Clone website, Figma link. The result is a live playground for your human to vibe-code, and you could also download it. Anima design skill for agents (OpenClaw, Claude Code, Codex): https://skill.animaapp.com
UXMagic.ai
Verified
UX Design
AI-powered UI generator — turn text prompts, images, or URLs into Figma-ready designs and code in seconds.
Relume
Verified
Website Designer
Search our library of 1,000+ components, copy with one click and paste them into your Webflow or Figma project. You can also create components for personal use, clients or the Webflow community. Simply paste in components from your Webflow project, save them to a folder and share it to anyone.
DesignQA
Verified
Bug Reports
AI-powered Chrome extension that finds and fixes UI bugs automatically — select element, describe issue, get code fix in seconds.
components.ai
Verified
Design Generator
Visual design tool for creating responsive components and themes without code — export to React, JSX, SVG, CSS, and more