Figma: التصميم والنموذج الأولي والتعاون عبر المؤسسة

FIGMA

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

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

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

FIGMA

FIGMA يركز الكثير من هذا العمل على نظام أساسي يتيح التصميم والتغذية الراجعة والتعاون عبر كل عضو في فريقك ، بما في ذلك:

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

تتمتع Figma ببعض الميزات الفريدة:

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

النماذج الأولية المستجيبة

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

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

ابدأ مع Figma

لدى Figma مجموعة رائعة من البرامج التعليمية التي يحتفظون بها في ملفات قناة يوتيوب، إليك مقطع فيديو "الخطوات الأولى":

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

جرب Figma مجانًا

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.