• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to use Padding within a component

New Here ,
Feb 09, 2022 Feb 09, 2022

Copy link to clipboard

Copied

Good afternoon comunity, I am having some trouble to define padding for some of my component in Adobe XD. I am looking to add padding for single elements inside a component (on the red zones on both pictures). Does anyone know how to do this ? It goes with a question about adding a minimum padding (for example, "be responsive until a certain measure)

Thanks all !

 

BScreenshot 2022-02-09 at 15.16.53.pngScreenshot 2022-02-09 at 15.18.17.png

 

{Renamed By MOD}

TOPICS
Design , How to , Prototyping

Views

493

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 09, 2022 Feb 09, 2022

Hi, it looks like actually you're talking about spacing between elements, and margins in some cases (I'm not sure if you're familiar with the concept of padding/margin but here's an article if you'd like to check: https://uxdesign.cc/margin-padding-ed80042494e1 ) Thinking what I'd do in a similar situation, maybe defining an invisible/zero opacity element in a certain size (like 30px width etc) as a spacing component (with a name like: 30pxHorizontalSpace etc) might be a flexible solution. And/o

...

Votes

Translate

Translate
Community Expert ,
Feb 09, 2022 Feb 09, 2022

Copy link to clipboard

Copied

Hi, it looks like actually you're talking about spacing between elements, and margins in some cases (I'm not sure if you're familiar with the concept of padding/margin but here's an article if you'd like to check: https://uxdesign.cc/margin-padding-ed80042494e1 ) Thinking what I'd do in a similar situation, maybe defining an invisible/zero opacity element in a certain size (like 30px width etc) as a spacing component (with a name like: 30pxHorizontalSpace etc) might be a flexible solution. And/or, creating seperate components for the common "in between/seperator" elements like "|", ">" and placing them into an invisible rectangle which has required amount of padding might be another flexible solution. Thanks for sharing since this might be something I also and some other users might want to use, hope this helps!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 09, 2022 Feb 09, 2022

Copy link to clipboard

Copied

Yes exactly, thank you very much. I was indeed wondering if Adobe XD provided margins, but then thanks to your explanations "shadow spacing" will be my best option ! Thank you very much !

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 09, 2022 Feb 09, 2022

Copy link to clipboard

Copied

LATEST

Glad I was helpful, margins are in a grey area in comparison to padding since it is something that happens outside of an element, but for now as you said "shadow spacing", or using an "outer element as a container for padding" etc might help, happy designing!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines