أطيب التحيات وأهلاً وسهلاً بكم. تعد مرحلة التخطيط مهمة جدًا قبل أن نبدأ ببرمجة أو تصميم موقع إنترنت. بالنسبة لنا كمصممين أو مبرمجين، تكون النتيجة النهائية لموقع الإنترنت واضحة، بمعنى أنك تعرف ماذا يفعل زر معين، وتعرف أنه عند التمرير فوقه قد يتغير لونه، وأن الصورة يمكن أن تصبح عرض شرائح، بالإضافة إلى الرأس والتذييل وكل هذه الأمور. ولكن بالنسبة للزبون، غالبًا ما تكون هذه الأمور غير واضحة، فهو لا يستطيع أن يتخيل أن صورة معينة يمكن أن تتحرك.
هنا تأتي مهمة البرامج المساعدة، وهي البرامج التي غالبًا ما نسميها برامج واجهة المستخدم (UI). لذلك اليوم، دعوني أقدم لكم فكرة عن Figma، وكيف نبدأ في استخدامه ببساطة من خلال دليل استخدام سريع. سنرى كيف يمكننا إنشاء بعض المكونات، وكيف نستخدمها، وكيف يساعدنا ذلك في التخطيط لموقعنا.
البدء مع Figma
لدينا أسلوبان أساسيان لاستخدام Figma:
- تطبيق سطح المكتب: يمكننا الذهاب إلى
figma.com/downloadsوتنزيل البرنامج المتاح لأنظمة macOS، وWindows، وiOS، وAndroid. - النسخة المستندة إلى الويب: إذا كنت لا ترغب في تثبيت البرنامج، يمكنك استخدامه مباشرة على الموقع
figma.com.
عند زيارة الموقع، سنجد خطط الأسعار. الخطة المبدئية (Starter) مجانية وهي كافية تمامًا لإنجاز معظم المهام. هناك خطط أخرى مثل Professional وOrganization وEnterprise لمن يحتاج إلى ميزات متقدمة مثل المشاريع التعاونية الكبيرة واستخدام الذكاء الاصطناعي.
سنختار الخطة المجانية، ثم ننشئ حسابًا باستخدام البريد الإلكتروني ونسجل الدخول.
واجهة Figma الرئيسية
بعد تسجيل الدخول، ستظهر الواجهة الرئيسية. من الأفضل البدء بإنشاء فريق جديد (New Team) لتنظيم مشاريعك. يمكنك دعوة أعضاء آخرين عبر البريد الإلكتروني أو البدء بمفردك.
لإنشاء ملف تصميم جديد، نضغط على علامة الزائد (+) في أحد المربعات، وستظهر الواجهة الرئيسية للبرنامج، والتي قد تكون مألوفة لمستخدمي برامج Adobe.
ملاحظة سريعة: لتكبير الواجهة بأكملها (وليس فقط لوحة التصميم)، يمكنك تحديد عنوان URL في المتصفح والضغط على Control +.
للبدء، يمكننا إعادة تسمية المشروع والصفحات. على سبيل المثال، يمكن أن يكون لدينا صفحة Home وصفحة About. على اليسار، سنجد لوحة الطبقات (Layers)، وفي الأعلى شريط الأدوات.
أهم اختصارات الأدوات:
- V: أداة التحريك (Move Tool).
- H: أداة اليد (Hand Tool) لتحريك لوحة التصميم.
- R: أداة المستطيل (Rectangle).
- F: أداة الإطار (Frame).
المفهوم الأساسي: الإطارات (Frames)
الإطار (Frame) هو الأداة الأكثر استخدامًا. عند اختيارها، تظهر على اليمين مقاسات مجهزة مسبقًا لمختلف الأجهزة.
على سبيل المثال، يمكننا اختيار Desktop بالمقاس القياسي 1440x1024. بمجرد الضغط عليه، يظهر إطار جديد على لوحة التصميم. يمكننا إعادة تسمية أي إطار بالنقر المزدوج عليه.
باستخدام أداة المستطيل (Rectangle)، يمكننا البدء في رسم التخطيط الأساسي للموقع، مثل القائمة العلوية، ومنطقة المحتوى، وما إلى ذلك. اللوحة اليمنى تتيح لنا التحكم في جميع خصائص العنصر المحدد (الأبعاد، اللون، إلخ).
العمل بالمتغيرات (Variables)
لنفترض أننا أنشأنا مستطيلاً بارتفاع 350px. يمكننا تحويل هذا الارتفاع إلى متغير (Variable).
- نحدد المستطيل.
- بجانب خاصية الارتفاع (Height)، نضغط على أيقونة المتغير.
- نضغط على
Create variableونسميه، على سبيل المثال،height_primary.
الآن، إذا أنشأنا مستطيلاً آخر وأردنا أن يكون له نفس الارتفاع، يمكننا ببساطة ربطه بالمتغير height_primary. عند تغيير قيمة المتغير، سيتغير ارتفاع جميع العناصر المرتبطة به في المستند بأكله.
ينطبق المبدأ نفسه على الألوان. يمكننا إنشاء متغيرات للألوان (Color Variables) واستخدامها لتوحيد لوحة الألوان في تصميمنا وضمان سهولة تعديلها لاحقًا.
قوة التخطيط التلقائي (Auto Layout)
من يعمل بـ HTML و CSS سيعرف أهمية هذا الموضوع. التخطيط التلقائي (Auto Layout) هو ميزة قوية جدًا في Figma تحاكي سلوك Flexbox في CSS.
لنفترض أن لدينا عدة عناصر (أزرار، صور، نصوص).
- نحدد جميع هذه العناصر.
- نضغط بالزر الأيمن ونختار
Add auto layout(أو نستخدم الاختصارShift + A).
ستنتظم العناصر تلقائيًا داخل حاوية جديدة. من خلال لوحة الخصائص، يمكننا التحكم في:
- الاتجاه: أفقي (row) أو عمودي (column).
- المسافة بين العناصر (Gap): تحديد الفجوة بين كل عنصر.
- الهوامش الداخلية (Padding): إضافة هوامش حول المحتوى.
- المحاذاة (Alignment): محاذاة العناصر إلى اليمين، اليسار، الوسط، إلخ.
هذه الميزة رائعة لأنها تجعل التصميم مرنًا (liquid)، حيث تتكيف العناصر تلقائيًا عند تغيير حجم المحتوى أو إضافة عناصر جديدة.
إنشاء المكونات (Components)
لنفترض أننا صممنا بطاقة منتج (Product Card) تحتوي على صورة، اسم، سعر، وزر “أضف إلى السلة”. إذا كان لدينا العديد من هذه البطاقات في صفحة واحدة، فإن تعديلها واحدة تلو الأخرى سيكون مرهقًا.
الحل هو تحويل التصميم إلى مكون (Component).
- نحدد العنصر (البطاقة بأكملها).
- نضغط بالزر الأيمن ونختار
Create Component(الاختصارCtrl + Alt + K).
يصبح هذا العنصر هو المكون الرئيسي (Main Component). الآن، يمكننا إنشاء نسخ منه تسمى Instances. أي تعديل نقوم به على المكون الرئيسي (مثل تغيير لون الخلفية أو حجم الخط) سينعكس تلقائيًا على جميع النسخ. هذا يوفر وقتًا هائلاً ويضمن الاتساق في التصميم.
النماذج الأولية التفاعلية (Prototyping)
يتيح لنا Figma إنشاء نماذج أولية تفاعلية لمحاكاة تجربة المستخدم. يمكننا إضافة تفاعلات مثل النقر والتمرير.
لإنشاء تأثير التمرير (Hover) على بطاقة المنتج:
- نحدد المكون الرئيسي ونضيف نسخة جديدة منه تسمى
Variant. - نسمي النسخة الجديدة
Hoverونغير تصميمها (على سبيل المثال، نضيف ظلًا أو نغير لون الخلفية). - ننتقل إلى وضع
Prototypeفي اللوحة اليمنى. - نسحب سهمًا من المكون الأساسي إلى نسخة
Hover. - في إعدادات التفاعل، نختار
While hovering(أثناء التمرير).
الآن، عند عرض النموذج الأولي، ستتغير البطاقة إلى تصميم Hover عند مرور مؤشر الفأرة فوقها.
استخدام القوالب الجاهزة
بدلاً من البدء من الصفر، يمكننا الاستفادة من آلاف القوالب الجاهزة. ابحث في جوجل عن Figma templates وستجد عالمًا من القوالب المجانية والمدفوعة لمواقع الويب وتطبيقات الجوال وغيرها.
ببساطة، اختر قالبًا وافتحه في Figma. ستحصل على تصميم كامل بعناصره وألوانه وخطوطه، ويمكنك تعديله ليناسب مشروعك.
من التصميم إلى الكود
عندما ننتهي من التصميم، تأتي مرحلة تحويله إلى كود. هناك إضافات (Plugins) في Figma يمكنها تصدير التصميم إلى HTML و CSS أو حتى React.
ومع ذلك، غالبًا ما يكون الكود الناتج غير مثالي. الطريقة المفضلة هي استخدام التصميم كمرجع مرئي، ثم بناء الواجهة يدويًا باستخدام HTML و CSS والفريم ورك الذي تفضله. هذا يمنحك تحكمًا كاملاً في جودة الكود وبنيته. استخدم هذه البرامج للعرض على الزبون لتوضيح شكل النتيجة النهائية.
خلاصة
لا يزال هناك الكثير لنتعلمه في Figma، ولكن لا يمكننا شرح كل شيء في مقال واحد. أفضل طريقة للتعلم هي الممارسة. حاولت قدر الإمكان أن أقدم لكم نظرة عامة حول كيفية استخدام Figma، وما هو، ولماذا نستخدمه، وكيف يمكننا الانتقال من مرحلة التصميم إلى مرحلة البرمجة.
أتمنى أن تبدأوا في إنشاء تصاميمكم، ولا تترددوا في استخدام القوالب الجاهزة لتسهيل عملية تحديد التخطيط والألوان والهوامش، ولكن اختاروا التخطيط الخاص بكم بحيث يتحول هذا التخطيط نفسه إلى موقع الإنترنت الذي ترغبون فيه.
أتمنى أن أكون قد قدمت لكم معلومات مفيدة في هذا المقال.