👨‍🍳 🔋 🤹 مراجعة 14 مكونًا إضافيًا لـ Figma والتي ستساعد على زيادة الإنتاجية بينما نحن جميعًا 👨🏼‍⚖️ 🤾🏽 🔥

اليوم سنتحدث عن ملحقات Figma الجديدة التالية:

AutoGrid - دعم الشبكة لـ AutoLayout.
التعقب - مكون إضافي لإنشاء تعليقات توضيحية للتتبع.
البحث عن الألوان واستبدالها - تنظيم أنماط الألوان في تصميماتك
Spacing Manager - Plugin لزيادة المسافة البادئة في المكونات
Geometric –
Halftones – ,
Batch Styler –
Spell Inspector —
Sitemap –
Style Organizer —
Focus CSS — CSS Figma
Flipbook – Figma
SwiftUI Inspector – Apple
Filter –

تحية للجميع! نأمل أن تكونوا بخير خلال هذه الأزمة.

كان لانتشار COVID-19 تأثير على العالم كله ، وقد تحول العديد منا الآن تمامًا إلى العمل عن بُعد. كان من الصعب على الكثيرين البقاء في المنزل مع الأطفال والبقاء منتجين ، ولكن يجب علينا جميعًا أن نبقى محترفين ونساعد مجتمعنا.

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

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

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

حسنًا ، دعنا الآن نتعمق في تحليل الإضافات! نبدأ من المكان الأخير - كل ما هو أكثر إثارة للاهتمام في انتظارك أدناه.

14. خريطة الموقع

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

13. الألوان النصفية

بمساعدة Halftones ، يمكنك تطبيق فلاتر نقطية ونصفية الألوان على صورك.

ما عليك سوى اختيار صورة واحدة أو أكثر ، وتحديد نوع الفلتر الذي تريد تطبيقه (النقاط أو تأثير الألوان النصفية). ثم ، باستخدام أشرطة التمرير ، حدد زاوية الصورة وحجمها ، انقر فوق "تطبيق" وفويلا - أصبحت صورتك أكثر عصرية.

12. Flipbook

خفف تصنيفنا مع جزء صغير من المرح من خلال البرنامج المساعد Flipbook! هذا هو البرنامج المساعد لتحريك التصميم الخاص بك في Figma. لديها العديد من الميزات ، بما في ذلك المعاينة في الوقت الحقيقي ، وتغيير السرعة ، وتعديل سرعة الرسوم المتحركة باستخدام شريط التمرير ، بالإضافة إلى الرسوم المتحركة العكسية والتصدير إلى GIF.

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

11. المفتش الإملائي

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

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

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

10. التركيز CSS

سيعمل هذا البرنامج المساعد على تحسين عملية العمل مع CSS في Figma واكتشاف الأنماط غير المتسقة.

ميزات البرنامج المساعد:

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

9. التتبع

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

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

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

8. مرشح

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

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

في الوقت الحالي ، لديك أكثر من 30 فلترًا تحت تصرفك ، بما في ذلك: Bulge Pinch ، Color Halftone ، Cartoon ، Triangle Blur ، Denoise ، Lens Blur ، Night Vision ، Crosshatch والعديد من الفلاتر الأخرى.

7. SwiftUI المفتش

هل تعمل مع Swift وتبحث عن أداة لمساعدتك في نقل أنماط العناصر من Figma إلى Xcode؟ يمكنك إيقاف البحث ، لأن SwiftUI Inspector سوف يحل هذه المشكلة. باستخدام هذا البرنامج المساعد الرائع ، يمكنك تصدير أنماط عناصر التصميم الخاصة بك إلى رمز SwiftUI.

تتضمن الميزات المدعومة: الألوان وتسميات النص والأشكال الأساسية. يعد مؤلف المكون الإضافي بإضافة دعم للعناصر مثل المكونات والمتجهات والظلال في المستقبل القريب.

6. هندسية

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

5. مدير التباعد

لقد صادف العديد من المصممين ممارسة تطبيق المسافات البادئة المختلفة بين العناصر. تم وضع مسافة بادئة لبعض العناصر 10 بكسل ، والبعض الآخر - 14 بكسل ، إلخ. لاحقًا ، إذا كنت بحاجة إلى إجراء تغييرات في المسافة البادئة ، فسيتعين عليها تغيير كل عنصر يدويًا. حل AutoLayout هذه المشكلة. ومع ذلك ، باستخدام المكون الإضافي Spacing Manager ، يمكنك تحسين عملية المسافة البادئة.

4. البحث عن الألوان واستبدالها

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

يتوفر المكون الإضافي للعمل مع أي نوع من الملفات ، سواء كانت مكونات أو مثيلات أو مستطيلات أو إطارات أو كائنات متجهة أو نصوص.

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

3. دفعة الطراز

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

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

2. منظم النمط

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

ضع في اعتبارك أيضًا أن Style Organizer لا يدعم ميزة التحديث التلقائي عند إجراء تغييرات التصميم. ستحتاج إلى النقر فوق الزر "تحديث" بعد إجراء التغييرات.

1. AutoGrid

ربما تواجه موقفًا تحتاج فيه إلى إنشاء عدة طبقات AutoLayout للتأكد من أن البطاقات في التخطيط الخاص بك في حالة نظيفة؟

هذا البرنامج المساعد هو حل رائع. يعتني AutoGrid بكل ما يتعلق بالشبكة. كل ما عليك فعله هو تحديد الأعمدة والصفوف والمسافات البادئة ، وستقوم AutoGrid بالباقي.

البرنامج المساعد سهل الاستخدام:

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

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

نختار AutoGrid و Style Organizer و Batch Styler كقادة في تصنيف اليوم ، لأن هذه المكونات الإضافية مفيدة للغاية وتسريع عمليات التصميم ، خاصة عندما يتعلق الأمر بإنشاء أنظمة التصميم.

نأمل أن تكون هذه المجموعة من المكونات الإضافية مفيدة لك. إذا كنت بحاجة إلى أنظمة وقوالب تصميم Figma احترافية ، فراجع Setproduct.com. حسنًا ، من جانبنا ، سنبقيك على اطلاع بكل جديد. ابق معنا و # ابق في المنزل!