UX ו-UI · שלב 11
מערכת עיצוב: שפה אחת לכל המוצר
מערכת עיצוב היא אוסף של החלטות עיצוב שמתקבלות פעם אחת ומשמשות שוב ושוב: צבעים, גופנים, רכיבים ודפוסים, יחד עם ההנחיות איך להשתמש בהם.
מה זו מערכת עיצוב
NN/g מגדירים מערכת עיצוב (Design System) כמערכת שלמה של סטנדרטים שנועדה לנהל עיצוב בהיקף גדול, בעזרת רכיבים ודפוסים לשימוש חוזר. התיעוד של Android מוסיף תמונה שימושית: המערכת מתפרקת ליחידות הקטנות ביותר, כמו צבע, טיפוגרפיה וצורה, שמהן נבנים רכיבים גדולים יותר. אייקון ותווית יוצרים כפתור; כמה כפתורים ומשטח יוצרים כרטיס.
ההבדל בין מערכת עיצוב לסתם קובץ עם רכיבים הוא ההנחיות. ספרייה אומרת מה יש; מערכת אומרת גם מתי משתמשים בכל דבר, למה, ומה אסור.
ממה מערכת עיצוב בנויה
NN/g מתארים ארבעה חלקים:
| חלק | מה יש בו | דוגמה |
|---|---|---|
| מדריך סגנון | מיתוג (צבעים, טיפוגרפיה, לוגו), הנחיות תוכן וטון, סטנדרטים ויזואליים ואינטראקטיביים | צבע הפעולה הראשי, סולם גדלי הטקסט, איך פונים למשתמש |
| ספריית רכיבים | רכיבי ממשק לשימוש חוזר, עם שם, מטרה, מאפיינים שאפשר לשנות, מצבים וקוד | כפתור עם מצבי רגיל, ריחוף, לחוץ, מושבת |
| ספריית דפוסים | קבוצות של רכיבים, פריסות ותבניות עמוד | טופס כתובת, עמוד תוצאות חיפוש |
| צוות | אנשים שמתחזקים את המערכת | לפחות מעצב אינטראקציה, מעצב ויזואלי ומפתח, ותומך בהנהלה |
טוקנים (Design Tokens)
טוקן הוא ערך עיצובי עם שם: למשל color-primary במקום קוד צבע. הרעיון הוא שאותו ערך יהיה זמין בעיצוב, בקוד ובכלים. ב-W3C פועלת קבוצת קהילה בשם Design Tokens Community Group שמגדירה פורמט אחיד להעברת טוקנים בין כלים, והגרסה היציבה הראשונה של המפרט שלה, 2025.10, פורסמה באוקטובר 2025. בפיגמה משתמשים לזה ב-Variables.
מה מרוויחים, ומה זה עולה
NN/g מונים את היתרונות:
- בונים ומשכפלים מסכים מהר, גם בהיקף גדול
- המעצבים מתפנים לבעיות מורכבות כמו סדר עדיפויות של מידע וזרימות
- מונחים משותפים מצמצמים אי הבנות בין צוותים
- עקביות ויזואלית בין מוצרים ומחלקות, ומיתוג מחדש קל יותר
- הנחיות כתובות מקלות על קליטת מעצבים וכותבי תוכן חדשים
ואת המחיר:
- בנייה ותחזוקה דורשות זמן ואנשים קבועים
- צריך ללמד את הצוותים להשתמש בה בעקביות
- יש צוותים שרואים את הפרויקטים שלהם כעבודה חד פעמית שלא צריכה רכיבים משותפים
NN/g מציינים שמערכת מלאה בדרך כלל לא שווה את ההשקעה לאב טיפוס מוקדם שעוד ישתנה. היא משתלמת כשהארגון צופה שנים של עבודת עיצוב שחוזרת על עצמה.
שלוש דרכים להתחיל
- לאמץ להשתמש במערכת קיימת כמו שהיא. לפי NN/g זו הדרך הזולה והמהירה ביותר. דוגמה: Material Design, מערכת עיצוב בקוד פתוח של Google, שהגרסה העדכנית שלה היא Material 3.
- להתאים לקחת מערכת קיימת ולשנות אותה לצרכים שלכם: צבעים, גופנים, רכיבים חסרים.
- לבנות מערכת משלכם. היא היקרה ביותר, ומתאימה לארגונים שהמערכות הפתוחות לא עונות על הצרכים שלהם.
דוגמה טובה למערכת ציבורית שכדאי ללמוד ממנה היא GOV.UK Design System של ממשלת בריטניה. היא מחולקת לסגנונות (פריסה, טיפוגרפיה, צבע, תמונות), לרכיבים נגישים לשימוש חוזר (טפסים, ניווט, טבלאות) ולדפוסים למשימות נפוצות, כמו הזנת שם וכתובת או יצירת חשבון.
מה לתעד בכל רכיב
לפי NN/g, ספריית הרכיבים מתעדת לכל רכיב את השם שלו, המטרה, המאפיינים שאפשר לשנות, המצבים והקוד. כך זה נראה בפועל עבור כפתור:
| מה מתעדים | דוגמה לכפתור |
|---|---|
| שם | כפתור ראשי |
| מטרה | הפעולה החשובה ביותר במסך. אחד בלבד בכל מסך |
| מאפיינים | גודל (רגיל, קטן), עם אייקון או בלי, רוחב מלא או לפי התוכן |
| מצבים | רגיל, ריחוף, פוקוס, לחוץ, טעינה, מושבת |
| תוכן | פועל או שם פעולה שמתאר מה יקרה. ראו UX writing |
| נגישות | ניגודיות טקסט ורקע, סימון פוקוס גלוי, שם נגיש לכפתור עם אייקון בלבד |
| קוד | שם הרכיב בקוד והמאפיינים שלו, כדי שהעיצוב והפיתוח ידברו על אותו דבר |
מצבי הפוקוס והנגישות נשכחים לא פעם, ובדיוק בהם מערכת עיצוב חוסכת הכי הרבה: מגדירים אותם נכון פעם אחת, וכל מסך שמשתמש ברכיב מקבל אותם. ראו רשימת בדיקה לנגישות.
מערכת עיצוב בפיגמה
בפיגמה, מערכת עיצוב נבנית בדרך כלל מכמה שכבות: Styles ו-Variables לערכים הבסיסיים, Components ו-Variants לרכיבים ולמצבים שלהם, ו-Auto layout כדי שהרכיבים יתאימו את עצמם לתוכן. את הקשר למפתחים מנהלים ב-Dev Mode.
- פיגמה · שלב 4
קומפוננטות ו-Variants בפיגמה
Main component, Instance, Variants ו-Component properties.
- RTL · שלב 5
אייקונים והיפוך במראה בממשק עברי
חצים, ניווט, ניגון ושעונים: אילו אייקונים מתהפכים בממשק עברי.
שאלות נפוצות
מה ההבדל בין מערכת עיצוב לספריית רכיבים?
ספריית רכיבים היא חלק אחד ממערכת עיצוב. המערכת כוללת גם מדריך סגנון, ספריית דפוסים, הנחיות שימוש ואנשים שמתחזקים אותה.
מתי סטארט-אפ צריך מערכת עיצוב?
לפי NN/g, מערכת מלאה לא שווה את ההשקעה לאב טיפוס מוקדם. בשלב כזה עדיף לאמץ מערכת קיימת, ולבנות משלכם רק כשהמוצר מתייצב.
מה זה design tokens?
ערכים עיצוביים עם שם, כמו צבע או גודל ריווח, שנשמרים במקום אחד ומשמשים גם בעיצוב וגם בקוד. ב-W3C יש קבוצת קהילה שמגדירה להם פורמט אחיד.
האם Material Design מתאים לממשק בעברית?
אפשר לאמץ או להתאים אותו, אבל כמו בכל מערכת קיימת צריך לבדוק בעצמכם כיווניות, גופנים עבריים ואייקונים מתהפכים לפני שמשתמשים בה במוצר בעברית.
מקורות
- Design Systems 101 · Nielsen Norman Group
- Material Components · Android Developers
- Design Tokens Community Group · W3C Community Group
- GOV.UK Design System · Government Digital Service
נבדק מול המקורות לאחרונה ב־10 בנובמבר 2026. מצאתם טעות? כתבו לנו.