Shuddle Design System
Took the Design Systems 101 course from Design System University, to familiarize myself more with design systems. Part of the course was to make a few screens that used 5 components for a made-up company called “Shuddle”. The logo and a few color hex codes for a color palette were provided. So I took that and twisted it a little by also adding style tokens, multiple color palettes in both dark and light mode, and creating an interactive prototype mock-up.
Style, Components, Colors, and Typography
You can view the different pages in my file by opening the menu in the top left corner of the embedded file below.
Color tokens for the design system, are set up as variables to change components between color palettes and color modes easily.
For the components, I build the prototype animations within them. Instead of having to build out an animation later when I have to put something together, doing this saves time, and from jobs I have worked I have gotten asked if I can put together a prototype and the components we have on hand don’t have any type of animations built in. Hints why you may see a few extra things on a few of the component pages.
a weird bug could happen while looking at the embedded file, which shows some components mixed with different color palettes. If this happens, you can open my file here.
Variables demo
Built my components to be tied to the color variables, doing this allows me only to make one component vs making a variant for each color I have in my color palette.
Prototype
Here is an embedded Figma prototype of the app. Right now is just the home page (will be adding more to it). That is fully interactive, scroll, swipe, toggle between light and dark mode. If for some reason you are having trouble with the embedded version or want to view it in a larger window, here is a link to the prototype.