Articles, Blog

Adobe XD Just Changed The Game – Padding (New Feature)

February 7, 2020


Hey, what’s up guys in this quick Adobe XD tutorial I’m gonna show you how to create a button like this Where if you change the text or the pattern stays the same it’s coming up now. Let’s jump straight in so Auto pattern is kind of a new thing that’s been just released in December 2019 for Adobe XD and All we need to do is create a button together I’ll show you how to do that and I’ll show you how to set the pattern now So to create a button we select from the left hand menu because we select this we’d select our rectangle tool We’ll give it a fill Let’s give a crap. I’m quite taking this call at the realm. It’s kind of like a coral color. I Do like it? So that’s just crap. I’ll create a really big button for you. So create this big coral button I’ll make it a pill shape by dragging the corner in So there’s a couple of ways. So this is one of the new things as well this corner drug You can also select the number here Or you could do each corner individually if you select it like this But sometimes you want to do that was I’m just gonna create Drag it right into into pill Then I’m gonna get my text tool and on top of this. I’m just gonna put some tag so so they can lick me So one of the cool things about the text tool is now if you click this button here in the text point text it then Points, it puts the text right in the center of the text box and that’s really good for when you want to align So I’ll just select both for them Then I’ll centrally aligned that basically liner and then I’ve got my boss in there and all you need to do is check Sometimes it doesn’t actually put it perfectly so I’d like to do it by eye I move up one or two pixels So, there we go and then I’ve got my button And then what you want to do is you want to check how much space in your actually wants on each side of it So I could create a possum which had loads of loads of space I’m just gonna create something You can do this by hour if you did it by numbers on the Line though. Centrally, I think that looks about right to me. So I’ll select bow for them. And then the key thing here is You looking a layout if I collect command G I group them I then get this new pattern option and I can switch it on here So there’s a couple of things I can do if I hold the tilde key and I move my mouse around You can see the numbers here. So I’ve got 94 22, and these could all be changed individually here So if I wanted the neaten it up I could do 20 90 20 90 and that just nathan’s up the space in two whole numbers And then what your see is now, I will click and I’ll change the text I’ll type and it’ll just grow go back into pattern You can also click this button here which will make it the same size all the way around so I could then add at 40 So I always advise people doesn’t look great when it when it’s the same size or all the way around I like it to have more space on the sides. I have a little play around with it. See what the size ins Like that’s all for me today. Check out school Anthony come with a common view only three more videos like this I’ve got a free course on there a Community is growing. I’m gonna drop the slack linking in the comments Let me know what you think of these videos do any more doing until next time keep designing

No Comments

  • Reply Victor Alexandrov February 5, 2020 at 1:00 pm

    Bro, this feature is been a while already in Figma

  • Leave a Reply