اللي يظهر في الصورة واجهة داكنة (Dark UI) فيها علامة تبويب نشطة (active tab) مميزة بإضاءة خفيفة خلف الأيقونة (glow effect).
في Figma تقدر تعمل مثل هذا الـ Active State بخطوات بسيطة:
✅ الخطوات:
1. إنشاء قائمة التبويبات
• ارسم مستطيل لكل عنصر (مثلاً: Shorts – Calendar).
• أضف أيقونة + نص داخل كل عنصر.
• ضع العناصر في Auto Layout (عمودي).
2. تصميم الحالة العادية (Default)
• خلي الخلفية داكنة (مثلاً #1E1E1E).
• النص والأيقونة باللون الرمادي الفاتح.
3. تصميم الحالة النشطة (Active Tab)
• أضف خلفية أغمق قليلاً مع Border Radius صغير.
• أضف Glow Effect (Shadow داخلي أو خارجي بلون أخضر فاتح أو أي لون للبراند).
• غيّر لون الأيقونة + النص للون أوضح (أبيض أو أخضر).
4. استخدام Variants
• اعمل عنصر (Component) للتبويب.
• ضيف له حالتين (Variants):
• Default
• Active
• هكذا تقدر تبدل بسهولة بين الحالتين أثناء التصميم.
5. إظهار التبويب النشط
• لما تختار صفحة معينة (مثلاً Shorts)، غيّر الـ Variant إلى “Active”.
• باقي التبويبات تظل بالحالة العادية.
💡 نصيحة رهيبة:
تقدر تستخدم Interactive Components في Figma، بحيث لما تعمل Prototype، يظهر التغيير التلقائي عند الضغط (Click → Change to Active).