Obsidian Design System Community File
A Figma design file created as a reference for plugin developers an designers in the Obsidian community.
Overview
I started this project to provide a resource to the Obsidian community and learn about design systems by recreating one. Obsidian has a great design system to learn from because it has both light and dark mode, is available on desktop, tablet, and mobile, and also has a web component (Obsidian Publish). The Figma community file is available on Figma's community website and I continue to update it as I learn more about Obsidian's design system and design systems in general.
Color
Below is a sample of the colors used in the Obsidian app. The colors are being tokenized for use within this Figma file using the Token Studio for Figma plugin.
Components
So far, the most robust component created for this design system is the button which has light and dark variants, with two different types, and two states. More components will be added with this level of fidelity to help designers understand specific details.
Spatial System
Obsidian uses a 4 point grid system.
More
Many more aspects of design systems have been and are being explored in this file including…
Corner radius
Shadows/Elevation
Responsive/Adaptive design
Design Tokens
Typography
Icons
