Welcome to the Mosaicra UI Figma Design System! This design kit provides you with a comprehensive collection of UI components, layouts, and design tokens tailored for creating stunning and highly customizable user interfaces. The Figma design files align with our development components, making it easier for designers and developers to collaborate seamlessly.
This Figma design system includes a wide array of pre-designed components, such as:
- Buttons – Primary, secondary, icon buttons, and floating action buttons.
- Forms – Input fields, dropdowns, toggles, radio buttons, and checkboxes.
- Typography – Headings, paragraphs, blockquotes, and lists.
- Cards – Information cards, profile cards, and product cards.
- Navigation – Menus, tabs, breadcrumbs, sidebars, and pagination.
- Modals & Popups – Dialog boxes, overlays, and notification alerts.
- Tables – Data tables, sortable tables, and paginated tables.
- Icons – Scalable vector icons ready for use in your designs.
- Media – Image galleries, video and audio players.
- Charts – Line charts, bar charts, pie charts, and scatter plots.
- Loaders – Spinners, progress bars, and skeleton screens.
- Layouts – Grid systems, flexbox layouts, and containers.
To access the design system:
- Will be available soon!
- Make sure you have a Figma account. If you don't have one, you can sign up for free at figma.com.
You can duplicate the file to your own Figma workspace by selecting File > Duplicate. This allows you to customize the components to fit your project's specific needs.
Each component in the design system is fully customizable. To use a component:
- Select the desired component from the Components Panel on the left sidebar.
- Drag and drop the component into your artboard.
- Customize the styles (colors, typography, spacing) as per your requirements.
The design system includes consistent design tokens such as:
- Color Palette – Primary, secondary, and neutral colors.
- Typography – Font sizes, weights, and styles.
- Spacing – Margins and paddings to maintain uniformity.
- Shadows – Predefined shadow values for a polished look.
You can easily adapt the color scheme to fit your brand:
- Select the component you'd like to modify.
- Go to the Design panel and adjust the color styles.
Change the font style, size, or weight:
- Select a text component.
- In the Text section of the right-hand panel, modify the typography styles.
Each interactive component (buttons, forms, etc.) comes with various states like:
- Default
- Hover
- Active
- Disabled
To switch between states, simply click on the component and select the appropriate variant from the Variants panel.
To ensure consistency across all designs:
- Use components from the system whenever possible.
- Follow the grid and layout guidelines for uniform spacing and alignment.
- Apply consistent color and typography styles to create a cohesive look.
- Keep accessibility in mind by following WCAG standards when modifying colors and components.
We are committed to continuously improving the design system. Updates to the design components and new features will be shared on GitHub and Figma.
- Current Version:
v1.0.0
If you have suggestions for new components, enhancements, or bug fixes:
- Fork this repository (if applicable).
- Create a new branch with your changes.
- Submit a pull request with a detailed description of your modifications.
- Designers from our team will review your submission.
Feel free to reach out via our GitHub repository if you encounter issues or want to contribute to the design system. We welcome all contributions!
For any questions or design requests, feel free to contact the Mosaicra team:
- Email: serverx.org@gmail.com
- GitHub: github.com/mosaicra-ui
Mosaicra UI – Simplifying complex UIs for both designers and developers. Happy designing! ✨