Padding in XD (but retain a minimum size)

Adobe XD is a great tool. & automation is a great approach to make work more easy.
XD provides some features that you can use to semi-automate things.
Padding in components is one of them.
It’s great to create a button, give it a padding & let it auto-grow while changing its label.

But there’s a catch:
When your button has to have a minimum size & the label-text is not wide enough to grant that minimum. That means a loooooot of fiddling while designing, especially when you have lots of states (default, hover, focus, active, deactivated, you name it …)

But wait: there’s a hack!

  1. Create the component
  2. Apply the padding
  3. Add an invisible shape on top of the background shape
  4. Give it the dimensions of minimum size + padding & voilà
Left: Layers Panel, Middle: Design Canvas, Right: Padding Settings

Leave a Reply

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