How To Build a Design System | UXPin

How To Build a Design System | UXPin


Good morning guys I hope you’re all well
what we’re going to do today is talk about design systems. And how you can use
them in UX pin to build component based design libraries for your wire framing
prototyping and interface design needs so UX pin is awesome I’ve been using it
a lot recently in my product design process. I would say that UX pin and web
flow are definitely my to go to in the browser prototyping and design tools
right now. So let’s go ahead and create our first system let’s click create
design system. I wanna create one from scratch. Just let that load and this is
awesome I just I love this so much it just looks such a cool way to create
things on your left you’ve got things like colors and typography assets and UI
patterns that you can add to you can also create subcategories so what I’m
going to do in a second is create a primary and a secondary color palette
and they’re going to be two categories under the main category of colors and
you can also define your own categories as well you see here it’s got the option
to add a new page so you could add you know something completely new a new
category of assets or things that you want to include in your library that
isn’t included here but this is great to get started so what I want to do is add
some colors to my color library and start building out my palette so I use
this website colors.Co it’s great website if you don’t know it check it
out it lets you generate and customize and also look at pre-built color schemes
that you can use for your product design so I’m going to use two blues for my
main for my primary color palette so let’s add one here so we’re going to
build out this color palette let’s add another one here and I’m gonna add in my
red I’m gonna add in my turquoise I’m gonna
add in this kind of gold color as well so let’s do that here now what I’m gonna
do is that’s awesome but what I want to do is create a primary and a secondary
color palette so I’m going to use my two blues as my primary and I’m gonna add a
new one and call that secondary what I’m just gonna do is drag my blues into my
primary color palette and these other colors into my secondary and that’s how
easy it is to build out a color palette in you X pin it’s fuckin badass I love
it we’re gonna hit finish editing just to
save that but what I’m going to do now is also add some images to my design
system so I’m going to go over to my assets mmm upload and I’ve got a load of
images here that I want to upload I’ve just thought about these are just stock
images but what I’ve tried to do is just get some images that are like consistent
in their subject matter and their styling as well this isn’t a website
about skyscrapers that could be might be a bit boring but it depends how much you
like skyscrapers but what it is is just to show you that within the photography
for your brand if you’re building out a brand library and photography something
you’re including you want to think about having a consistent library of
photography where the style of the photography and the way it’s shot is
consistent and matches your brand but that’s this kind of giving you branding
advice there which is not really my qualified area but these images are
pretty massive as well so we’re just gonna up you know let’s just upload them
all because it will look awesome when we go into our into the library later and
we see all our images but that’s going to take a little while so I’m just going
to fast forward and I’ll see in a second they’ve finished uploading as you can
see I’ve got my photography now my assets library but what I want to do is
create a separate category as well here excuse me and call this brand
photography so then we can start dragging these down here creating a
photography library and I could create on a category I call it something like
icons or graphic elements or both even I’ll be pretty cool so there we have our
brand photography if I hit finished editing that all
updates and there we have it we’ve got our colors so our primary and secondary
color palettes and our assets as well so as you can see if we go back to edit
there’s also other stuff we can add we can add things like typography and we
can add UI patterns whatever else we want to define really but we’re going to
look at UI patterns and typography necks so let’s jump into the wireframe that
I’ve created it’s just a simple landing page for a start up and what we want to
do is just look at this and start creating some UI patterns based on the
components that we have on this page so components in the design library are
great because they’re reusable elements that you reuse across your design and
what you can do is you can create one symbol in one place and then you can
reuse that element in multiple places and you can either edit that element so
that it then updates what’s in the library or you can make a clone of that
element and then edit that independently so it doesn’t actually affect what’s
stored in your library so I’ll show you that in just a second that’s pretty
awesome and that gives you a lot of power and flexibility with the design
library. So, oh classic update notification so what we want to do is
look at the design and we want to think what elements are we going to reuse so
we can start here with our cards we’ve got some content cards here we want to
create reusable components from them because a card is something
we’re definitely going to be using a lot across our design so let’s head over to
that design system library let’s put it out since we don’t have any libraries
yet which is actually not true so let’s go back here we want to maybe we need to
refresh this I think because we should we should be able to see this library
that we’ve created we should now be able to see that here yes perfect so if you
look here in our design system which is what we’ve created here we can access it
here in the interface too we can access our colors so if I grab that I can just
change the color of that which is pretty cool we don’t have any textiles we can
access our brand photography and we can now start creating UI patterns so let’s
grab this card and we’re going to click on it and then we just hit UI pattern
and that creates a symbol from that element which is a reusable element now
in our library and we’re just going to call that content card now what I was
saying a minute ago about being able to edit and update things independently
I’ll show you now so what this is you can see by this kind of orange box
around it so this is a normal selected item this is an item that is a component
from a library because it’s got the orange e box around it now if I was to
update the text here if I was to write changes text to something let’s just do
that let’s just call this edit right now if you look over here it says this
element may be out of sync and then it gives me two options
it lets me sync it to my library or lets me sync from the library now if I sink
it to the library what I’m then saying is the changes that I’ve made on this
particular card I want to be updated across all elements within the library
all elements at the same type within the light
breehn now if I say I want to sink it from the library let’s say I do that what that should then do is yeah didn’t wear them but what it
essentially is saying that I’ve made this change but if I then update the
symbol from the library it will change it back to what it was before now
sometimes you want to do that sometimes you want to sometimes you don’t so for
things that are gonna be the same wherever you are across the site for
example your top-level navigation so something like this you basically just
want to keep whatever you change you want to constantly be syncing it back to
the library to update it because the navigation is going to be the same
whatever page you’re on but for something like a card you want you want
the styles and you want the layout so you want you know you want this thumb
now you want this heading you want this text but you don’t necessarily want the
content to be the same because the content isn’t going to be the same for
every single card so in that sense sinking it to and from the library
doesn’t really work because all you’re going to be doing is updating the
element that’s in the library which you don’t want to do so what you can do is
you have a lot you can either detach it which there means it’s completely
removed from the design library now that has some uses but you can also make an
independent copy of the symbol too so if you click clone you then have a copy of
that symbol and you can make changes and updates to this so I could say edit
again here and it then it doesn’t give me the warning then about it being out
of sync from the library because I’ve made a completely separate I’ve made a
completely separate copy of that component so there’s just a few things
to be aware of there when it comes to working with the library and what’s
annoying me is that I thought I had a background on these so let’s just
changed this I just want to add a background to this
card because it’s annoying me that it doesn’t have a background there we go
cool so let’s create a couple more symbols I’ve got a pricing plan here
with some pricing cards so let’s create a symbol in my library or a UI pattern
from that hmm let’s call this pricing card and if we look you see that that’s
they go we can just straight away we’ve got that in a library wherever we are
whatever we’re doing we can drag that out as a reusable symbol and then the
next thing we’re gonna do is create a card from our blog posts cards so
another UI pattern you just click on it you say UI pattern then it adds it to
the library I’m gonna call this blog post card once again wherever we are
drag it out that doesn’t have a background on it that’s annoying me so
this is a classic example of how we could update this so let’s go into this
has changed this element so we’re going to change the fill so it because that
doesn’t have a background and I want every card to have a background what I’m
gonna do is give a background to this particular one and I’m gonna say sync it
to the library right and then if you see here this is a classic example of how it
works a card before didn’t have a background now I had a background that’s
what we want so let’s hit update and now every card I drag out has a background a
white background which is just awesome and that we can see that in navigation
as well as I said earlier let’s make a symbol from this navigation so we’re
gonna create a UI pattern and we’re going to call this top-level let’s call
this primary navigation awesome now this is one example where we
do want a change to be reflected so if I added a new navigation item in on this
page on the home page I would want that to appear on every other page so that’s
another great use for symbols let’s create some buttons we’re going to call
this let’s call this primary button and let’s create some secondary buttons so
our primary buttons they’re solid they’ve got a background and our
secondary buttons just have a no background but they have a border I’m
gonna call this a secondary button now what we can do is also create categories
within this particular category so we’re in like a UI pattern category but we
want to create some sub categories because so we get to a point where we
have a massive design we have loads of different elements we’re going to want
to be able to organize those properly so if you just look over here we can create
a new category we’re going to call this buttons now we’re gonna add our buttons
to that category just drag them that’s weird
let’s refresh it oh okay you have to select an element on
a canvas right should just be able to drag it don’t know why that’s not happy that’s weird I’ll have to find that out
okay so I actually figured out how you do it you have to go into edit mode and
what that lets you then do is select your assets and then drag them into
particular category so just create cards here and then what I want to do if I go
out edit mode I’m just going to create a new category called navigation awesome
so let’s oh let’s go at that perfect cool so you can see my UI path and
libraries coming together obviously I’ve just created it’s a simple wireframe
which is one page you know if you’re making if you had a big product with
loads of screens then this library is just awesome for keeping track of
everything I love it so the next the last thing actually
we’re going to look at in our design system is typographic styles so as I
said earlier if you’re creating wireframes and prototypes you’re not
going to be thinking too much about typography you’re going to perhaps be
thinking about different sizes and hierarchy and stuff like that but you’re
not going to be doing much styling but what we can do is we can still define
our headings and things like that in our design library and that helps us build
out our prototypes in a very component-based way and then when we
transition to our design phase of the project we can then actually look at you
know things like weights and color and font font families and things like that
so we’re gonna add a textile here and this is great as you see we’re gonna
call this heading one and we’ve made a textile from our heading we’ve got
heading one it’s in Arial which is kind of boring but you know I’m not going to
I’m gonna use that in the actual design and it tells us our font weight and our
font size as well and we can build out a couple more let’s call this heading two heading free let’s call this subheading
maybe not the best label for it don’t know if that’s really a subheading and
that’s just cool this let’s call this excerpt because it’s a blog post excerpt
and there you see you know we’re building out our typographic styles in
that design system it’s just fantastic everything’s just in one place you’ve
got a lot of brogue buttons here and so if we bounce back now to our design
system view we see all those changes that I’ve made from my wireframe here in
the Edit view they’ve now been reflected in my design library so if I go to my
typography I’ve built out my textiles and my typographic library and I’ve also
got all my UI patterns which is just I just fucking awesome love it click on
here you can even get you can even see it as a preview and you can also get all
the CSS styles for it as well so those developers that hate sketch and I hate
going into sketch or Photoshop or whatever you use to try to figure out
dimensions and settings and things like that they don’t need to worry about that
anymore you can you know you can send them these snippets of code and if
you’re building from your prototypes which most likely you are you can get
all the CSS you need from this it’s just fucking badass I love it so that’s
pretty much it I think I’ve just given you a bit of an overview of what design
systems and design libraries are within UX pin and I’ve showed you just how to
add some of the core features such as building out color palettes creating
typographic Styles adding assets to the library and creating UI patterns as well
from your from MIT design so yeah I hope you hope
you enjoyed it I’m gonna be doing shitload more UX tutorials UX pin
tutorials over the next coming weeks because as I said it’s something I’ve
really been using a lot recently and I it’s just fucking awesome I love it
so don’t forget to subscribe to my channel if you’re not a subscriber and
don’t forget to leave a like or a comment on this video if you liked it if
you didn’t like it you can leave a thumbs down I won’t hate you if you’ve
got comments or questions leave a comment or a question on the video too
and I’ll try and get back to you and that’s it so I’ll see you guys next time

12 thoughts on “How To Build a Design System | UXPin

  1. My company recently switched over to UXPin. We are working towards a full online styleguide via UXPin's Design Systems and I am struggling with a few aspects (our product is fairly complex). Do you understand how multi-state objects work, and how to successfully make them?

  2. A small suggestion. Your presentation is kinda bit boring. You take a lot of breaks and lacks the voice energy to keep us watching the video. also I think a lot of people might not want to see you testing a product on a tutorial-ish video, but wanna see how it works. Maybe it's just me, But I don't expect to hear "It should work, but It isn't now" kinda vibe on a tutorial. That's just my two cents. Keep up the good work man. Cheers!

  3. How do you organize your components that have a different displays in desktop/tablet/mobile? For example, a card where 2 buttons may be side by side in desktop, but stacked in mobile?

Leave a Reply

Your email address will not be published. Required fields are marked *