Design system tool for building React applications. Offers components, design tokens, and seamless integration with tools like Figma. Provides documentation for developers and designers.
Features
Components
Perfectly crafted React components designed to speed up the development process, compatible with Tetrisly for Figma.
Customization
Easily customizable components to fit different project needs, allowing developers to tailor the design system.
Design Tokens
Predefined design tokens for consistent styling across the project, simplifying design management.
Plugin for Figma
Figma plugin that integrates visual design directly into Figma, making design work more seamless.
Icons
A set of icons provided for use within the design system to maintain visual consistency.
Documentation
Clear usage rules and documentation provided to ensure easy implementation and effective use by developers and designers.
Community
Access to a community for support and sharing ideas, enhancing collaborative efforts.
Design System Ready
Pre-designed components that can be used without needing additional design work.
Documentation
Comprehensive guide available in Storybook detailing implementation instructions.
Perfect nested set of components
Provides a flawless and organized system that keeps all components neatly nested, reducing clutter and improving efficiency within Figma.
Design Tokens as Variables
Allows each design token to function as a variable. This means consistent design elements across projects can be easily updated by changing the token, enhancing adaptability.
Auto Layout 5.0
Utilizes Auto Layout 5.0 for components and pages, which enables more flexible designing and dynamic resizing of elements to fit varying content sizes.
Wizard Designs
Enables users to explore and test designs interactively before finalizing them, allowing for better iteration and design precision.
Icons
Includes over 55 icons, perfectly aligned with 8-pixel grid, providing a consistent and clean iconography suite.
TypeScript Support
Includes comprehensive TypeScript support to enhance code quality and provide better developer experience.
Pre-packaged Components
Offers a variety of pre-packaged, ready-to-use components to jumpstart your React projects quickly.
Customization Variables
Allows for easy customization within React components to tailor-fit design requirements.
Design Tokens
Provides a system to export design tokens, making design elements reusable and consistent across projects.
Theming Support
Built-in theming capabilities let you customize the look and feel of your components to match brand aesthetics.
Interactive Storybook
Includes a Storybook for interactive documentation and testing of components.
6000+ Customizable Icons
A collection of over 6000 icons that can be customized to fit various design needs. These icons can be adjusted in terms of color, size, and stroke weight.
Different Formats
Icons are available in multiple formats, including SVG, Figma, Sketch, and XD, making them versatile for different design platforms.
Regular Updates
The icon set receives frequent updates which include new icons and improvements to existing ones.
Light and Dark Modes
Icons are made to work seamlessly in both light and dark interfaces, catering to various design aesthetics.
Perfectly crafted components
Offers a set of pre-designed UI components for consistent and customizable designs, enhancing productivity and saving time.
Design Tokens
Facilitates the application of a standardized set of design values across various platforms, ensuring consistency and easy updates.
Dynamic Themeable
Allows for seamless theme switching and customization without the need for additional coding, suitable for design environments with frequent changes.
Colors are contrast-based and intuitive
Utilizes a contrast-based color system to enhance readability and aesthetics, ensuring adherence to WCAG standards.
Unique Product Design
Crafts an interface that encompasses the product's scope and provides detailed requirements for the development stage. Uses wireframing and prototyping in Figma, integrated within a Design System.
Help with Design Systems
Offers custom creation or improvement of Design Systems with a focus on standardization, code enhancement, and process audits.
All-in-one Product Delivery
Encompasses design, front-end, back-end development, and ongoing support, ensuring seamless project execution from concept to completion with an emphasis on tailored, efficient results.