أدوات التصميم: Figma و Canva
نتعرف على أداتين مجانيتين نرسم بهما الواجهة قبل أن نكتب سطرًا واحدًا من الكود. ⏱ نحو 20 دقيقة.
- تقارن بين
FigmaوCanvaوتختار الأنسب. - تتعرف على أجزاء واجهة أداة التصميم.
- تستخدم أدوات الإطار والمستطيل والنص.
- تصمم شاشة جوال بسيطة وتشاركها.
١لماذا أداة تصميم؟
تعديل لون زر في الرسم يأخذ ثانية، وتعديله في الكود قد يأخذ دقائق. لذلك يرسم المصمم الصفحة أولًا في أداة تصميم، ويراجعها مع صاحب الموقع، ثم يبدأ المطوّر بكتابة الكود.
| Figma | Canva | |
|---|---|---|
| أين تعمل؟ | في المتصفح، أو كبرنامج على الحاسوب. | في المتصفح والجوال. |
| السعر | مجانية للطلاب والمعلمين (حساب تعليمي). | نسخة مجانية، ونسخة تعليمية. |
| أفضل استخدام | تصميم واجهات المواقع والتطبيقات بدقة. | تصاميم سريعة من قوالب جاهزة: منشورات وعروض وشعارات. |
| التعاون | أكثر من شخص يعدّلون الملف نفسه في الوقت نفسه. | مشاركة التصميم والتعليق عليه. |
في هذا المقرر نستخدم Figma لتصميم الواجهات، و Canva للشعار والصور السريعة. وإن لم تتوفر الأداة، فالورقة والقلم يكفيان للمخطط الهيكلي.
٢مكونات واجهة Figma
تنقسم شاشة Figma إلى أربعة أجزاء ستجد مثلها في أغلب أدوات التصميم:
| الجزء | مكانه | وظيفته |
|---|---|---|
| شريط الأدوات | أعلى الشاشة | اختيار أداة: إطار، أو شكل، أو نص، أو قلم. |
| لوحة الطبقات Layers | يسار الشاشة | قائمة بكل العناصر وترتيبها، مثل شجرة HTML. |
| لوحة الرسم Canvas | الوسط | المساحة التي ترسم فيها. |
| لوحة الخصائص | يمين الشاشة | اللون والحجم والخط والمسافات للعنصر المختار. |
٣أهم الأدوات واختصاراتها
| الأداة | الاختصار | متى تستخدمها؟ |
|---|---|---|
| الإطار Frame | F | لإنشاء «شاشة» بمقاس جهاز: جوال أو حاسوب. كل صفحة تصممها تبدأ بإطار. |
| المستطيل Rectangle | R | للأزرار والبطاقات والحاويات. |
| الدائرة Ellipse | O | للصور الشخصية والأيقونات. |
| النص Text | T | للعناوين والفقرات وكتابة الأزرار. |
| التحريك Move | V | لاختيار العناصر وتحريكها. |
| التجميع Group | Ctrl + G | لجمع عناصر (مثل مستطيل ونص الزر) فتتحرك معًا. |
٤أول تصميم: شاشة جوال في خمس خطوات
- ادخل figma.com وأنشئ حسابًا، ثم اضغط New design file.
- اضغط F، واختر من لوحة الخصائص مقاس جوال (مثل iPhone 14).
- ارسم مستطيلًا أعلى الإطار للشريط العلوي، وغيّر لونه من لوحة الخصائص (اكتب شفرة HEX).
- اضغط T واكتب عنوانًا، ثم ارسم زرًّا: مستطيل بحواف دائرية ونص فوقه، واجمعهما بـ Ctrl + G.
- اضغط Share وانسخ الرابط لترسله إلى معلمك.
٥المكوّنات: صمّم مرة واستخدم كثيرًا
الزر الأساسي يتكرر في كل الصفحات. في Figma نحوّله إلى مكوّن Component (بالزر الأيمن ← Create component). بعدها كل نسخة منه ترتبط بالأصل: لو غيّرت لون الأصل تغيّرت كل النسخ.
هذه الفكرة نفسها ستراها في CSS: تكتب تنسيق الزر مرة واحدة، فتطبّقه على كل الأزرار. وهذا يحقق الاتساق.
توقّع وتحقّق
ما أول أداة تستخدمها لتصميم شاشة جوال في Figma؟
أين تغيّر لون العنصر المختار؟
ما فائدة المكوّن Component؟
أي أداة أنسب لتصميم منشور سريع من قالب جاهز؟
Canva للقوالب السريعة.الخلاصة
- نصمم قبل أن نبرمج لأن التعديل في الرسم أسرع بكثير.
Figmaلتصميم الواجهات بدقة، وCanvaللتصاميم السريعة من القوالب.- كل شاشة تبدأ بإطار
(F)بمقاس جهاز. - المكوّن: صمّم العنصر مرة، وكل نسخه تتبع الأصل.
تحدٍّ تصميمي: شاشة جوال في Figma
سهلصمّم في Figma شاشة جوال واحدة لصفحة مقهى «بُنّ» الرئيسية، مستخدمًا دليل الهوية من الدرس السابق. أرسل رابط المشاركة لمعلمك.
- إطار بمقاس جوال.
- شريط علوي فيه الشعار.
- عنوان كبير وجملة قصيرة تحته.
- صورة (أو مستطيل مكانها).
- زر أساسي «اطلب الآن» محوّل إلى مكوّن.