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.