223 lines
17 KiB
Markdown
223 lines
17 KiB
Markdown
|
# نظام تصميم مستوحى من Figma
|
|||
|
|
|
|||
|
|
> Category: التصميم والإبداع
|
|||
|
|
> أداة تصميم تعاونية. ألوان متعددة وزاهية، مرحة وإن احتفظت بطابعها المهني.
|
|||
|
|
|
|||
|
|
## 1. الثيم البصري والأجواء العامة
|
|||
|
|
|
|||
|
|
واجهة Figma هي أداة التصميم التي صمّمت نفسها — درس متقن في الرقي الطباعي، يعتمد على خط متغير مخصص (figmaSans) يتراوح بين الرفيع الحاد (وزن 320) والعريض (وزن 700)، مع توقفات عند قيم وسيطة غير مألوفة (330، 340، 450، 480، 540) لا يستكشفها معظم أنظمة الخطوط. يمنح هذا التحكم الدقيق في الوزن كلَّ عنصر نصي ثقلًا بصريًا محسوبًا بدقة، مما يُنشئ تراتبية عبر فوارق دقيقة لا عبر التقابل الحاد بين "العادي والعريض".
|
|||
|
|
|
|||
|
|
تقدّم الصفحة ثنائية مثيرة للاهتمام: واجهة التطبيق صارمة بالأبيض والأسود (يُكشف حرفيًا عن `#000000` و`#ffffff` فقط كألوان)، بينما تنفجر أقسام الهيرو وعروض المنتج بتدرجات لونية متعددة زاهية — أخضر كهربائي، أصفر ساطع، بنفسجي عميق، وردي حار. هذا الفصل يعني أن نظام التصميم ذاته خالٍ من اللون، إذ تُعامَل مخرجات المنتج الملونة باعتبارها المحتوى الأبطال. صفحة التسويق لـ Figma تشبه جدار معرض أبيض يعرض لوحات فنية ملونة.
|
|||
|
|
|
|||
|
|
ما يميّز Figma فوق الخط المتغير هو هندسة الدوائر والحبوب. تستخدم الأزرار نصف قطر 50px (حبة دواء) أو 50% (دائرة مثالية لأزرار الأيقونات)، مما يمنح إحساسًا عضويًا يشبه لوحة أدوات التصميم. مؤشر التركيز ذو الخطوط المتقطعة (`dashed 2px`) هو خيار تصميمي متعمد يستحضر مقابض التحديد في محرر Figma ذاته — لغة واجهة الموقع تستأنس بلغة واجهة المنتج.
|
|||
|
|
|
|||
|
|
**الخصائص الرئيسية:**
|
|||
|
|
- خط متغير مخصص (figmaSans) بأوزان غير مألوفة: 320، 330، 340، 450، 480، 540، 700
|
|||
|
|
- واجهة التطبيق صارمة بالأبيض والأسود تمامًا — اللون موجود فقط في محتوى المنتج
|
|||
|
|
- figmaMono للتسميات التقنية بالأحرف الكبيرة مع تباعد واسع بين الحروف
|
|||
|
|
- هندسة أزرار بشكل حبة دواء (50px) ودائرية (50%)
|
|||
|
|
- خطوط تركيز متقطعة تستحضر مقابض تحديد محرر Figma
|
|||
|
|
- تدرجات هيرو متعددة الألوان الزاهية (أخضر، أصفر، بنفسجي، وردي)
|
|||
|
|
- ميزة OpenType `"kern"` مفعّلة عالميًا
|
|||
|
|
- تباعد سلبي بين الحروف في كل المكان — حتى نص الجسم عند -0.14px إلى -0.26px
|
|||
|
|
|
|||
|
|
## 2. لوحة الألوان وأدوارها
|
|||
|
|
|
|||
|
|
### الألوان الأساسية
|
|||
|
|
- **الأسود الخالص** (`#000000`): كل النصوص، كل الأزرار الصلبة، كل الحدود. اللون الوحيد للواجهة.
|
|||
|
|
- **الأبيض الخالص** (`#ffffff`): كل الخلفيات، الأزرار البيضاء، النص على الأسطح الداكنة. النصف الآخر من الثنائية.
|
|||
|
|
|
|||
|
|
*ملاحظة: يستخدم موقع تسويق Figma هذين اللونين فقط لطبقة الواجهة. تظهر جميع الألوان الزاهية حصريًا في لقطات الشاشة المنتجية، وتدرجات الهيرو، والمحتوى المضمّن.*
|
|||
|
|
|
|||
|
|
### الأسطح والخلفيات
|
|||
|
|
- **الأبيض الخالص** (`#ffffff`): خلفية الصفحة الأساسية وأسطح البطاقات.
|
|||
|
|
- **الأسود الزجاجي** (`rgba(0, 0, 0, 0.08)`): طبقة داكنة خفية للأزرار الدائرية الثانوية والتأثيرات الزجاجية.
|
|||
|
|
- **الأبيض الزجاجي** (`rgba(255, 255, 255, 0.16)`): طبقة زجاج مثلجة للأزرار على الأسطح الداكنة أو الملونة.
|
|||
|
|
|
|||
|
|
### نظام التدرجات
|
|||
|
|
- **تدرج الهيرو**: تدرج متعدد الألوان الزاهية يجمع بين الأخضر الكهربائي والأصفر الساطع والبنفسجي العميق والوردي الحار. هذا التدرج هو البصمة البصرية لقسم الهيرو — يمثّل إمكانات الإبداع التي توفرها الأداة.
|
|||
|
|
- **تدرجات أقسام المنتج**: قد تستخدم مناطق المنتجات الفردية (التصميم، وضع المطوّر، النماذج الأولية) ثيمات ألوان مميزة في عروضها.
|
|||
|
|
|
|||
|
|
## 3. قواعد الطباعة
|
|||
|
|
|
|||
|
|
### عائلة الخطوط
|
|||
|
|
- **الأساسية**: `figmaSans`، مع بدائل: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
|
|||
|
|
- **أحادية العرض / التسميات**: `figmaMono`، مع بدائل: `figmaMono Fallback, SF Mono, menlo`
|
|||
|
|
|
|||
|
|
### التراتبية
|
|||
|
|
|
|||
|
|
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|
|||
|
|
|-------|------|-------|-------|--------------|--------------|---------|
|
|||
|
|
| عرض / هيرو | figmaSans | 86px (5.38rem) | 400 | 1.00 (محكم) | -1.72px | أقصى تأثير، تتبع متطرف |
|
|||
|
|
| عنوان قسم | figmaSans | 64px (4rem) | 400 | 1.10 (محكم) | -0.96px | عناوين أقسام المميزات |
|
|||
|
|
| عنوان فرعي | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | نص قسم مؤكد |
|
|||
|
|
| عنوان فرعي خفيف | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | نص قسم خفيف الوزن |
|
|||
|
|
| عنوان ميزة | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | عناوين بطاقات عريضة |
|
|||
|
|
| جسم كبير | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px إلى -0.14px | أوصاف ومقدمات |
|
|||
|
|
| جسم / زر | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px إلى normal | جسم قياسي، تنقل، أزرار |
|
|||
|
|
| جسم خفيف | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px إلى normal | نص جسم خفيف الوزن |
|
|||
|
|
| تسمية أحادية | figmaMono | 18px (1.13rem) | 400 | 1.30 (محكم) | 0.54px | تسميات أقسام بأحرف كبيرة |
|
|||
|
|
| أحادية صغيرة | figmaMono | 12px (0.75rem) | 400 | 1.00 (محكم) | 0.6px | علامات صغيرة جدًا بأحرف كبيرة |
|
|||
|
|
|
|||
|
|
### المبادئ
|
|||
|
|
- **دقة الخط المتغير**: يستخدم figmaSans أوزانًا لا تلامسها معظم الأنظمة — 320، 330، 340، 450، 480، 540. يُنشئ هذا تراتبية عبر فوارق دقيقة في الوزن لا عبر قفزات درامية. الفرق بين 330 و340 يكاد يكون غير محسوس لكنه ذو دلالة هيكلية.
|
|||
|
|
- **الخفة كأساس**: يستخدم معظم نص الجسم أوزانًا بين 320–340 (أخف من "العادي" 400 المعتاد)، مما يخلق تجربة قراءة أثيرية ومتنفسة تنسجم مع جماليات أداة التصميم.
|
|||
|
|
- **الكيرنينج في كل مكان**: كل عنصر نصي يُفعّل ميزة OpenType `"kern"` — الكيرنينج ليس اختياريًا، بل هيكلي.
|
|||
|
|
- **التتبع السلبي بشكل افتراضي**: حتى نص الجسم يستخدم تباعد حروف -0.1px إلى -0.26px، مما يجعل النص محكمًا بشكل عالمي. يزداد ضغط نص العرض إلى -0.96px و-1.72px.
|
|||
|
|
- **الأحادي للبنية**: figmaMono بأحرف كبيرة مع تباعد موجب (0.54px–0.6px) يُنشئ تسميات إرشادية تقنية.
|
|||
|
|
|
|||
|
|
## 4. تصميمات المكونات
|
|||
|
|
|
|||
|
|
### الأزرار
|
|||
|
|
|
|||
|
|
**أسود صلب (حبة دواء)**
|
|||
|
|
- الخلفية: أسود خالص (`#000000`)
|
|||
|
|
- النص: أبيض خالص (`#ffffff`)
|
|||
|
|
- نصف القطر: دائرة (50%) لأزرار الأيقونات
|
|||
|
|
- التركيز: خط متقطع بسماكة 2px
|
|||
|
|
- أقصى تركيز بصري
|
|||
|
|
|
|||
|
|
**أبيض حبة دواء**
|
|||
|
|
- الخلفية: أبيض خالص (`#ffffff`)
|
|||
|
|
- النص: أسود خالص (`#000000`)
|
|||
|
|
- الحشو: 8px 18px 10px (عمودي غير متماثل)
|
|||
|
|
- نصف القطر: حبة دواء (50px)
|
|||
|
|
- التركيز: خط متقطع بسماكة 2px
|
|||
|
|
- دعوة للعمل قياسية على الأسطح الداكنة أو الملونة
|
|||
|
|
|
|||
|
|
**زجاجي داكن**
|
|||
|
|
- الخلفية: `rgba(0, 0, 0, 0.08)` (طبقة داكنة خفية)
|
|||
|
|
- النص: أسود خالص
|
|||
|
|
- نصف القطر: دائرة (50%)
|
|||
|
|
- التركيز: خط متقطع بسماكة 2px
|
|||
|
|
- إجراء ثانوي على الأسطح الفاتحة
|
|||
|
|
|
|||
|
|
**زجاجي فاتح**
|
|||
|
|
- الخلفية: `rgba(255, 255, 255, 0.16)` (زجاج مثلج)
|
|||
|
|
- النص: أبيض خالص
|
|||
|
|
- نصف القطر: دائرة (50%)
|
|||
|
|
- التركيز: خط متقطع بسماكة 2px
|
|||
|
|
- إجراء ثانوي على الأسطح الداكنة أو الملونة
|
|||
|
|
|
|||
|
|
### البطاقات والحاويات
|
|||
|
|
- الخلفية: أبيض خالص
|
|||
|
|
- الحدود: لا حدود أو حد أدنى منها
|
|||
|
|
- نصف القطر: 6px (حاويات صغيرة)، 8px (صور، بطاقات، حوارات)
|
|||
|
|
- الظل: تأثيرات ارتفاع خفية إلى متوسطة
|
|||
|
|
- لقطات شاشة المنتج كمحتوى للبطاقة
|
|||
|
|
|
|||
|
|
### التنقل
|
|||
|
|
- شريط تنقل أفقي نظيف على خلفية بيضاء
|
|||
|
|
- الشعار: علامة Figma الكلمية باللون الأسود
|
|||
|
|
- علامات تبويب المنتج: تنقل بعلامات تبويب بشكل حبة دواء (50px)
|
|||
|
|
- الروابط: نص أسود، زينة خط سفلي بسماكة 1px
|
|||
|
|
- دعوة للعمل: زر أسود بشكل حبة دواء
|
|||
|
|
- عند التحويم: لون النص عبر متغير CSS
|
|||
|
|
|
|||
|
|
### مكونات مميزة
|
|||
|
|
|
|||
|
|
**شريط علامات تبويب المنتج**
|
|||
|
|
- علامات تبويب أفقية بشكل حبة دواء (نصف قطر 50px)
|
|||
|
|
- كل علامة تبويب تمثل منطقة منتج Figma (تصميم، وضع المطوّر، نماذج أولية، وغيرها)
|
|||
|
|
- علامة التبويب النشطة مميزة بالإبراز
|
|||
|
|
|
|||
|
|
**قسم تدرج الهيرو**
|
|||
|
|
- خلفية تدرج متعدد الألوان الزاهية بعرض كامل
|
|||
|
|
- نص أبيض فوق التدرج مع عنوان عرض بحجم 86px
|
|||
|
|
- لقطات شاشة المنتج تطفو داخل التدرج
|
|||
|
|
|
|||
|
|
**مؤشرات التركيز المتقطعة**
|
|||
|
|
- كل العناصر التفاعلية تستخدم خطًا متقطعًا `dashed 2px` عند التركيز
|
|||
|
|
- تستحضر مقابض التحديد في محرر Figma
|
|||
|
|
- خيار تصميمي ميتا يربط الموقع بالمنتج
|
|||
|
|
|
|||
|
|
## 5. مبادئ التخطيط
|
|||
|
|
|
|||
|
|
### نظام التباعد
|
|||
|
|
- الوحدة الأساسية: 8px
|
|||
|
|
- المقياس: 1px، 2px، 4px، 4.5px، 8px، 10px، 12px، 16px، 18px، 24px، 32px، 40px، 46px، 48px، 50px
|
|||
|
|
|
|||
|
|
### الشبكة والحاوية
|
|||
|
|
- أقصى عرض للحاوية: حتى 1920px
|
|||
|
|
- الهيرو: تدرج بعرض كامل مع محتوى مُوسَّط
|
|||
|
|
- أقسام المنتج: عروض متناوبة
|
|||
|
|
- التذييل: قسم داكن بعرض كامل
|
|||
|
|
- استجابة من 559px إلى 1920px
|
|||
|
|
|
|||
|
|
### فلسفة المساحة البيضاء
|
|||
|
|
- **إيقاع شبيه بالمعرض**: التباعد السخي يتيح لكل قسم منتج التنفس كمعرض مستقل.
|
|||
|
|
- **الأقسام الملونة كتنفس بصري**: هيرو التدرج وعروض المنتجات توفر راحة لونية بين أقسام الواجهة أحادية اللون.
|
|||
|
|
|
|||
|
|
### مقياس نصف القطر للحدود
|
|||
|
|
- أدنى (2px): عناصر الروابط الصغيرة
|
|||
|
|
- خفيف (6px): حاويات صغيرة، فواصل
|
|||
|
|
- مريح (8px): بطاقات، صور، حوارات
|
|||
|
|
- حبة دواء (50px): أزرار التبويب، دعوات العمل
|
|||
|
|
- دائرة (50%): أزرار الأيقونات، العناصر الدائرية
|
|||
|
|
|
|||
|
|
## 6. العمق والارتفاع
|
|||
|
|
|
|||
|
|
| المستوى | المعالجة | الاستخدام |
|
|||
|
|
|---------|----------|-----------|
|
|||
|
|
| مسطح (المستوى 0) | لا ظل | خلفية الصفحة، معظم النصوص |
|
|||
|
|
| سطح (المستوى 1) | بطاقة بيضاء على قسم تدرج/داكن | بطاقات، عروض المنتجات |
|
|||
|
|
| مرتفع (المستوى 2) | ظل خفيف | بطاقات عائمة، حالات التحويم |
|
|||
|
|
|
|||
|
|
**فلسفة الظل**: تستخدم Figma الظلال باعتدال. الآليات الأساسية للعمق هي **تباين الخلفية** (المحتوى الأبيض على الأقسام الملونة/الداكنة) والبُعد المتأصل في لقطات شاشة المنتج ذاتها.
|
|||
|
|
|
|||
|
|
## 7. ما يجب فعله وما يجب تجنبه
|
|||
|
|
|
|||
|
|
### يجب فعله
|
|||
|
|
- استخدام figmaSans بأوزان متغيرة دقيقة (320–540) — التحكم الدقيق في الوزن هو جوهر التصميم
|
|||
|
|
- الإبقاء على واجهة التطبيق صارمة بالأبيض والأسود — اللون يأتي من محتوى المنتج فقط
|
|||
|
|
- استخدام هندسة حبة الدواء (50px) والدائرة (50%) لجميع العناصر التفاعلية
|
|||
|
|
- تطبيق خطوط تركيز متقطعة بسماكة 2px — نمط الوصول المميز
|
|||
|
|
- تفعيل ميزة `"kern"` على كل النصوص
|
|||
|
|
- استخدام figmaMono بأحرف كبيرة مع تباعد موجب للتسميات
|
|||
|
|
- تطبيق تباعد سلبي للحروف في كل مكان (-0.1px إلى -1.72px)
|
|||
|
|
|
|||
|
|
### يجب تجنبه
|
|||
|
|
- لا تضف ألوانًا للواجهة — لوحة الألوان أحادية اللون مطلقة
|
|||
|
|
- لا تستخدم أوزان الخطوط القياسية (400، 500، 600، 700) — استخدم توقفات الخط المتغير الفريدة (320، 330، 340، 450، 480، 540)
|
|||
|
|
- لا تستخدم زوايا حادة في الأزرار — الهندسة بشكل حبة دواء ودائرية فقط
|
|||
|
|
- لا تستخدم خطوط تركيز صلبة — المتقطع هو البصمة المميزة
|
|||
|
|
- لا ترفع وزن خط الجسم فوق 450 — الجمالية الخفيفة الوزن جوهرية
|
|||
|
|
- لا تستخدم تباعدًا موجبًا للحروف في نص الجسم — هو دائمًا سلبي
|
|||
|
|
|
|||
|
|
## 8. سلوك الاستجابة
|
|||
|
|
|
|||
|
|
### نقاط التوقف
|
|||
|
|
| الاسم | العرض | التغييرات الرئيسية |
|
|||
|
|
|-------|-------|------------------|
|
|||
|
|
| موبايل صغير | <560px | تخطيط مضغوط، متراكم |
|
|||
|
|
| جهاز لوحي | 560–768px | تعديلات طفيفة |
|
|||
|
|
| سطح مكتب صغير | 768–960px | تخطيطات بعمودين |
|
|||
|
|
| سطح مكتب | 960–1280px | تخطيط قياسي |
|
|||
|
|
| سطح مكتب كبير | 1280–1440px | موسّع |
|
|||
|
|
| فائق الاتساع | 1440–1920px | أقصى عرض |
|
|||
|
|
|
|||
|
|
### استراتيجية الطي
|
|||
|
|
- نص الهيرو: 86px ← 64px ← 48px
|
|||
|
|
- علامات تبويب المنتج: تمرير أفقي على الموبايل
|
|||
|
|
- أقسام الميزات: عمود واحد متراكم
|
|||
|
|
- التذييل: متعدد الأعمدة ← متراكم
|
|||
|
|
|
|||
|
|
## 9. دليل مطالبات الوكيل
|
|||
|
|
|
|||
|
|
### مرجع الألوان السريع
|
|||
|
|
- كل شيء: "أسود خالص (#000000)" و"أبيض خالص (#ffffff)"
|
|||
|
|
- زجاجي داكن: "rgba(0, 0, 0, 0.08)"
|
|||
|
|
- زجاجي فاتح: "rgba(255, 255, 255, 0.16)"
|
|||
|
|
|
|||
|
|
### أمثلة على مطالبات المكونات
|
|||
|
|
- "أنشئ هيرو على تدرج متعدد الألوان الزاهية (أخضر، أصفر، بنفسجي، وردي). العنوان بحجم 86px figmaSans وزن 400، ارتفاع السطر 1.0، تباعد الحروف -1.72px. نص أبيض. زر CTA أبيض بشكل حبة دواء (نصف قطر 50px، حشو 8px 18px)."
|
|||
|
|
- "صمّم شريط علامات تبويب المنتج بأزرار بشكل حبة دواء (نصف قطر 50px). نشط: خلفية سوداء، نص أبيض. غير نشط: شفاف، نص أسود. figmaSans بحجم 20px وزن 480."
|
|||
|
|
- "ابنِ تسمية قسم: figmaMono 18px، أحرف كبيرة، تباعد الحروف 0.54px، نص أسود. كيرنينج مفعّل."
|
|||
|
|
- "أنشئ نص جسم بحجم 20px figmaSans وزن 330، ارتفاع السطر 1.40، تباعد الحروف -0.14px. أسود خالص على أبيض."
|
|||
|
|
|
|||
|
|
### دليل التكرار
|
|||
|
|
1. استخدم توقفات وزن الخط المتغير بدقة: 320، 330، 340، 450، 480، 540، 700
|
|||
|
|
2. الواجهة دائمًا أسود + أبيض — لا تضف ألوانًا للواجهة أبدًا
|
|||
|
|
3. خطوط تركيز متقطعة لا صلبة
|
|||
|
|
4. تباعد الحروف دائمًا سلبي في الجسم، دائمًا موجب في تسميات الأحادي
|
|||
|
|
5. حبة دواء (50px) للأزرار/علامات التبويب، دائرة (50%) لأزرار الأيقونات
|