Joia Design System - Figma

This design system will help you save time and money.

Improve consistency across platforms and build more intuitive products by having a scalable and re-usable design system. It allows you to build many projects with a single source of truth for every product experience.

Joia Design System is reusable, robust, and well-documented, making the design process more efficient, and ultimately, more cost-effective. Allowing your team to create a unified language within and between cross-functional teams and visual consistency across multiple products. 

Click here to view Joia Demo 

🤓  💚

What do you get?

• 400+ Components
• Auto-Layout applied to facilitate resizing of most components
• Set properties & variations for ease of use
• Templates for Dashboards, Lading Pages & Mobile
• Full instructions on how to use & customize items

Structure of the system

Atoms 

are basic building blocks of matter, with distinct properties:

Colors, Typography, Grids, Spacing Guides, Shadows & Lines, Icons

Molecules 

are groups of elements (or atoms) that function together as a unit:

Alerts, Accordions, Avatars, Bradcrumbs, Checkboxes, Radio Buttons, Data Pickers, Dropdowns, Inputs, Modals, Pagination, Slides & Graphs, Tables & Lists, Tags, Toggles & Tooltips.

Organisms 

are groups of molecules and atoms bound together to form a more sophisticated structure:

Headers & Menus + Sidebar Menus

Templates 

are a group of organisms working together:

Dashboard, Landing Pages & Mobile