لإنشاء تأثير التوهج (Glow) والزجاج (Glassmorphism) في فيجما (Figma) لتصميم (UI/UX)، يمكنك استخدام مجموعة من التأثيرات والخصائص. إليك الخطوات بالتفصيل لكل منهما:
1. كيفية عمل تأثير التوهج (Glow Effect)
تأثير التوهج يعتمد بشكل أساسي على استخدام خاصية الظل الداخلي (Inner Shadow) أو الظل الخارجي (Drop Shadow) مع إعدادات معينة.
الخطوات:
إنشاء الشكل: ابدأ بإنشاء الشكل الذي تريده أن يتوهج (مثل زر، أيقونة، أو نص).
إضافة تأثير الظل (Effect):
حدد الشكل.
في لوحة الخصائص على اليمين (Properties panel)، ابحث عن قسم "Effects".
انقر على علامة "+" لإضافة تأثير جديد. بشكل افتراضي، سيظهر "Drop Shadow".
تعديل إعدادات الظل للتوهج:
Drop Shadow (توهج خارجي): X و Y: اجعلها "0" ليكون التوهج متساوياً حول الكائن.
Blur (التمويه): زد قيمة التمويه بشكل كبير (مثلاً، 20-50 أو أكثر حسب الحجم المرغوب للتوهج).
Spread (الانتشار): يمكنك زيادة هذه القيمة قليلاً لجعل الظل أكثر انتشارًا قبل التمويه (أحياناً لا تكون ضرورية للتوهج).
Color (اللون): اختر لون التوهج الذي تريده (عادةً ما يكون لونًا فاتحًا أو مشرقًا)، وزد قيمة الشفافية (Opacity) لجعله يبدو أكثر إشراقًا (مثلاً، 50%-100%).
Inner Shadow (توهج داخلي - لإعطاء تأثير توهج من الداخل):
يمكنك استخدام "Inner Shadow" بنفس الطريقة إذا كنت تريد تأثير توهج يأتي من داخل العنصر.
طبق نفس الإعدادات (X=0, Y=0, Blur عالي, اللون المطلوب).
تعديلات إضافية (اختياري):
طبقات متعددة من التوهج: للحصول على توهج أكثر تعقيدًا، يمكنك إضافة عدة تأثيرات "Drop Shadow" أو "Inner Shadow" بنفس اللون ولكن بقيم تمويه مختلفة (واحدة بتمويه أقل وأكثر كثافة، وأخرى بتمويه أكبر وأكثر انتشارًا) مع تغيير الشفافية لكل طبقة.
لون الشكل: تأكد من أن لون الشكل الأساسي يتناسق مع لون التوهج.
مثال تطبيقي: إذا كان لديك زر أزرق وتريد توهجًا أزرق حوله، اختر لون ظل أزرق فاتح جداً أو أبيض مع شفافية عالية، ثم زد الـ Blur.
2. كيفية عمل تأثير الزجاج (Glassmorphism Effect)
تأثير الزجاج يعتمد على الشفافية، التمويه (Blur)، وحدود طفيفة.
الخطوات:
إنشاء الشكل الخلفي (Background Shape):
تأثير الزجاج يعمل بشكل أفضل عندما يكون هناك شيء ما (صورة، تدرج لوني، أو أشكال أخرى) في الخلفية ليتأثر بالتمويه.
ضع صورة أو ألوانًا خلف العنصر الزجاجي.
إنشاء لوح الزجاج (Glass Pane):
ارسم شكلاً (مستطيل، دائرة، إلخ) ليمثل لوح الزجاج الخاص بك وضعه فوق الخلفية.
تعبئة لوح الزجاج (Fill):
حدد لوح الزجاج.
في قسم "Fill"، اختر لونًا (عادةً ما يكون أبيض أو رمادي فاتح) وقلل الشفافية (Opacity) بشكل كبير (مثلاً، 5% - 20%). هذا سيجعله شبه شفاف.
إضافة تأثير الخلفية الضبابية (Background Blur Effect): هذا هو العنصر الأساسي لتأثير الزجاج.
مع تحديد لوح الزجاج، اذهب إلى قسم "Effects".
انقر على "+" وأغير "Drop Shadow" إلى "Background Blur" من القائمة المنسدلة.
Blur (التمويه): زد قيمة التمويه (مثلاً، 10-30). ستلاحظ أن ما يقع خلف هذا الشكل أصبح ضبابيًا.
إضافة حدود طفيفة (Subtle Border): (اختياري لكن يضيف واقعية)
مع تحديد لوح الزجاج، اذهب إلى قسم "Stroke".
أضف حدودًا بلون فاتح جداً (مثل الأبيض أو لون قريب من لون الشكل) وقلل الشفافية بشكل كبير (مثلاً، 10% - 30%) مع سمك 1 بكسل. هذا يعطي إحساسًا بحافة الزجاج.
إضافة ظل خفيف (Subtle Drop Shadow): (اختياري)
يمكنك إضافة "Drop Shadow" خفيف جداً (X=0, Y=4-8, Blur=10-20, Color أسود شفافية 5-10%) لإعطاء إحساس بالعمق.
تأثير اللمعان (Highlight - اختياري):
لإضافة لمسة لمعان، يمكنك رسم خط رفيع أو شكل بيضاوي صغير بلون أبيض شفاف جداً (مثلاً، 20-40%) في زاوية لوح الزجاج، أو على حافته العلوية/اليسرى.
يمكنك تطبيق "Layer Blur" على هذا الشكل لجعله يبدو أكثر نعومة.
نصائح عامة:
التجربة: لا تخف من تجربة قيم مختلفة للشفافية، التمويه، الألوان، ومزج التأثيرات للحصول على النتيجة المطلوبة.
الخلفية: للحصول على أفضل تأثير للزجاج، تأكد من أن الخلفية التي تقع خلف العنصر الزجاجي بها تفاصيل أو ألوان كافية لتظهر الضبابية بشكل واضح.
الأداء: كثرة استخدام تأثيرات التوهج والزجاج، خاصةً على أشكال متعددة، قد يؤثر على أداء فيجما قليلاً عند التعامل مع ملفات كبيرة.
