10 ملحقات مجانية للرسم لمطوري الويب

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

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

1. المغلق الأصدقاء

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

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

2. المواد لون لوحة التصميم

إذا اتبعت اتجاه Design Material ، فإن الشيء البارز الذي ستلاحظه هو استخدام الألوان المميزة. المواد التصميم لديه لوحة الألوان رهيبة. الآن يمكنك إحضار ذلك إلى مساحة العمل الخاصة بك مع المواد تصميم لون لوحة البرنامج المساعد.

سيقوم هذا المكون الإضافي بإنشاء لوحات ألوان في ثوانٍ دون الحاجة إلى إغلاق مساحة العمل الخاصة بك. اختر Hue أو Value أو Swatch لإنشاء لوحة ألوان مناسبة لمشروعك.

3. دفتر رسم

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

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

4. يوم لاعب

قبل استخدام الصور الحقيقية في التصميم ، نستخدم صور العناصر النائبة غالبًا لتسريع عملية التصميم. للرسم ، يمكنك استخدام لاعب اليوم لإضافة عناصر نائبة مخصصة إلى أي طبقة على مساحة عمل Sketch الخاصة بك من 6 خدمات صور نائبة بما في ذلك Placehold.it و LoremPixel و Unsplash. بمجرد التنشيط ، يمكنك ضبط عرض الصورة وارتفاعها والمعلومات الأخرى.

5. مولد المحتوى

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

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

6. رسم قياس

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

7. زر ديناميكي

زر ديناميكي يساعدك على إنشاء زر مع الحشوات الثابتة بسهولة. سيقوم تلقائيًا بضبط الحشوة بناءً على القيمة التي تعطيها ، بغض النظر عن طول النص. مع تثبيت المكوّن الإضافي ، يمكن تحويل النص إلى بنية باستخدام الاختصار Command + J. يمكن بعد ذلك ضخ مقدار الحشو المطلوب في طبقة النص (0: 0: 0: 0) (ضمن مجموعة أزرار المرن).

8. مقياس مطبعي

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

9. المغير

مع Modulizer يمكنك التحكم في الحشوات للزر أو الوحدة النمطية أو المساحات في التصميم الخاص بك باستخدام اختصار لوحة المفاتيح Shift + Command + M. . شاهد العرض التوضيحي للفيديو لمشاهدة ذلك أثناء العمل.

10. بليد

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

عند استخدام Blade ، يمكنك إخبار المكون الإضافي بعنصر DOM المطلوب إنشاؤه عن طريق إضافة اسم خاص إلى الطبقة ، مثل [btn] أو إدخال [text] حتى يعرف Blade ما يجب القيام به. تحقق من هذا الفيديو التجريبي لإلقاء نظرة من الداخل.

اقرأ الآن: 12 إضافات مفيدة لمطوري WordPress