12 أساسيات مجانية رسم إضافي الإضافات
عندما يخرج رسم 44 من بيتا ، نلقي نظرة على أحد أفضل ميزات Sketch: التحديد الهائل للمكونات مفتوحة المصدر.
إن منتدى Sketch داعم للغاية ، ويمكنك العثور على الكثير من الإضافات المذهلة التي ستعمل على تحسين سير عملك بشكل جذري. في هذا المنشور ، سأقوم بتغطية أفضل 12 ملحقًا إضافيًا من Sketch يجب أن يكون لدى كل مصمم.
1. رسم التدبير
رسم تخطيطي يساعد المصممين على تنظيم وتحديد أعمالهم للمطورين ومديري المشاريع وأعضاء الفريق الآخرين.
ولكن هذا أيضا مفيد بشكل لا يصدق لوحيد الذئاب الذين يصممون ورمز كل مشاريعهم. باستخدام المكون الإضافي Measure ، يمكنك تحديد العناصر التي تعرض أبعاد عرض / ارتفاع محددة للحصول على القياسات المناسبة في لمح البصر.
يتضمن ذلك جميع عناصر الصفحة مثل الأزرار ، والنص ، والرموز ، وحتى الأجزاء الرئيسية من لوح الرسم.
باستخدام Sketch Measure ، يمكنك حتى تصدير الصفحات إلى HTML / CSS مع أنماط الصفحة براعة. منح هناك أدوات أدوبي يمكن أن تفعل هذا أيضًا. ولكن وجود كل هذه الوظائف في Sketch يجعل عملك أسهل بكثير.
2. InVision Craft
وأثناء العودة أعلن فريق InVision عن مكون إضافي جديد حرفة . ولكن هذا يشبه إلى حد كبير مجموعة من الإضافات حيث تحصل على الكثير من الميزات والاختصارات الإضافية.
مثال واحد هو مكوّن البيانات الإضافي مما يسمح للمصممين بسحب النصوص / البيانات مباشرة من واجهات برمجة التطبيقات العامة على الويب. وبهذه الطريقة ، يمكنك ملء تطبيقك تلقائيًا بالمحتوى والصور الحقيقية أثناء التنقل.
يقوم مطورو InVision بتحديث الحرف باستمرار مع ميزات الإضافات الجديدة لجعل هذا أكثر قيمة للمصممين. وهل ذكرت أن هذا مجاني تمامًا؟
حتى الآن ، تضم Craft 6 ميزات إضافية للمكون الإضافي ، وكلها تستحق أن تضيف إلى سير العمل في التصميم.
- الحرية - التعاون في الوقت الفعلي في Sketch
- النموذج المبدئي - ديناميكية عالية الدقة النماذج
- مزامنة - المزامنة الفورية بين نماذج InVision و Sketch
- البيانات - اسحب بيانات حقيقية من الويب إلى نموذج رسم تخطيطي للرسوم المتحركة
- مكتبة - تصميم أصول في السحاب قابلة للمشاركة مع فريقك بالكامل
- مكرر - استنساخ واجهة المستخدم بسرعة البرق
إلقاء نظرة على الصفحة الرئيسية الحرفية ونرى ما هو رأيك. بمجرد محاولة ذلك لن ترغب في العودة.
3. أدوات الرسم
كل مستخدم Sketch يجب أن يعرف عن أدوات الرسم . إنه مدير مكون إضافي رائع يجعل تثبيت المكونات / تخصيصها أسهل كثيرًا.
باستخدام مربع الأدوات هذا ، يمكنك استعراض مئات المكونات الإضافية Sketch واختيار أي منها تريد تثبيته. ما عليك سوى النقر فوق ما تريد ، وسيتم تنزيله تلقائيًا على جهاز الكمبيوتر الخاص بك ، وهو جاهز للاستخدام.
ويقوم تطبيق Sketch Toolbox بتحديث المكونات الإضافية تلقائيًا للحفاظ على تشغيلها بسلاسة.
من الناحية الفنية ، لا يزال هذا في الإصدار التجريبي ويتلقى دائمًا تحديثات جديدة على جيثب . ولكنني أعتقد أنه قوي بما يكفي لاستخدامه في سير عمل الإنتاج. في الواقع ، سأجادل بأن سير العمل الجيد لن يكون مكتملًا بدون هذا البرنامج المساعد الرائع.
4. أصول التصدير
واحدة من المهام الأكثر تفصيلا للمصممين هو تخصيص الموارد ومشاركتها مع المطورين. جميع الرموز الصغيرة ، والرسومات ، وأنماط الخلفية ، كل هذه تحتاج إلى أن يتم تصديرها (عادة باليد).
ال تصدير الأصول المكونات يجعل هذه العملية نسيم. لاحظ أن هذا القابس مصنوع خصيصًا لتطبيقات الجوال حيث يحتاج المصممون إلى تصدير أصول واجهة نظام Android / iOS. وهذا يشمل أصول شبكية العين لأحجام الشاشات @ 2x و 3 x.
لم أر أي ميزات تتعلق بتصميم شبكية العين على شبكة الإنترنت ، ولكن يمكنك التحقق من مصدر كروكي البرنامج المساعد أيضا. إنها حاليًا في مرحلة تجريبية ومن المفترض أن تكون نسخة محسنة من النسخة الأصلية.
5. مولد المحتوى
المكوِّن الإضافي "Craft" الذي أشرت إليه سابقًا يوفر إمكانية إنشاء المحتوى. ولكن قد تحتاج إلى شيء أبسط قليلاً مثل هذا مولد المحتوى من جانب تيمور كاربييف.
باستخدام هذا التثبيت ، يمكنك ملء عناصر رسم تخطيطي متعددة في وقت واحد مع البيانات ذات الصلة مثل:
- الصور الشخصية للمستخدم
- الاسم الأول واسم العائلة
- نص فقرة وهمية
- سلاسل مخصصة (geos، prices، CC card numbers، etc)
يتم سحب جميع المحتويات من قواعد البيانات مفتوحة المصدر مثل Unsplash و Uinames بحيث يمكنك استخدام هذا على عدة مشاريع ، تجارية أو غير ذلك.
6. وبير
يحتوي Photoshop على لوحة الإجراءات الخاصة به حيث يمكنك أتمتة الإجراءات المتكررة. لا يحتوي Sketch على لوحة مثل هذه لكنه يمتلك لوحة وبير البرنامج المساعد وهي مجانية بالكامل وسهلة التعلم.
هذا هو الأكثر فائدة لإنشاء الأنماط المتكررة التي تسيطر على الصفحة بأكملها. قد يجد مصممو الجرافيك مزيدًا من الاستخدام لهذا المكوِّن الإضافي من مصممي الويب ، إلا أنه يمكن أن يوفر الكثير من الوقت خلال تكرار مهام القياس / التكرار المتكررة.
خذ نظرة خاطفة في Looper الصفحة الرئيسية لمعرفة ما يمكن القيام به. قد لا يكون ذلك مفيدًا للجميع ، ولكن بالنسبة لأولئك الذين يمكنهم استخدامه ، ستجد نفسك توفر الكثير من الوقت.
7. رسم Iconfont
مصممي الويب الحب الخطوط رمز . تجعل الرموز الرائعة تصميم واجهة المستخدم أسهل كثيرًا وملفات الخطوط أصغر عمومًا من الصور.
ال رسم البرنامج المساعد Iconfont هي مجموعة إدارة كاملة لتخزين خطوط التصنيف وتصنيفها وسحبها إلى Sketch مباشرة. بشكل افتراضي ، يأتي المكوّن الإضافي فارغًا ، لذا سيلزمك تنزيل خطوط الرموز محليًا لاستخدامها.
ولكن هذا يمنحك الوصول الكامل للعمل مع أي خطوط رمز تجد على الإنترنت. هناك في الواقع حزمة حزمة الخط خصيصًا لهذا المكون الإضافي إذا كنت تبحث عن ملء مجلد iconfont بسرعة. ويمكنك دائمًا تصفح الويب لمزيد من الوقت مع مرور الوقت.
أنا أوصي تماما بأخذ نسخة من هذا البرنامج المساعد. خطوط الأيقونة موجودة لتبقى وأنها لا تقدر بثمن إلى المواقع الحديثة.
8. الجرد النمط
عندما تبدأ ملف رسم جديد ، عليك إما إعادة إنشاء أنماط من البداية ، أو تحتاج إلى نسخ / لصق أنماط من نماذج بالأحجام الطبيعية السابقة.
مع ال المساعد الجرد النمط يمكنك تجاوز كل هذا العمل الإضافي. يستورد عدد قليل من النقرات جميع أنماطك السابقة في مستند Sketch الجديد لتسهيل الوصول إليه.
تتضمن هذه الأنماط الألوان وأنماط النص والرموز ، بالإضافة إلى أنماط الطبقات لعناصر معينة.
نادرًا ما يتم تحديث هذا المكون الإضافي ولكنني أوصي به لدمج نماذج بالأحجام الطبيعية المماثلة. قد تحاول أيضا رسم لوحة الإضافات لحفظ واستيراد أنظمة الألوان.
9. بكسل الكمال
كل مصمّم رقمي يفخر بنفسه بالأحجام بالأحجام الطبيعية. هذه المهمة ليست صعبة ولكنها تتطلب أن يكون كل عنصر تصميم متماسكًا تمامًا مع الشبكة دون ترك أي تداخل أو عيوب.
إذا كنت ترغب في التحقق من عملك قبل التصدير ، فيمكنك تشغيله بكسل الكمال . يقوم هذا المكون الإضافي الصغير بالتحقق من جميع أصول ملفاتك لمعرفة ما إذا كانت أي من وحدات البكسل تتجاوز مواقع الإحداثيات التقليدية X / Y لإنشاء وحدات بكسل غير كاملة.
لاحظ أن هذا لن يؤدي إلى إصلاح قيم وحدات بكسل الإزاحة هذه تلقائيًا. ستجد فقط الطبقة (الطبقات) مسببة المشكلات وتسلط الضوء عليها حتى تتمكن من الدخول إليها وإصلاحها بنفسك. لا يزال يوفر الكثير من الوقت في التحقق من كل طبقة يدويا.
10. زر ديناميكي
تم التخلي عن العنصر الإضافي للزر الديناميكي الأصلي إلى حد ما في عام 2015 ، ولكن الأحدث زر ديناميكي البرنامج المساعد هو أفضل ومتوافق مع Sketch 3.5+.
يضيف تلقائياً أنماط الحشو والزر إلى أي طبقة نص تقوم بإنشائها ، ويكون الحشو ديناميكيًا بحيث يتم تحديثه بغض النظر عن حجم النص. هذا مفيد جدًا لمصممي واجهة المستخدم الذين يجرون تغييرات باستمرار على نماذجهم الطبيعية.
ويمكن أيضًا استخدام ذلك لتطبيقات الجوال حيث تتبع الأزرار عمومًا حجمًا / نسبة ثابتة. انها ليست أكثر المكونات Sketch براقة ولكنها تقوم بمهمتها بشكل جيد.
11. كمبيو
إذا كنت تريد مولد زر جنبا إلى جنب مع بعض الميزات الإضافية ثم Compo plugin يستحق الاختبار.
حصل مُنشئ Composo على الفكرة بعد استخدام المكوّن الديناميكي للأزرار Dynamic Button لبعض الوقت ، وفي النهاية أراد شيئًا أسرع قليلاً. Compo يولد تلقائيا حجم الزر المناسب وحجم النص لتتناسب مع المواصفات الدقيقة الخاصة بك. بنقرة واحدة ولديك مكون Sketch عملي يتم ضبط حجمه ووضعه بشكل صحيح.
عادة عندما تقوم بإنشاء زر وتغيير النص فإنه يؤثر فقط على طبقة النص. لذلك سيكون الزر الأساسي صغيرًا جدًا. Compo يقوم تلقائيًا بتغيير حجم الزر والنص كما لو كان عنصرًا واحدًا.
يمكنك العثور على طن من العروض على جيثب ريبو جنبا إلى جنب مع بعض أدلة المستخدم للبدء.
12. CSSketch
وأخيرا ولكن بالتأكيد ليس أقلها CSSketch توصيل في. هذا هو الأكثر فائدة لمجموعات المطور + المطور الذين يريدون الوصول المباشر إلى رمز CSS لجميع الأنماط التي يقومون بإنشائها.
يمكن تشغيل أي صفحة تقوم بتصميمها من خلال هذا المكون الإضافي لتصدير ورقة أنماط كاملة مع جميع الأصول المشمولة. ولكن نظرًا لأنه يتم آليًا ، لا يمكنك توقع رمز جودة A ++.
ما زلت أفضّل ترميز CSS يدويًا ، إلا أن هذا المكون الإضافي يقدم على الأقل نقطة بداية للمصممين أو المطورين غير الفنيين الذين يريدون توفير بعض الوقت.
