Thank you so much for the video! Realy helped me out creating a guide for my front-end school program! Even though I went with my own twist and put everything inside the same artboard. I am really curious what hour manager software you use? (popping up in your notifications manager) And yes, your colluge is wrong :D
your styleguide size is equal to artbord or i can use w1440px styleguide my website artbord w1920px ? but i think that the setup with different size are not equal proportions?! I hoppe i don't talk shit ;)
I am new to XD. I am only seeing people build Character style guides for one single screen resolution..... Since you need different sizes for desktop, tablet, and mobile, won't the style guide panel get quite full? Is there an easier way in XD which I am just not aware of? Ideally I just want to make a character style, then that character style will adjust to whatever I set it on different canvas sizes.... So I don't have to have multiple character styles for H1, H2, etc... for each screen resolution.
Hey. Don't worry about the style panel getting full, you can change the size of it, or you could make multiple style panels for each breakpoint. I don't think there's a way to do it automatically, you'll need to manually set up style for every breakpoint if that's what your project needs. I don't tend do make text styles for tablet and mobile because I already know in my head how I'll be building it and how I'll make the text responsive. I guess it depends on project and developer. As I develop the sites myself, the design phase is a little easier as I can skip some steps. And sometimes I code the headings to be VW instead of pixels so they automatically respond to all screen sizes then I don't need to worry about selecting different px sizes for every breakpoint. I'll be showing a much more thorough method in Figma soon.
Excellent tutorial, thanks! I did run into one issue that I could not figure out - after you created the button component and dragged a second instance onto the artboard, you were able to select the first button and change the button color, without changing the text color. Whenever I attempt this, the entire component fills with the new color, and my text disappears. How is it that you only select the button and not the text? I'm sure I'm just missing something simple, but it has me stumped. Thanks!
Hey Erik - try double clicking on the rectangle shape of the button so you just have that selected. If you just click once, you've selected the whole "group" and will therefore be changing the colour of everything inside; the rectangle and the text. Hope that works for you!
@@wearestudiotonic Thanks for the quick reply! That indeed work, I appreciate it. This was my first tutorial of yours, but I've Liked the vid and subscribed, and look forward to diving in to more!
Erik Swartz thanks for the support - means a lot. Although I’ve left XD for dead and am spending all my time in Figma now. Lots more Figma tuts coming soon!
Hello, the video pace is perfect and it's very detailed. I just have a quick question, Is it possible to (with one click) move a style guide over to an existing file? I'm working in a group and we have two separate files going, one has the lofi wireframes and the other is the style guide but in order to move onto hifi we need the style guide to be in the same file, correct?
Liberty Lang hey - yes they need to be in the same file I believe, but don’t quote me on that as I don’t actually use XD anymore so there may have been an update. I would look into Figma - you can have style sheets and design systems that span multiple documents if you’re on a paid plan. Or even on the free plan you can have one document with multiple pages which might help!
Hey, Tom! Great tuts! Would you consider creating a few videoe on Email testing? This is very crucial for beginners. That'd be really kind of you to make some videos on this subject. Thanks a lot! 💜
Great videos dude, lovin them! I have a problem though when I add a character style, I'm not able to edit them. There's no Ag like you get. Any ideas, I'm on windows 10. Any help would be appreciated. Subbed....
Sebastian I make style guide first. Then wireframe using the styles so you get font sizes right. I usually make my brand colour in the styles a black to start, so wireframe in that colour for buttons, highlights etc. Then when wires are signed off, you just change that black colour to the brand colour and all the wires will update to the right colour. No right or wrong way to do it really! Just whatever makes sense with you. You’ll refine your progress the more sites you design.
Sebastian that’s a whole different story my friend. It depends how it’s being built. The web developer would usually handle that. I design all my sites in Figma now and then develop them either with Webflow or I work with a dev who just writes the code how they like to.
Wow - what a great tutorial. Fantastic facts and design advices. ❤
Thanks mate. Simple and clean explanation. Love the way you talk. Cheers
Awesome guide!!
Thank you for great resources and for not stalling. good pace and info.
It was really helpful! Thank you so much.
You deserve more views. thanks for this video
Awesome vid
I learned a lot of helpful stuff. Thanks!
Nice man
Please keep going. I’m loving your videos 🥰🇿🇦👊🏽
KOOL K thanks Kris, I will indeed keep going! If you like my videos you might like my newsletter www.tompiggott.co.uk/contact#newsletter
Awesome work!!! This will be the process I'll use :)
Thank you so much for the video! Realy helped me out creating a guide for my front-end school program! Even though I went with my own twist and put everything inside the same artboard. I am really curious what hour manager software you use? (popping up in your notifications manager) And yes, your colluge is wrong :D
Thanks man, this helped me alot :)
You're welcome dude, glad it helped
your styleguide size is equal to artbord or i can use w1440px styleguide my website artbord w1920px ? but i think that the setup with different size are not equal proportions?! I hoppe i don't talk shit ;)
what is the mathematical formula for typography. is there a link for the theory?
Very helpful, thanks for doing this video. Especially the type ratios etc and links to resources :)
nice bro ski !
nice!
I am new to XD. I am only seeing people build Character style guides for one single screen resolution..... Since you need different sizes for desktop, tablet, and mobile, won't the style guide panel get quite full? Is there an easier way in XD which I am just not aware of? Ideally I just want to make a character style, then that character style will adjust to whatever I set it on different canvas sizes.... So I don't have to have multiple character styles for H1, H2, etc... for each screen resolution.
Hey. Don't worry about the style panel getting full, you can change the size of it, or you could make multiple style panels for each breakpoint. I don't think there's a way to do it automatically, you'll need to manually set up style for every breakpoint if that's what your project needs. I don't tend do make text styles for tablet and mobile because I already know in my head how I'll be building it and how I'll make the text responsive. I guess it depends on project and developer. As I develop the sites myself, the design phase is a little easier as I can skip some steps. And sometimes I code the headings to be VW instead of pixels so they automatically respond to all screen sizes then I don't need to worry about selecting different px sizes for every breakpoint. I'll be showing a much more thorough method in Figma soon.
Excellent tutorial, thanks! I did run into one issue that I could not figure out - after you created the button component and dragged a second instance onto the artboard, you were able to select the first button and change the button color, without changing the text color. Whenever I attempt this, the entire component fills with the new color, and my text disappears. How is it that you only select the button and not the text? I'm sure I'm just missing something simple, but it has me stumped. Thanks!
Hey Erik - try double clicking on the rectangle shape of the button so you just have that selected. If you just click once, you've selected the whole "group" and will therefore be changing the colour of everything inside; the rectangle and the text. Hope that works for you!
@@wearestudiotonic Thanks for the quick reply! That indeed work, I appreciate it. This was my first tutorial of yours, but I've Liked the vid and subscribed, and look forward to diving in to more!
Erik Swartz thanks for the support - means a lot. Although I’ve left XD for dead and am spending all my time in Figma now. Lots more Figma tuts coming soon!
@@wearestudiotonic Ok...good to know. I'm relatively new to XD, so checking out Figma won't be too much of a regression. Cheers!
Hello, the video pace is perfect and it's very detailed. I just have a quick question, Is it possible to (with one click) move a style guide over to an existing file? I'm working in a group and we have two separate files going, one has the lofi wireframes and the other is the style guide but in order to move onto hifi we need the style guide to be in the same file, correct?
Liberty Lang hey - yes they need to be in the same file I believe, but don’t quote me on that as I don’t actually use XD anymore so there may have been an update. I would look into Figma - you can have style sheets and design systems that span multiple documents if you’re on a paid plan. Or even on the free plan you can have one document with multiple pages which might help!
Hey, Tom! Great tuts! Would you consider creating a few videoe on Email testing? This is very crucial for beginners. That'd be really kind of you to make some videos on this subject.
Thanks a lot! 💜
Adnan Amin sure. I’ll add it to my list :)
@@wearestudiotonic Thank you! 😊
Great videos dude, lovin them! I have a problem though when I add a character style, I'm not able to edit them. There's no Ag like you get. Any ideas, I'm on windows 10. Any help would be appreciated. Subbed....
Had to uninstall v XD 34.2.12 and install v XD 33.1.12 which solved my problem.
King Henry glad you got it sorted!
Is styleguide bevor wireframe or after? tell me steps from zero to hero.
Sebastian I make style guide first. Then wireframe using the styles so you get font sizes right. I usually make my brand colour in the styles a black to start, so wireframe in that colour for buttons, highlights etc. Then when wires are signed off, you just change that black colour to the brand colour and all the wires will update to the right colour. No right or wrong way to do it really! Just whatever makes sense with you. You’ll refine your progress the more sites you design.
how do you config then for css from adobe xd?
Sebastian that’s a whole different story my friend. It depends how it’s being built. The web developer would usually handle that. I design all my sites in Figma now and then develop them either with Webflow or I work with a dev who just writes the code how they like to.
Loves ir