ما هي Figma؟
Figma أداة لتصميم الواجهات وبناء النماذج التفاعلية تعمل داخل المتصفح. لها تطبيق لسطح المكتب أيضًا، لكن ما يميّزها حقًا أن الملفات محفوظة في السحابة وأن عدة أشخاص يستطيعون العمل على الملف نفسه في آن واحد. فبينما يرسم مصمم شاشة، يمكن لآخر أن يصحّح النص، ويمكنك أنت أن تترك تعليقًا على الجانب.
بفضل المكوّنات ومتغيّراتها يُصمَّم الزر أو البطاقة أو القائمة مرة واحدة ويبقى كما هو في كل مكان من الموقع. وتتيح ميزة Auto Layout للعناصر أن تعيد ترتيب نفسها كلما تغيّر محتواها، بينما تدير المتغيّرات (variables) قيمًا مثل الألوان وأحجام الخطوط والمسافات من مكان واحد. وهكذا يتحول التصميم من صورة إلى نظام يعيش بقواعده.
تربط ميزة النماذج التفاعلية الشاشات بعضها ببعض، فيمكن تصفّح التصميم بالنقر كأنه موقع حقيقي. أما وضع المطوّر (Dev Mode) فيقدّم المقاسات وأكواد الألوان وإعدادات الخطوط والصور القابلة للتصدير جاهزةً لفريق البرمجة. وهذا المسار المتكامل هو ما جعل Figma الأداة المعتمدة لدى كثير من فرق المنتجات والتصميم في العالم.
أين نستخدم Figma
نتخذ كل القرارات في Figma قبل كتابة أي شيفرة. وفي مشاريع الويب نفتح Figma غالبًا لهذه المهام:
المخطط الهيكلي وبنية الصفحات
نبني أولًا هيكل الصفحات: أي قسم يأتي أين، وأي معلومة تأتي أولًا، وكيف يصل الزائر إلى نموذج طلب العرض. نتفق على البنية قبل الألوان والصور.
تصميم سطح المكتب والجوال
نصمّم كل شاشة للشاشات العريضة وللهواتف كلٌّ على حدة. فتصميم الهاتف ليس نسخة مصغّرة من سطح المكتب، بل تُدرَس فيه مساحات اللمس وترتيب القراءة بعناية.
نظام التصميم
نجمع ألوان علامتك ومقاييس خطوطها وأزرارها وبطاقاتها في مكتبة مكوّنات، فتُبنى أي صفحة جديدة تُضاف إلى الموقع من القطع نفسها وبالاتساق نفسه.
النموذج التفاعلي والاعتماد
نحوّل المسارات المهمة إلى نماذج قابلة للنقر ونشاركها معك، فتترك ملاحظاتك مباشرة على الشاشات ولا تضيع في سلاسل البريد الإلكتروني.
لماذا Figma؟
ملف واحد وفي الوقت نفسه
ينظر المصمم والمطوّر وأنت إلى الملف نفسه، فلا يعمل أحد على نسخة قديمة، ويصل كل تغيير إلى الجميع فورًا.
اتساق مدمج في النظام
بفضل المكوّنات والمتغيّرات، حين نغيّر لونًا أو زرًا يتحدّث في كل شاشة تستخدمه، فيبقى المظهر متماسكًا حتى مع نمو الموقع.
من التصميم إلى الشيفرة دون فاقد
ينقل وضع المطوّر المقاسات والقيم كما هي، فلا يبقى فرق «تقريبي» بين التصميم الذي اعتمدته والموقع الذي يُطلق.
كيف نعمل على مشروعك
بعد جلسة الاستكشاف نرسم بنية الصفحات في مخططات هيكلية، ثم ننتقل إلى التصميم المرئي بموافقتك. نصمّم الصفحة الرئيسية وصفحة داخلية أساسية أولًا لنحدد الاتجاه معًا، ثم نُكمل بقية الشاشات بالنظام نفسه.
حين يُعتمد التصميم يصبح ملف Figma المرجع الوحيد للتطوير، فنأخذ منه المقاسات والألوان مباشرة أثناء البرمجة. والصفحات التي تُضاف لاحقًا تُصمَّم بالمكوّنات نفسها، فلا يتشتت المظهر مع نمو الموقع.
