دليل Figma الشامل

Figma بقت الأداة رقم واحد في عالم تصميم المنتجات الرقمية. مش بس عشان هي مجانية للمبتدئين، لكن عشان هي browser-based — يعني تقدر تشتغل عليها من أي مكان، من أي جهاز، ومن غير ما تنزل حاجة. سواء كنت لسه بتتعلم أو شغال في شركة كبيرة، Figma هي الأداة اللي هتستخدمها كل يوم.

في الدليل ده هنمشي مع بعض خطوة بخطوة: من أول ما تفتح Figma لحد ما تعمل تصميم كامل بـ Components و Auto Layout و Prototype تقدر تشاركه مع الفريق والمطورين.

واجهة Figma: أول نظرة

أول ما تفتح Figma وتعمل ملف جديد، هتلاقي الواجهة متقسمة لـ 4 أجزاء أساسية:

الشريط العلوي (Toolbar): فيه أدوات الرسم والأشكال والنصوص والـ Frames. ده المكان اللي هتستخدمه عشان تضيف عناصر جديدة على الـ Canvas.

الـ Canvas (المساحة البيضاء الكبيرة): ده المكان اللي بتصمم فيه. تقدر تكبره وتصغره بالـ scroll وتتحرك فيه بالـ Space + drag.

اللوحة الشمال (Layers Panel): فيها كل الـ layers والعناصر اللي في التصميم. تقدر تنظمها في groups وframes وتتحكم في ترتيبها.

اللوحة اليمين (Properties Panel): لما تختار أي عنصر، هنا بتظهر كل خصائصه — الحجم، اللون، الخط، الـ effects، الـ constraints، وكل حاجة تانية.

نصيحة عملية: اتعلم الـ shortcuts من أول يوم. F عشان تعمل Frame، T عشان تكتب نص، R عشان تعمل Rectangle. الـ shortcuts هتوفرلك وقت كبير.

الـ Frames: الأساس اللي بتبني عليه كل حاجة

الـ Frame في Figma هو أهم مفهوم لازم تفهمه كويس. الـ Frame مش مجرد "صندوق" — هو container ذكي بيقدر يتحكم في كل اللي جواه.

إيه الفرق بين Frame و Rectangle؟

الـ Rectangle شكل بسيط — ملهوش أولاد، مش بيحتوي حاجة. الـ Frame ممكن يحتوي عناصر جواه، وتقدر تحط عليه Auto Layout و Constraints و Clip content.

استخدامات الـ Frames:

• شاشات التطبيق: لما تضغط F وتختار iPhone أو Desktop، أنت بتعمل Frame بمقاس معين يمثل شاشة حقيقية
• أقسام الصفحة: كل section في الصفحة ممكن يكون Frame لوحده
• الـ Cards والعناصر المركبة: أي عنصر فيه أكتر من جزء — زي card فيها صورة وعنوان ووصف — لازم تكون Frame
• الـ Components: كل component هو Frame في الأصل

نصيحة عملية: استخدم أسماء واضحة للـ Frames بتاعتك. بدل "Frame 47"، سمّيها "Hero Section" أو "Product Card". ده هيساعدك أنت وفريقك تلاقوا أي حاجة بسرعة.

الـ Components: صمم مرة واستخدم ألف مرة

الـ Components هي القوة الحقيقية في Figma. الفكرة بسيطة: بتصمم عنصر مرة واحدة (ده بيبقى الـ Main Component)، وبعدين بتستخدم نسخ منه (Instances) في كل مكان. لو غيرت حاجة في الـ Main Component، كل الـ Instances بتتغير تلقائياً.

إزاي تعمل Component:

1. صمم العنصر اللي عايزه — مثلاً Button
2. اختاره واضغط Ctrl/Cmd + Alt + K
3. الـ Frame هيتحول للون بنفسجي — ده معناه إنه بقى Main Component
4. اسحب منه Instance عن طريق Alt + Drag

الـ Variants:

الـ Variants بتخليك تعمل نسخ مختلفة من نفس الـ Component. مثلاً Button ممكن يكون:

• State: Default, Hover, Pressed, Disabled
• Size: Small, Medium, Large
• Type: Primary, Secondary, Ghost

بدل ما تعمل 12 component منفصل، بتعمل component واحد فيه كل الـ variants دي، وبتختار اللي محتاجه من الـ Properties Panel.

الـ Component Properties:

Figma بتديك 4 أنواع من الـ Properties:

• Boolean: تقدر تظهر أو تخفي عنصر (مثلاً: أيقونة في الـ Button)
• Instance Swap: تقدر تبدل أيقونة بأيقونة تانية
• Text: تقدر تغير النص من غير ما تفتح الـ Instance
• Variant: تقدر تختار الـ variant اللي عايزه

نصيحة عملية: ابدأ بـ components بسيطة — Buttons, Input Fields, Cards — وبعدين ابني عليها. متحاولش تعمل design system كامل من أول يوم.

الـ Auto Layout: التصميم الذكي

الـ Auto Layout هو اللي بيخلي تصميمك responsive ومنظم. بدل ما تحط كل عنصر في مكان ثابت بالـ pixel، الـ Auto Layout بيرتب العناصر تلقائياً.

إزاي تضيف Auto Layout:

اختار Frame واضغط Shift + A. كده الـ Frame بقى عنده Auto Layout.

الخصائص الأساسية:

• Direction: العناصر تترتب أفقي (Horizontal) ولا رأسي (Vertical)
• Gap: المسافة بين العناصر
• Padding: المسافة بين العناصر وحدود الـ Frame
• Alignment: العناصر تتمحور إزاي (يمين، شمال، وسط)

الـ Resizing:

هنا بييجي السحر الحقيقي:

• Fixed: العنصر ليه عرض ثابت
• Hug: العنصر بياخد حجم المحتوى اللي جواه
• Fill: العنصر بيملى المساحة المتاحة

مثلاً لو عندك Card وعايز العنوان ياخد عرض الـ Card كلها — حط العنوان على Fill Container. ولو عايز الـ Card تكبر وتصغر حسب المحتوى — حط الـ Card على Hug Contents.

Wrap:

من الميزات الجديدة في Figma — تقدر تخلي العناصر تنزل لسطر جديد لما المساحة متكفيش. ده مفيد جداً لحاجات زي الـ Tags أو الـ Grid of Cards.

نصيحة عملية: حاول تستخدم Auto Layout في كل حاجة. لو Frame مش عليه Auto Layout، غالباً فيه مشكلة في التصميم. الـ Auto Layout بيخلي التصميم أسهل في التعديل وأقرب للـ code الحقيقي.

الـ Styles والـ Variables: التناسق في التصميم

عشان تصميمك يبقى consistent، لازم تستخدم Styles و Variables بدل ما تكتب ألوان وأحجام يدوي في كل مكان.

الـ Color Styles:

بدل ما تكتب #6366F1 في كل مكان، اعمل Color Style اسمه "Primary" واستخدمه. لو قررت تغير اللون بعد كده، هتغيره مرة واحدة وكل الأماكن هتتغير.

الـ Text Styles:

نفس الفكرة للنصوص. اعمل styles لكل نوع:

• Heading 1: حجم 32, وزن Bold
• Body: حجم 16, وزن Regular
• Caption: حجم 12, وزن Regular

الـ Variables (الأحدث):

الـ Variables في Figma بتديك قوة أكبر من الـ Styles. تقدر تعمل:

• Color Variables: بتدعم الـ Theming — يعني نفس الـ variable ممكن يكون أبيض في الـ Light Mode وأسود في الـ Dark Mode
• Number Variables: للـ spacing والـ border radius
• Boolean Variables: لإظهار وإخفاء عناصر
• String Variables: للنصوص المتغيرة

نصيحة عملية: استخدم Variables للألوان والـ spacing عشان تقدر تعمل Dark Mode بسهولة. اعمل مجموعتين: Primitives (الألوان الأساسية) و Semantic (ألوان لها معنى زي "background" و "text-primary").

الـ Prototyping: خلي التصميم يتحرك

التصميم الثابت مش كافي عشان توصل الفكرة. الـ Prototyping في Figma بيخليك تعمل تجربة تفاعلية حقيقية من غير كود.

أساسيات الـ Prototyping:

1. روح لتاب Prototype في اللوحة اليمين
2. اختار عنصر (مثلاً Button)
3. اسحب السهم الأزرق للشاشة اللي عايز تروحلها
4. اختار نوع الـ Interaction:
   • On Click: لما المستخدم يضغط
   • On Hover: لما المستخدم يمرر الماوس
   • On Drag: لما المستخدم يسحب
   • While Pressing: طول ما المستخدم ضاغط

أنواع الـ Animations:

• Instant: الانتقال فوري
• Dissolve: الشاشة بتظهر تدريجياً
• Smart Animate: Figma بتعمل animation ذكي بين العناصر المتشابهة في الشاشتين
• Slide In/Out: الشاشة بتدخل أو تطلع من اتجاه معين

الـ Scrolling:

تقدر تخلي الـ Frame يتسكرل:

• حط المحتوى جوا Frame أصغر من المحتوى
• في الـ Prototype tab، اختار Overflow: Scroll
• اختار الاتجاه: Vertical أو Horizontal أو Both

الـ Overlays:

عايز تعمل popup أو dropdown أو bottom sheet؟ استخدم الـ Overlay:

• اعمل الـ popup كـ Frame منفصل
• في الـ connection، اختار Open Overlay بدل Navigate
• حدد الموقع والخلفية

نصيحة عملية: متعملش prototype لكل حاجة. ركز على الـ core flows اللي عايز تختبرها أو توريها للـ stakeholders. مثلاً: flow الـ Sign Up، أو flow الشراء.

الـ Dev Mode: الجسر بين التصميم والتطوير

الـ Dev Mode هو ميزة في Figma مصممة خصيصاً للمطورين. بتحول التصميم لمعلومات تقنية واضحة.

إيه اللي بيوفره Dev Mode:

• CSS Code: لكل عنصر، Figma بتولد الـ CSS الخاص بيه — ألوان, أحجام, shadows, borders
• Spacing: المسافات بين العناصر بتظهر بوضوح
• Assets: المطور يقدر يصدر أي صورة أو أيقونة مباشرة
• Component Properties: لو العنصر component، المطور بيشوف كل الـ variants والـ properties
• Variables: المطور بيشوف الـ Variables بأسمائها — يعني بدل #6366F1 بيشوف --color-primary

الـ Annotations:

كـ Designer، تقدر تضيف annotations للمطورين — ملاحظات على عناصر معينة. مثلاً: "الـ Button ده لازم يعمل API call لما يتضغط" أو "الـ List دي بتيجي من الـ backend".

الـ Ready for Dev:

لما تخلص تصميم section معين، تقدر تعلمه كـ "Ready for Dev". ده بيساعد المطورين يعرفوا إيه اللي خلاص مظبوط وممكن يبدأوا يشتغلوا عليه.

نصيحة عملية: اتكلم مع المطورين في فريقك عن طريقة الشغل. بعض المطورين بيحبوا ياخدوا الـ CSS من Dev Mode مباشرة، وبعضهم بيحبوا يشوفوا الـ design tokens. فهم طريقة شغلهم هيخلي التعاون أحسن.

الـ Plugins: وسع إمكانيات Figma

Figma عندها ecosystem ضخم من الـ Plugins اللي بتزود إمكانيات الأداة بشكل كبير.

Plugins لازم تعرفها:

• Iconify: مكتبة فيها آلاف الأيقونات من مجموعات مختلفة — Heroicons, Phosphor, Lucide — تقدر تضيفها مباشرة في التصميم
• Unsplash: صور مجانية عالية الجودة تحطها في التصميم مباشرة
• Lorem Ipsum: نصوص تجريبية بدل ما تكتب "نص نص نص"
• Contrast Checker: بيتأكد إن الألوان بتاعتك فيها contrast كافي للـ accessibility
• Content Reel: بيملى التصميم بأسماء وصور ونصوص واقعية

Plugins متقدمة:

• Tokens Studio: لو عايز تدير الـ design tokens بشكل احترافي وتربطها بالكود
• Anima: بيحول التصميم لكود HTML/CSS/React حقيقي
• Autoflow: بيرسم خطوط بين الشاشات بشكل أوتوماتيكي لعرض الـ user flows

نصيحة عملية: متنزلش plugins كتير — هتبطأ Figma. اختار 5-7 plugins أساسيين واتعلمهم كويس. وجرب الـ plugins المدمجة في Figma الأول قبل ما تدور على plugin خارجي.

نصائح للمحترفين

تنظيم الملف:

• استخدم Pages لتقسيم الملف — صفحة للـ Components، صفحة للـ Screens، صفحة للـ Archive
• سمّي كل حاجة بأسماء واضحة ومنظمة
• استخدم Sections عشان تجمع الشاشات المتعلقة ببعض
• اعمل Cover Page فيها معلومات المشروع والـ status

الشغل مع الفريق:

• استخدم الـ Comments عشان تاخد feedback
• شارك الملف بـ "Can View" للـ stakeholders و "Can Edit" للمصممين
• استخدم الـ Branching لو شغال على تغييرات كبيرة
• اعمل Presentation mode عشان تعرض الشغل باحترافية

الـ Performance:

• قلل عدد الـ Variants اللي مش محتاجها
• استخدم الـ Simplify Stroke على الأيقونات المعقدة
• متحطش صور بـ resolution عالية جداً — Figma بتتعامل مع الصور بشكل مختلف عن الـ production

Figma أداة عميقة ومستمرة في التطور. الأهم إنك تبدأ تستخدمها في مشاريع حقيقية — حتى لو مشاريع شخصية — وتتعلم بالممارسة. كل ما استخدمتها أكتر، كل ما اكتشفت ميزات جديدة وطرق أسرع للشغل.