القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

عالم برامج تصميم الجرافيك ضخم ولديه الكثير من المنافسة. Figma هي إحدى أدوات التصميم التي تتسابق إلى الصدارة لمصممي UX / UI حول العالم. لكن ماذا تعرف عن هذه الأداة البديهية؟

على الرغم من أنه أمر بسيط ، إلا أنه يوجد أيضًا منحنى تعليمي إذا كنت معتادًا على أدوات التصميم الأخرى. دعونا نلقي نظرة على Figma وكيفية استخدامها. مرحبًا بك في Figma 101.

ما هو فيجما؟

إذا كنت قد عملت كمصمم جرافيك أو مصمم ويب في السنوات العديدة الماضية ، فمن المحتمل أنك سمعت عن Figma. ربما تكون قد استخدمتها.

Figma هي أداة تصميم وأصبحت بشكل مطرد مفضلة للمصممين الرقميين ، حيث تجاوزت خيارات مثل Adobe XD و Adobe Photoshop و Sketch لتصميم الويب والمزيد. لكن منذ استحوذت Adobe على Figma في عام 2022، قد تكون هناك بعض التغييرات التي من شأنها تعديل لوحة الصدارة.

هناك العديد من الاستخدامات لـ Figma. يتم استخدامه بشكل أساسي للتصميم الرقمي ، ولا يمكنك التصميم في CMYK للطباعة. تتضمن بعض الاستخدامات الرئيسية لـ Figma ما يلي:

  • النماذج
  • تصميم UX / UI
  • تصميم التطبيق
  • تصميم المواقع
  • تصميم العروض التقديمية

أنت تستطيع استخدام الإضافات فيجما mockup للمساعدة في إظهار تصميماتك ، تحويل صفحات الويب الحقيقية إلى تصاميم Figma باستخدام المكونات الإضافية ، وحتى إنشاء القوالب الرئيسية لتصميمات Figma لتوفير الوقت في أنواع التصميم المتكررة.

كم تكلفة فيجما؟

يمكنك إنشاء حساب Figma مجانًا على موقع فيجما أو عن طريق تنزيل ملف تطبيق فيجما. يوفر الحساب المجاني وظائف لجميع جوانب تصميم التطبيق. يمكنك التصميم باستخدام Figma و FigJam — أداة تعاون Figma.

إذا كنت تستخدم Figma كهاوي أو كمستقل وحيد ، فإن إصدار Free Forever مثالي تقريبًا. لا يزال بإمكانك الوصول إلى جميع المكونات الإضافية ، ويمكنك دعوة عدد غير محدود من المتعاونين ، واستخدام ملفات شخصية غير محدودة ، واستخدام Figma من جميع الأنظمة الأساسية.

في حين أن الإصدار المجاني من Figma يقدم أكثر من كافٍ لأي مصمم قياسي ، فإن اشتراك Figma Professional يسمح لك بذلك قم بدعوة زملائك في الفريق ، والعمل من مكتبات الفريق ، والوصول إلى ملفات Figma وتاريخ الإصدار غير المحدود ، والمزيد ، مقابل 12 دولارًا شهريًا لكل شهر محرر. إذا كنت طالبًا أو معلمًا ، فيمكنك الحصول على Figma Professional مجانًا.

كيفية استخدام Figma: الأساسيات

سواء كنت تستخدم تطبيق Figma أو إصدار المتصفح ، يمكنك المتابعة بسهولة.

عند فتح Figma ، ستظهر لك خيارات لبدء ملف Figma جديد ، أو ملف FigJam جديد ، أو استيراد ملف تم إنشاؤه في برنامج آخر ، مثل Sketch أو Adobe XD. إذا كنت قد استخدمت Figma من قبل ، فسترى أيضًا مشاريع Figma السابقة التي يمكنك فتحها والعمل عليها.

التنقل في مساحة عمل Figma

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

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

بعد ذلك ، ستجد ملف يتحرك أداة (الخامس)، مع ال حجم أداة (ك) التي تقع تحتها. هذه الأدوات مخصصة لتحريك العناصر أو تغيير حجم أجزاء التصميم لأعلى أو لأسفل. وإلى يسار هذه الأدوات ، سترى أدوات المنطقة ، إطار (F), قسم، و شريحةمعا.

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

بالعودة إلى القائمة العلوية اليسرى ، على يمين أدوات المنطقة توجد ملفات شكل أدوات، قلم الأدوات و نص أداة. تليها "الموارد" -عناصر, الإضافات، و الحاجيات-و ال يُسلِّم أداة للتنقل في ملفك. وأخيرًا ، فإن تعليقات أداة رائعة لتدوين الملاحظات والتعاون مع الزملاء.

قائمة تصميم Figma

مع رسم الإطار ، يؤدي تحديد عنوانه إلى تنشيط الإطار ، ويكون جاهزًا للتصميم. تعرض القائمة اليمنى عناوين لـ تصميم, النموذج المبدئي، و فحص. كما يوحي الاسم ، فإن خيار التصميم هو القائمة التي ستستخدمها لتصميم العناصر في إطارك.

في حين أن قائمة التصميم الأولية بسيطة إلى حد ما ، حيث تقوم بإضافة المزيد من العناصر إلى تصميمك ، فإن خيارات القائمة تتطور. في البداية ، يتم تشغيل القائمة من الأعلى إلى الأسفل باستخدام أدوات المحاذاة وأدوات التحجيم تخطيط تلقائي, شبكة التخطيط, طبقة, يملأ, سكتة دماغية, تأثيرات، و يصدّر. يتم تصغير بعض هذه بشكل افتراضي ولكن عن طريق النقر فوق + تسجيل الدخول ، يمكنك فتح أي قائمة أو الضغط على لتقليلها.

بمجرد رسم الإطار الرئيسي للمشروع ، يمكنك استخدام أدوات الشكل أو أدوات القلم لرسم الأشكال أو أضف عناصر نائبة للصور ، ويمكنك إضافة نص باستخدام أداة النص بطرق ربما تكون قد فعلتها بطرق أخرى برمجة.

بمجرد أن يكون لديك أشكال أو نص في الإطار ، استخدم خيارات القائمة اليمنى المتنوعة لتحرير تلك العناصر وتصميمها. ال طبقة تقدم القائمة أوضاع التعتيم والمزج ؛ مع يملأ يمكنك إضافة لون أو إدراج الصور مع بعض ميزات التحرير مثل التعرض, مقابلة, درجة حرارة، و اكثر.

أثناء قيامك ببناء المزيد من العناصر في مشروعك ، ستتشكل الطبقات على اليسار طبقات القائمة بجانب أصول فاتورة غير مدفوعة. يمكنك النقر نقرًا مزدوجًا فوق عنوان الطبقة للعثور على العنصر والعكس صحيح ؛ يمكنك النقر نقرًا مزدوجًا فوق عنصر تصميم للعثور على الطبقة المميزة. يسمح لك النقر المزدوج على العناوين بإعادة تسميتها من أجل التنظيم الأمثل.

قائمة نموذج فيجما

على يمين تصميم خيار القائمة هو النموذج المبدئي قائمة طعام. بمجرد الانتهاء من الجوانب المرئية لتصميمك وتعيين مربعات الصور والنص في المكان الذي ينبغي أن ينتقلوا إليه ، يمكنك استخدام أدوات النموذج الأولي لإضافة الحركات والانتقالات إلى تصميماتك.

ال النموذج المبدئي تسمح لك القائمة بتوصيل الإطارات أو المكونات معًا كتحولات. يمكنك اختيار أي ترتيب وكيف ينتقل كل إطار إلى آخر.

هذا يعمل بشكل رائع إذا كنت كذلك تقديم عرض فيجما يتحرك من شريحة إلى أخرى ، ولكن الأداة تسمح لك أيضًا بخبرة بتصور الرسوم المتحركة للأزرار أو القوائم الخاصة بالتطبيقات وتصميم الويب. يمكنك إضافة انتقالات متعددة لكل صفحة لجميع الأشياء المختلفة ، حتى تتمكن من معرفة كيفية تفاعل المستخدمين مع موقع الويب الخاص بك عندما يكون مباشرًا.

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

البدء مع فيجما سهل

أنت الآن تعرف كيفية التنقل في تخطيط Figma وكيف تعمل أدوات التصميم والنموذج الأساسي. نظرًا لأنه يسهل الوصول إلى Figma ، فقد حان الوقت لبدء العمل مع أداة التصميم هذه ومعرفة ما يمكنك إنشاؤه.