Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mosaicra-ui/figma-designs

Mosaicra UI Figma Design System
https://github.com/mosaicra-ui/figma-designs

design design-system figma figma-design hacktoberfest hacktoberfest-accepted hacktoberfest-approved hacktoberfest2024 hacktoberfest2024-approved mosaicra mosaicra-ui open-source resuable-component ui-library

Last synced: 10 days ago
JSON representation

Mosaicra UI Figma Design System

Awesome Lists containing this project

README 

        
# **Mosaicra UI Figma Design System**



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.



## 🎨 **What's Inside**



This Figma design system includes a wide array of pre-designed components, such as:



1. **Buttons** – Primary, secondary, icon buttons, and floating action buttons.

2. **Forms** – Input fields, dropdowns, toggles, radio buttons, and checkboxes.

3. **Typography** – Headings, paragraphs, blockquotes, and lists.

4. **Cards** – Information cards, profile cards, and product cards.

5. **Navigation** – Menus, tabs, breadcrumbs, sidebars, and pagination.

6. **Modals & Popups** – Dialog boxes, overlays, and notification alerts.

7. **Tables** – Data tables, sortable tables, and paginated tables.

8. **Icons** – Scalable vector icons ready for use in your designs.

9. **Media** – Image galleries, video and audio players.

10. **Charts** – Line charts, bar charts, pie charts, and scatter plots.

11. **Loaders** – Spinners, progress bars, and skeleton screens.

12. **Layouts** – Grid systems, flexbox layouts, and containers.



## 🔗 **Available Previews**



Check out the live previews of our **Subscription Page Design** created using different technologies:



- **HTML, CSS, and JavaScript Preview**: [Subscription Page 01](https://mosaicra-ui.github.io/figma-designs/subscription-page-01/html-css-js/index.html)

- **TailwindCSS Preview**: [Subscription Page 01](https://mosaicra-ui.github.io/figma-designs/subscription-page-01/tailwindcss/index.html)



---



## 📥 **Getting Started**



### 1. **Accessing the Figma File**



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](https://www.figma.com).



### 2. **Duplication**



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.



### 3. **Using the Components**



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.



### 4. **Design Tokens**



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.



---



## 🛠 **Customizing the Design**



### 1. **Colors**



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.



### 2. **Typography**



Change the font style, size, or weight:



- Select a text component.

- In the **Text** section of the right-hand panel, modify the typography styles.



### 3. **Component States**



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.



---



## 🧩 **Design Guidelines**



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.



---



## 📝 **Versioning and Updates**



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`



---



## 🤝 **Contributing to the Design System**



If you have suggestions for new components, enhancements, or bug fixes:



1. **Fork this repository** (if applicable).

2. Create a new branch with your changes.

3. Submit a **pull request** with a detailed description of your modifications.

4. 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!



---



## 📧 **Contact Us**



For any questions or design requests, feel free to contact the Mosaicra team:



- Email: [[email protected]](mailto:[email protected])

- GitHub: [github.com/mosaicra-ui](https://github.com/mosaicra-ui)



---



**Mosaicra UI** – Simplifying complex UIs for both designers and developers. Happy designing! ✨