We are excited to announce that the Figma Community file for Medusa UI is now live. The React component library for Medusa UI was introduced together with the general availability of Admin Extensions to make it simple to build beautiful extensions. Now, plugin authors (and anyone else curious) can build their designs in Figma using the same system our design team uses. Below, we share some of the core principles of the Medusa UI design system and its significance.
Focus on function
The fundamental principle driving Medusa UI is simplicity, functionality, and low maintenance. We've streamlined the system to be lightweight yet effective, emphasizing the essentials without unnecessary complexities. Our approach is to include just the right amount of tokens and components so the designer using the system feels empowered and not overwhelmed.
Medusa UI embodies this principle through its straightforward approach. It is based on just two core elements: Tokens and Components. Tokens are named after their functionality and not their value. At first glimpse, this seems like a lot, but once you start using the system, you feel the speed. For instance, when designing, one can easily access default background colors by typing "bg-base" or default text colors with "fg-base”
All with variations referring to their function like Hover, Pressed, etc. You don’t need to remember what shade of Grey you decided to go with when you cursor over Secondary Buttons. Similarly, typography is organized into groups like Headers, Text, and Code. For some components, we use the very popular principles of Atomic Design Systems, but only if/when it makes sense. Some components are just components if it is faster to use and build it that way. We don’t rely on some heavy guidelines other than keep asking ourselves when we add new stuff: Does this speed up the design and development process?
What's next?
If you want to dive deeper, we encourage you to explore Admin Extensions as a place to experiment with Medusa UI to integrate with the Admin Dashboard seamlessly. Furthermore, we are eager to get suggestions from the community on improvements to the system or requests for additional components to include. Reach out on Discord or Github to share your thoughts.
