المسافات | كود المنصات

مسافات DGA سلّم بوحدة 4px. وخطوة المسافات في Tailwind هي 4px أيضًا (0.25rem)، فتقابل كل خطوة في DGA أداة رقمية مباشرة: --spacing-4 (‏16px) هو p-4، و--spacing-80 (‏320px) هو p-80.

السلّم

p-00px

p-0.52px

p-14px

p-1.56px

p-28px

p-312px

p-416px

p-520px

p-624px

p-832px

p-1040px

p-1248px

p-1664px

p-2080px

p-2496px

p-32128px

p-40160px

p-48192px

p-56224px

p-64256px

p-80320px

p-96384px

p-120480px

p-140560px

p-160640px

p-180720px

p-192768px

p-2561024px

p-3201280px

p-3601440px

p-4001600px

p-4801920px

الأسماء بمقاسات الملابس

يسمّي Figma الخطوات أيضًا بالمقاسات. وهي تقابل السلّم الرقمي، لذلك استخدم الأداة الرقمية.

الرمز	يساوي	القيمة
الرمز:`--spacing-none`	يساوي:p-0	القيمة:0px
الرمز:`--spacing-xxs`	يساوي:p-0.5	القيمة:2px
الرمز:`--spacing-xs`	يساوي:p-1	القيمة:4px
الرمز:`--spacing-sm`	يساوي:p-1.5	القيمة:6px
الرمز:`--spacing-md`	يساوي:p-2	القيمة:8px
الرمز:`--spacing-lg`	يساوي:p-3	القيمة:12px
الرمز:`--spacing-xl`	يساوي:p-4	القيمة:16px
الرمز:`--spacing-2xl`	يساوي:p.5	القيمة:20px
الرمز:`--spacing-3xl`	يساوي:p-6	القيمة:24px
الرمز:`--spacing-4xl`	يساوي:p-8	القيمة:32px
الرمز:`--spacing-5xl`	يساوي:p-10	القيمة:40px
الرمز:`--spacing-6xl`	يساوي:p-12	القيمة:48px
الرمز:`--spacing-7xl`	يساوي:p-16	القيمة:64px
الرمز:`--spacing-8xl`	يساوي:p-20	القيمة:80px
الرمز:`--spacing-9xl`	يساوي:p-24	القيمة:96px
الرمز:`--spacing-10xl`	يساوي:p-32	القيمة:128px
الرمز:`--spacing-11xl`	يساوي:p-40	القيمة:160px

رموز المكوّنات والتخطيط

تتغير هذه الرموز مع حجم العرض. ولكل منها أداة لكل خاصية مسافة: p-card-lg-padding وgap-section-gap وpx-buttons-md-padding وهكذا.

الأداة	حاسوب	لوحي	جوال
الأداة:`p-card-lg-padding`	حاسوب:32px	لوحي:24px	جوال:16px
الأداة:`p-card-lg-gap`	حاسوب:24px	لوحي:24px	جوال:16px
الأداة:`p-card-md-gap`	حاسوب:24px	لوحي:20px	جوال:12px
الأداة:`p-card-md-padding`	حاسوب:32px	لوحي:24px	جوال:16px
الأداة:`p-card-sm-padding`	حاسوب:32px	لوحي:24px	جوال:16px
الأداة:`p-card-sm-gap`	حاسوب:24px	لوحي:20px	جوال:12px
الأداة:`p-section-padding`	حاسوب:32px	لوحي:24px	جوال:16px
الأداة:`p-section-gap`	حاسوب:32px	لوحي:24px	جوال:16px
الأداة:`p-text-content-gap`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-icon-text-gap`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-buttons-group-gap`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-links-group-gap`	حاسوب:12px	لوحي:12px	جوال:8px
الأداة:`p-control-vertical-gap`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-accordion-lg-header-padding`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-accordion-lg-header-gap`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-accordion-md-header-padding`	حاسوب:12px	لوحي:12px	جوال:12px
الأداة:`p-accordion-md-header-gap`	حاسوب:48px	لوحي:12px	جوال:12px
الأداة:`p-accordion-sm-header-padding`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-accordion-sm-header-gap`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-tooltip-gap`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-tooltip-padding`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-input-padding`	حاسوب:0px	لوحي:0px	جوال:0px
الأداة:`p-input-gap`	حاسوب:0px	لوحي:0px	جوال:0px
الأداة:`p-textarea-padding`	حاسوب:0px	لوحي:0px	جوال:0px
الأداة:`p-textarea-gap`	حاسوب:0px	لوحي:0px	جوال:0px
الأداة:`p-label-gap`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-field-label-gap`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-horizontal-tab-md-button-v-padding`	حاسوب:12px	لوحي:12px	جوال:8px
الأداة:`p-horizontal-tab-md-button-h-padding`	حاسوب:16px	لوحي:16px	جوال:12px
الأداة:`p-tab-button-gap`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-horizontal-tab-sm-button-v-padding`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-horizontal-tab-sm-button-h-padding`	حاسوب:12px	لوحي:12px	جوال:8px
الأداة:`p-vertical-tab-md-button-v-padding`	حاسوب:6px	لوحي:6px	جوال:4px
الأداة:`p-vertical-tab-md-button-h-padding`	حاسوب:12px	لوحي:12px	جوال:8px
الأداة:`p-vertical-tab-sm-button-v-padding`	حاسوب:2px	لوحي:2px	جوال:2px
الأداة:`p-vertical-tab-sm-button-h-padding`	حاسوب:6px	لوحي:6px	جوال:4px
الأداة:`p-table-cell-gap`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-table-cell-v-padding`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-table-cell-h-padding`	حاسوب:16px	لوحي:16px	جوال:12px
الأداة:`p-control-title-error-gap`	حاسوب:16px	لوحي:12px	جوال:8px
الأداة:`p-control-switch-description-padding`	حاسوب:64px	لوحي:64px	جوال:64px
الأداة:`p-control-switch-error-icon-gap`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-progress-indicator-gap`	حاسوب:8px	لوحي:8px	جوال:16px
الأداة:`p-progress-text-content-side-padding`	حاسوب:16px	لوحي:16px	جوال:12px
الأداة:`p-control-radio-description-padding`	حاسوب:48px	لوحي:48px	جوال:48px
الأداة:`p-control-radio-error-icon-gap`	حاسوب:16px	لوحي:16px	جوال:48px
الأداة:`p-pagination-item-md-padding`	حاسوب:6px	لوحي:6px	جوال:6px
الأداة:`p-pagination-item-sm-padding`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-pagination-item-lg-padding`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-pagination-items-padding`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-button-menu-gap`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-button-menu-v-padding`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-button-menu-h-padding`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-modal-gap`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-modal-padding`	حاسوب:24px	لوحي:24px	جوال:16px
الأداة:`p-modal-content-bottom-padding`	حاسوب:16px	لوحي:16px	جوال:8px
الأداة:`p-buttons-lg-gap`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-buttons-lg-padding`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-buttons-md-gap`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-buttons-md-padding`	حاسوب:12px	لوحي:12px	جوال:12px
الأداة:`p-buttons-sm-gap`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-buttons-sm-padding`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-link-md-gap`	حاسوب:8px	لوحي:8px	جوال:4px
الأداة:`p-link-sm-gap`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-notification-gap`	حاسوب:16px	لوحي:16px	جوال:8px
الأداة:`p-notification-padding`	حاسوب:16px	لوحي:16px	جوال:12px
الأداة:`p-notification-h-padding`	حاسوب:24px	لوحي:24px	جوال:16px
الأداة:`p-select-padding`	حاسوب:0px	لوحي:0px	جوال:0px
الأداة:`p-select-gap`	حاسوب:0px	لوحي:0px	جوال:0px
الأداة:`p-notification-alert-v-padding`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-notification-alert-h-padding`	حاسوب:24px	لوحي:24px	جوال:16px
الأداة:`p-notification-toast-v-padding`	حاسوب:16px	لوحي:16px	جوال:12px
الأداة:`p-notification-toast-desktop-h-padding`	حاسوب:24px	لوحي:24px	جوال:16px
الأداة:`p-notification-toast-mobile-h-padding`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-label-container`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-input-container-padding-start`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-input-container-padding-end`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-icon-enteredtext`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-icon-helpertext`	حاسوب:8px	لوحي:8px	جوال:8px
الأداة:`p-prefix-suffix-padding-start`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-prefix-suffix-padding-end`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-prefix-suffix-label-icon`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-prefix-suffix-padding-block`	حاسوب:2px	لوحي:2px	جوال:2px
الأداة:`p-dropdown-container-padding-inline`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-dropdown-icon-content`	حاسوب:4px	لوحي:4px	جوال:4px
الأداة:`p-textarea-container-padding-inline`	حاسوب:16px	لوحي:16px	جوال:16px
الأداة:`p-textarea-container-padding-block`	حاسوب:12px	لوحي:12px	جوال:12px

نقاط التوقف

يعرّف Figma أنماط الحاسوب واللوحي والجوال دون عروض بالبكسل. ويستخدم كود المنصات العروض أدناه؛ والسبب موضَّح في صفحة الاختلافات.

البادئة	الحد الأدنى للعرض	ملاحظات
البادئة:`sm:`	الحد الأدنى للعرض:640px (40rem)	ملاحظات:
البادئة:`md:`	الحد الأدنى للعرض:768px (48rem)	ملاحظات:يبدأ نمط اللوحي في Figma
البادئة:`lg:`	الحد الأدنى للعرض:1024px (64rem)	ملاحظات:يبدأ نمط الحاسوب في Figma
البادئة:`xl:`	الحد الأدنى للعرض:1280px (80rem)	ملاحظات:
البادئة:`2xl:`	الحد الأدنى للعرض:1536px (96rem)	ملاحظات:

الشبكات

شبكة Figma	الأعمدة	المسافة بين الأعمدة	الهامش	عرض المحتوى
شبكة Figma:`desktop`	الأعمدة:12	المسافة بين الأعمدة:24px	الهامش:112px	عرض المحتوى:1216px
شبكة Figma:`tablet`	الأعمدة:6	المسافة بين الأعمدة:32px	الهامش:32px	عرض المحتوى:704px
شبكة Figma:`mobile`	الأعمدة:4	المسافة بين الأعمدة:16px	الهامش:16px	عرض المحتوى:343px

عرض حاوية الصفحة 1280px (max-w-content) مع حشوة 32px على الحاسوب و16px على الجوال. وتتوقف الفقرات عند 720px (max-w-paragraph).

اتجاه RTL والخصائص المنطقية

استخدم الأدوات المنطقية فقط، ليعمل تخطيط واحد بالعربية والإنجليزية:

استخدم	لا تستخدم
`ms-` و`me-`	`ml-` و`mr-`
`ps-` و`pe-`	`pl-` و`pr-`
`start-` و`end-`	`left-` و`right-`
`border-s` و`border-e`	`border-l` و`border-r`
`rounded-s-` و`rounded-e-`	`rounded-l-` و`rounded-r-`
`text-start` و`text-end`	`text-left` و`text-right`

تفشل اختبارات المستودع عند أي أداة أو خاصية CSS فيزيائية لليسار أو اليمين.

استخدم	لا تستخدم
`ms-` و`me-`	`ml-` و`mr-`
`ps-` و`pe-`	`pl-` و`pr-`
`start-` و`end-`	`left-` و`right-`
`border-s` و`border-e`	`border-l` و`border-r`
`rounded-s-` و`rounded-e-`	`rounded-l-` و`rounded-r-`
`text-start` و`text-end`	`text-left` و`text-right`

السلّمCopy Anchor Link

الأسماء بمقاسات الملابسCopy Anchor Link

رموز المكوّنات والتخطيطCopy Anchor Link

نقاط التوقفCopy Anchor Link

الشبكاتCopy Anchor Link

اتجاه RTL والخصائص المنطقيةCopy Anchor Link