UI/UX
لإنشاء زر التبديل (Switch) بهذا الشكل الاحترافي في Figma (نيومورفيك داكن مع توهج أزرق)، اتبع هذه الخطوات:
✅ الخطوة 1: إعداد الإطار الأساسي (القاعدة)
1. أداة المستطيل الدائري (Rounded Rectangle)
• العرض: 140px
• الارتفاع: 56px
• الزوايا: 100% (لجعله بيضاوي)
2. اللون:
• Fill: #1A1A1A أو #121212 (لون داكن)
3. الظل الداخلي (Inner Shadow):
• X: 0, Y: 2, Blur: 6, Color: #00000040
• Type: Inner shadow
4. الظل الخارجي (Drop Shadow):
• X: 0, Y: 4, Blur: 10, Color: #00000070
✅ الخطوة 2: الدائرة القابلة للتحريك (المؤشر)
1. ارسم دائرة بحجم 52px
• اللون: #2A2A2A أو نفس لون القاعدة
• أضف تفاصيل نقطية في المنتصف (دوائر صغيرة بـ Repeat Grid)
2. تأثيرات:
• Inner Shadow: خفيف جدًا بلون غامق
• Outer Glow: (لون أزرق خفيف للتوهج الجانبي)
• Color: #00CFFF
• Blur: 10~15, Opacity: 30~40%
✅ الخطوة 3: خلفية التوهج الأزرق (عند التفعيل)
1. استخدم شكل بيضاوي أو مستطيل دائري يغطي النصف الأيمن من القاعدة.
2. اللون: تدرج لوني (Gradient Fill):
• من #00CFFF إلى #0066FF
• اجعلها شفافة من الجهة اليسرى
3. أضف عليه تأثير:
• Layer Blur: 20~40
• أو استخدم Blending Mode: Screen أو Plus Lighter
✅ الخطوة 4: النص (ON)
1. ضع نص “ON” داخل التوهج على اليمين
• الخط: Bold
• اللون: #FFFFFF مع Shadow خفيف أو Outer Glow
• الحجم: 14~16px
✅ نصيحة لإضافة تفاعل (Prototype):
• استخدم Prototype tab لعمل تبديل بين حالتين:
• حالة (ON): التوهج ظاهر + المؤشر على اليمين
• حالة (OFF): التوهج مخفي + المؤشر على اليسار