10 חינם סקיצה תוספים עבור מפתחי אינטרנט

סקיצה הוא מקבל הרבה מתיחה בין מעצבי אינטרנט ומפתחים. זה כנראה בגלל זה אינטואיטיבי, קל ללמוד ומגיע עם תכונות רבות שעושה את זה הרבה יותר קל ליצור אב טיפוס אתר. זה יכול להיות גם בגלל יישום זה ניתן להרחבה כלומר אתה יכול להוסיף תכונות חדשות ליישום בקלות בעזרת plugins.

להלן 10 תוספים שיכולים לעזור לך להגביר את הפרודוקטיביות שלך בעבודה עם Sketch. יש מגוון, החל גנרטורים תוכן, בורר צבעים צבע, והם יכולים לעזור לך להציג מדידות השכבה או להוסיף באופן אוטומטי ריפוד לשכבה.

1. CSS באדי

CSS באדי מאפשר לך להוסיף את ה- CSS לשכבה שלך בסביבת העבודה של Sketch. ביסודו של דבר, ניתן להחיל רוחב, גובה, אטימות, תיבת צל, גבול ורקע לשכבה באמצעות CSS.

עם תוסף זה מותקן, פשוט לבחור שכבה ואז לבחור החל על בחירה מתפריט הפלאגין. תיבת דו-שיח תנחה אותך להזין את גיליון הסגנונות שלך. הוסף את תוכן CSS ללא כיתת CSS וצפה בשכבה שלך.

2. חומר עיצוב צבע הצבעים

אם אתה מבין את המגמה של עיצוב חומר, דבר בולט תוכלו להבחין הוא השימוש בצבעים ייחודיים. עיצוב חומר יש לוח צבעים מדהים. עכשיו אתה יכול להביא את זה למקום העבודה שלך עם חומר עיצוב צבע תוסף צבעים.

תוסף זה יפיק לוחות צבע בתוך שניות מבלי שיהיה עליך לסגור את סביבת העבודה שלך. בחר 'גוון', 'ערך' או 'דוגמית צבע' כדי ליצור לוח צבעים שמתאים לפרויקט שלך.

3. מחברת סקיצה

לפעמים אנחנו צריכים להראות את מה שאנחנו עושים בהערה או באמצעות תיעוד. אם אתה עובד על פרויקטים עם מעצבים אחרים או מעורבות של הלקוח, זה גם הכרחי כדי שתוכל להבטיח כי התוצאה היא מה כולם התכוון.

מחברת סקיצה הוא תוסף עבור תיעוד העיצוב שלך סקיצה בקלות. הוא יוסיף סרגל צדדי נוסף לסביבת העבודה שלך, המכיל הערות שתוסיף לכל רכיב בעיצוב שלך. אתה יכול לסדר מחדש את התגובה, reign, למחוק ולהחליף את הנראות תגובה.

4. נגן יום

לפני השימוש בתמונות אמיתיות בתכנון, לעתים קרובות אנו משתמשים בתמונות מצייני מיקום כדי להאיץ את תהליך התכנון. עבור Sketch, תוכל להשתמש שחקן יום כדי להוסיף placeholders מותאמים אישית לכל שכבה על סביבת העבודה שלך סקיצה מ 6 שירותי מיקום מציאת מיקום כולל Placehold.it, LoremPixel ו unsplash. לאחר ההפעלה, תוכל להגדיר את רוחב התמונה, גובהה ומידע אחר.

5. מחולל תוכן

כבר יש לנו פלאגין להוספת תמונות מצייני מיקום, מה דעתך על תוכן כללי? מחולל תוכן מסייע לך להוסיף נתונים דמה כגון avatars, שמות, נתונים geolocation ועוד. עובד נהדר עבור עיצובים mockup ולהפחתת כאבי ראש מ מנסה להבין איך לייצר נתונים על המקום.

כדי להוסיף את נתוני הדמה, בחר רק שכבה, ולאחר מכן בחר Plugin> גנרטור, ולבחור גיאוגרפי, אישיות או תמונות.

6. מדד סקיצה

מדד סקיצה הוא כלי מדידה עבור סקיצה. הוא מודד את אורך או גודל השכבה (או השכבות) בתכנון. אתה גם מקבל את הריפוד ואת השוליים של השכבה כמו גם את המרחק בין שתי שכבות. מדידת סקיצה יכולה גם להדפיס את מאפייני השכבה, כגון צבע, גבול ואטימות. כל המדידות ניתן להעלות באמצעות קיצורי מקשים.

7. לחצן דינמי

לחצן דינמי מסייע לך ליצור כפתור עם קבוע paddings בקלות. זה יהיה להתאים באופן אוטומטי את הריפוד מבוסס על הערך שאתה נותן, לא משנה את אורך הטקסט שלך. עם תוסף מותקן, טקסט ניתן להמיר למבנה עם קיצור Command + J. כמות הריפוד הנדרשת יכולה להיות נחבטת בשכבת הטקסט (0: 0: 0: 0) (תחת קבוצת הכפתורים הגמישה).

8. סולם טיפוגרפי

Scype Scale הוא תוסף כדי להפוך את שכבת הטקסט הנבחרת לסולם טיפוגרפי. כדי להשתמש בפלאגין זה, בחר רק שכבת טקסט (יחידה או מרובה) או שכבה מעורבת המכילה לפחות שכבת טקסט אחת, ולאחר מכן בחר תוסף> סולם טיפוגרפי ולהתאים את הערך בתיבת הדו-שיח. התוצאה היא קבוצה של טקסט בקנה מידה, אשר עוקב אחר הכללים של קנה המידה הטיפוגרפי.

9. Modulizer

עם מודולייזר אתה יכול לשלוט על הריפוד עבור כפתור, מודול או אזורים על העיצוב שלך עם קיצור המקשים Shift + Command + M. אתה יכול לשלב את כל השכבות שלך, קבוצה ואז להשתמש בקיצור כדי להתאים באופן אוטומטי את הריפוד שלך על בסיס ריפוד הערך שאתה צריך . צפה בהדגמה של הסרטון כדי לראות זאת בפעולה.

10. להב

האם אי פעם חשבתי על המרת העיצוב שלך מ סקיצה ל- HTML? אם כן, אתה כנראה צריך לקבל להב, תוסף סקיצה שיוצר באופן אוטומטי קבצי HTML מהעיצוב שלך. זה יהיה להמיר את הקבוצה לתוך div, טקסט לתוך עמ ' וכן הלאה.

בעת שימוש בלהב, אתה יכול להגיד את תוסף מה DOM אלמנט ליצור על ידי הוספת שם מיוחד לשכבה, כגון [btn] או קלט [טקסט] כך להב יודע מה זה צריך לעשות. בדוק את ההדגמה של סרטון זה למראה פנימי.

עכשיו קרא: 12 שימושי plugins עבור מפתחי WordPress