شرح المتغيرات في فيجما - Variables In Figma
صباح الخير يا شباب. في الفيديو دا هنعرف كل حاجة عن ال variables في فيجما. وهنعرف قد ايه بتوفر علينا وقت ومجهود كبير جدا في تعديل اي حاجة بتتضاف ليها سواء الوان او مسافات او غيرها.
نقدر نعتبر ان الالوان او الارقام (واللي هي زي المسافات – الاحجام – paddings او حتي ال effects) هيبقوا global تقدر تستخدمهم لأكتر من حاجة وفي نفس الوقت وقت التعديل التغييرات هتسمع في كل ال elements مرة واحدة.
بنعرف في ال variables 3 خصائص هما (color - number – string) هنعرف ازاي نخصص الالوان والارقام لكل ال ui elements علي حسب ما احنا عايزين وبرضو بنعرف طريقة ازاي نحول بين ال light وال dark mode بكل سهولة (خاصية مدفوعة).
وبرضو بنعرف الفرق بين ال variables وال styles وقد ايه ال variables افضل كتير مش بس في سهولة التعديل ولكن في تنظيم وترتيب المشاريع بتاعتنا اللي كل ما كانت اكبر كل ما ال variables ساهمت في مساعدتنا اكتر.
Chapters
00:00 Intro
00:22 إنشاء درجات الألوان
02:50 بداية شرح الـ variables
04:00 تحويل الـ styles الي variables باستخدام plugin
04:40 استكمال شرح الـ variables
11:56 الفرق بين styles و variables
15:45 ازاي نعمل dark mode باستخدام ال variables
19:45 شرح ال number في انشاء spacing أو radius
22:36 شرح ال string وازاي نستخدمها في الترجمة
25:10 Outro
الفيديوهات اللي فاتت:
Developer Tools, HTML, CSS: • Developer Tools - HTML - CSS | هل هيفيدوك ...
Contrast: • يعني ايه Contrast؟
Spacing: • شرح كل حاجة عن الـ Spacing في التصميم - De...
Smart Animate Video: • شرح Smart Animate في فيجما - Figma Carouse...
Prototyping Video: • شرح الـ Prototype في فيجما - Figma Prototy...
Breakpoints Plugin: • شرح Responsive Design بإستخدام Breakpoints...
Responsive Design: • شرح الـ Responsive Design و الـ Constraint...
Responsive Grid: • شرح الـ Layout Grid في فيجما - Responsive ...
Boolean property: • ازاي تعمل تصميم واحد باكتر من لغة في فيجما...
Auto Layout: • كل حاجة عن اوتو لاي اوت في فيجما - Everyth...
Components in Figma: • شرح الـ Components في فيجما | Figma Compon...
Variants Video: • شرح الـ Variants في فيجما | Figma Variants