Comprehensive UI Kit for Modern Web Development
Role
UI/UX Designer
Design System Creator
Platform
Figma Design File
React Library
Web Components
Scope
Design Tokens
30+ Components
Component Blocks
Status
Open Source
Community Ready
My First UI Kit for Figma
EtnaUI represents my first comprehensive UI kit designed for the Figma community. This open-source design system provides designers and developers with a complete toolkit for building modern web applications, featuring carefully crafted components, design tokens, and accessibility-first principles.
What is EtnaUI?
EtnaUI is a comprehensive design system that bridges the gap between design and development. It includes a complete collection of design tokens, reusable components, and pre-built blocks that enable teams to create consistent, accessible, and beautiful user interfaces without starting from scratch.
The Challenge
Many design teams struggle with inconsistent UI patterns, time-consuming component creation, and the challenge of maintaining design-development alignment. Existing UI kits often lack comprehensive documentation or fail to address accessibility requirements from the ground up.
EtnaUI was created to solve these challenges by providing a complete, accessibility-first design system that works seamlessly across design and development workflows.
Complete Design System Package
Design Tokens
A collection of tokens supporting the kit's construction, enabling easy customization without extensive time investment. Includes colors, typography, spacing, and semantic tokens.
30+ Components
EtnaUI offers a diverse array of open-source, front-end components that are reusable and customizable. All components are rigorously checked for adherence to accessibility standards.
Component Blocks
Assembled multiple components that enhance efficiency and offer a centralized approach to common UI patterns and layouts.
React Library
A comprehensive compilation of front-end components built using the React library, ready for immediate implementation in your projects.
Component Library
Built for Modern Development
EtnaUI is designed with modern development practices in mind, ensuring seamless integration between design and development workflows while maintaining the highest standards of accessibility and user experience.
Design Principles
- Accessibility-first approach with WCAG compliance
- Consistent visual language across all components
- Scalable design tokens for easy customization
- Mobile-first responsive design patterns
Developer Experience
- Ready-to-use React components with TypeScript
- Comprehensive documentation and usage examples
- Design-to-code workflow optimization
- Open-source community contribution model
Modern Development Tools
EtnaUI is built using cutting-edge technologies and development tools to ensure optimal performance, maintainability, and developer experience. The React library implementation was developed by my former colleague Matteo Cavallo.
Core Technologies
- React: Popular JavaScript library for building user interfaces
- TypeScript: Adds static typing to JavaScript for robust development
- Vite: Fast, modern, and lightweight frontend build tool
- CSS Modules: Scoped and modular CSS for component encapsulation
Development Tools
- Storybook: Interactive development environment for UI components
- ESLint: Pluggable linting utility for JavaScript and TypeScript
- Material Design Icons: Beautiful, crafted icons from Google
- Component Testing: Interactive testing and documentation