Design Systems, part 6: Buttons

Featuring the Paddy plugin by David Williames 👍.

Playlist with all of the videos in this series:

Software and services used:

Sketch file created in the tutorial:

For updates and other tutorials, follow me on:

Thanks for watching! :)

#Sketchtutorial #Designsystems #Designtutorial

[NickToyepixels]

Sometimes simple is best. I spent the best part of 2 hours trying to understand Paddy, and when I started introducing icons and text, with variable colours of text and button styles, it just wasn't working for me.

I reckon in time it will become much better at this kind of stuff, it certainly has promise - but right now I have to agree with your decision to go with the first set of buttons.

[naxun]

Paddy now doesn't work as expected, but Padding function in Anima works fine.

[ivanbadia]

Excellent video on buttons and the options available when designing buttons. I was reviewing the video again and I started looking at options of bad UX when mixing sizes as you pointed out while using Padding plugin.

Starbucks recently updated their app and the new reload details screen has two buttons on the bottom right. They are stacked with different colors, size, shadow that clashes with the item below, and visually look unbalanced. Is this the inconsistency in a design UX you pointed out?

[ivanbadia]

I've not been able to follow this series using Abstract. I keep getting all these conflicts ever since I upgraded to Sketch 49.

[idesignifyteam]

Hey Christopher, on the paddy plugin mine seems to not do anything when you try to add the padding. Do I have to do something first for it to work? -Best teacher so far

[budsigur]

Hi Christopher, I have a quick question. Why didn't you align the text of the button label vertically? Wouldn't it be better to do it, and then center the label both horizontally and vertically within the artboard? Just curious...

Excellent content btw...keep it up! :)