Nebula UI
Design System
Atoms
6
Molecules
10
Nebula UI is a design system I created while exploring Figma's new variables feature. It’s all about bringing order to the chaos of design by offering reusable components that ensure consistency and efficiency. With Nebula UI, you can save time, reduce repetitive tasks, and keep your designs uniform and flexible.
Buttons
Button
Button
Button
Button
Button
Button
Button
Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Link Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Problem at hand
Each time I initiated a new project or entered a new project phase, I found myself starting from scratch, setting up a new component library. This resulted in repeatedly designing the same components, with the style adapting each time to meet specific functionalities.
I had to:
Recreate previous components.
Compile all past use cases and generate use cases for each component.
How Nebula UI helps?
Nebula UI brings consistency to your designs with a unified visual language, ensuring that colours, elements, and components stay aligned across all your projects. It’s packed with a comprehensive toolkit that makes the design process smoother and more efficient, helping you create interfaces effortlessly.
Whether you’re working on a small project or something bigger, Nebula UI scales easily to fit your needs. It’s also super easy to pick up, so you can quickly integrate it into your workflow without a steep learning curve.
The design system isn’t just functional—it’s beautiful, too. Nebula UI offers a rich colour palette, dynamic shadows, and carefully crafted details that enhance the look and feel of your interfaces, making them a joy to use. Plus, its adaptable components let you customise everything to fit the unique needs of your project, all while keeping things consistent and flexible.
q
w
e
r
t
y
u
i
o
p
a
s
d
f
g
h
j
k
l
z
x
c
v
b
n
m
123
space
return
Full Name
*
₹
Placeholder
kg
Validation text
September 2021
SuN
MON
TUE
WED
THU
FRI
SAT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Submit
Clear
Label
Important
Label
Breakpoint Indicator
Desktop
1440px
Tablet
768px
Mobile
375px
What does the style guide consists of?
In-page annotations: Simple, step-by-step instructions on how to use each component in the library.
Branding: A breakdown of the colours and typography that bring your brand to life.
Spacing Guidelines: Tips on keeping just the right amount of space between your design elements.
Layout Grids: Easy-to-follow grids that help keep your layouts consistent.
Shadows and Blur: How-to's on adding shadows and blur for a touch of depth and style.
Icon Pack & Misc Icons: A handy collection of icons to keep your visual language on point, plus some extras.
Breakpoint Indicators: Clear markers to help you nail responsive design across different screen sizes.
What does the component library consists of?
Component name:
A clear and straightforward name for each UI component, so there’s no mix-up. A good name means the component does exactly what it's supposed to, no hiccups.
Component states:
Ideas for how the component should look by default and how it changes when interacted with.
Annotations:
Quick in-page notes and descriptions to help you easily identify and understand each component.
Breakpoints indicators:
Guides for screen sizes and breakpoints, making it easier for developers to optimise designs across different devices.
To keep the system scalable for multiple users, I followed atomic design principles and used nested components. By leveraging component properties, I made variants easier to manage. Figuring out which components can be reused and which ones are just for edge cases is something I’m continually learning.
Nebula UI is a design system I created while exploring Figma's new variables feature. It’s all about bringing order to the chaos of design by offering reusable components that ensure consistency and efficiency. With Nebula UI, you can save time, reduce repetitive tasks, and keep your designs uniform and flexible.
Design System
Nebula UI
Atoms
6
Molecules
10
Problem at hand
Each time I initiated a new project or entered a new project phase, I found myself starting from scratch, setting up a new component library. This resulted in repeatedly designing the same components, with the style adapting each time to meet specific functionalities.
I had to:
Recreate previous components.
Compile all past use cases and generate use cases for each component.
How Nebula UI helps?
Nebula UI brings consistency to your designs with a unified visual language, ensuring that colours, elements, and components stay aligned across all your projects. It’s packed with a comprehensive toolkit that makes the design process smoother and more efficient, helping you create interfaces effortlessly.
Whether you’re working on a small project or something bigger, Nebula UI scales easily to fit your needs. It’s also super easy to pick up, so you can quickly integrate it into your workflow without a steep learning curve.
The design system isn’t just functional—it’s beautiful, too. Nebula UI offers a rich colour palette, dynamic shadows, and carefully crafted details that enhance the look and feel of your interfaces, making them a joy to use. Plus, its adaptable components let you customise everything to fit the unique needs of your project, all while keeping things consistent and flexible.
What does the style guide consists of?
In-page annotations: Simple, step-by-step instructions on how to use each component in the library.
Branding: A breakdown of the colours and typography that bring your brand to life.
Spacing Guidelines: Tips on keeping just the right amount of space between your design elements.
Layout Grids: Easy-to-follow grids that help keep your layouts consistent.
Shadows and Blur: How-to's on adding shadows and blur for a touch of depth and style.
Icon Pack & Misc Icons: A handy collection of icons to keep your visual language on point, plus some extras.
Breakpoint Indicators: Clear markers to help you nail responsive design across different screen sizes.
What does the component library consists of?
Component name:
A clear and straightforward name for each UI component, so there’s no mix-up. A good name means the component does exactly what it's supposed to, no hiccups.
Component states:
Ideas for how the component should look by default and how it changes when interacted with.
Annotations:
Quick in-page notes and descriptions to help you easily identify and understand each component.
Breakpoints indicators:
Guides for screen sizes and breakpoints, making it easier for developers to optimise designs across different devices.
To keep the system scalable for multiple users, I followed atomic design principles and used nested components. By leveraging component properties, I made variants easier to manage. Figuring out which components can be reused and which ones are just for edge cases is something I’m continually learning.