Creating a Style Guide with Adobe Xd - Tutorial

In this video we will design and prototype a simple style guide using Adobe Xd. We will also set it up to be shared for clients or team members.
-

Become a Member (get project files & more):

Sign up for Webflow:

My Desk Setup for Design & YouTube:

Learn UI/UX Design and Prototyping using Adobe XD:
-

Visit my website:

Find me on other social media platforms:

Discord server:
-

Disclaimer: This video and description contains affiliate links. By using any of my affiliate links, I receive a very small commission at no extra cost to you. Thank you for supporting the channel!

Music: Epidemic Sound
Creating a Style Guide with Adobe Xd - Tutorial
#AdobeXd #CalerEdwards #AdobeXdTutorial

[joanneenglish]

Quick, easy to understand, and very helpful! Thank you so much!

[iDacian]

Well, well, WELL.
Did you somehow knew i need something like this or you have some kind of mind reading device.

I just Started using style guides for my clients cause i found myself all over the place. Now with a style guides client and me have a proper scope of design to follow and don't fall for micro design changes.

My style guides are a bit more in depth and design like you said Buttons, Shadows, form boxes, hover State and so much More. It usually take me 2-3h for a complete style guide design not including research.

But the time i spend on styles guide's is soooo worth it for me and my clients.

Awesome quick content video.
Thank you.

[evykramer]

This is really great. Like you read my mind. Thank you.

[analysemarches]

really awesome. great content thx a lot

[hahuyenchi]

Thank you so much. That's exactly what i need right now!!

[jeromekidman]

This is a nice simple way to create a style guide. Did not think to use Adobe XD for as well. Nice one

[CodeWithNiks]

Thanks for sharing this, It's useful for sure!

[SnipeNScoreProductions]

Awesome! I find this would be a lot easier than using other software because of the snapping of the shapes and such :)

[samueljlarson]

I learned so much from this! Thank you. Sub'd

[MoritzFischer]

So sime yet so useful. Thank you so much for this tutorial!

[sethaaron]

This is awesome!!! Thanks for creating this content!!!

[rodanus]

Another day, another video! Keep it up 👏🏻

[Jeshurun]

Hello, thanks for your teaching. I have learned a lot so far. Where did you get the typography characters?

[TenaciousDM]

Is there a way to paste the full alphabet for fonts quickly? Rather than type it all out?

[MegaSHAKII]

How would we make the spacing section?

[victornzedu]

wow, always wanted to know how to fix positions when scrolling. always something new form you. thanks Caler. 🥳❤️

by the way can I get the codes for the dark theme swatches please?

[catemulligan]

How to create a centered html page using a stylesheet? I have looked everywhere for a solution ...my attempts to center all failing

[michaeltretiak]

When you're Jira task is "Update Style Guide" ... Caler: Hold my beer.
Never thought about prototyping my style guide for my devs! Super good idea!
I do find starting with typography being easier, then you can use it through your whole style guide.

[abraiyan]

Helvetica it's like Apple for fonts.

[icyater]

Man! I just unsubscribed and subscribe myself again. I really appreciate for this video. Thank you!