UI Kit לאתר: מה זה ואיך בונים ספריית רכיבים

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

את כל הפתרונות האלה אוספים למקום אחד בעזרת UI Kit: ספרייה משותפת של רכיבי ממשק, שבזכותה קל יותר לבנות עמודים חדשים ולשמור על שפה עיצובית אחידה.

במדריך הזה נסביר:

• מה זה UI Kit ובמה הוא שונה ממערכת עיצוב ומספריית רכיבים;
• ממה מורכב UI Kit לאתר;
• איך בונים UI Kit שלב אחר שלב;
• מה חשוב לבדוק באתר בעברית: RTL, גופנים ונגישות;
• איך UI Kit עובר מ-Figma לאתר חי ב-Webflow או בוורדפרס;
• איפה מוצאים UI Kit מוכן ואילו טעויות כדאי להימנע מהן.

מה זה UI Kit ולמה הוא צריך

UI Kit (User Interface Kit) הוא אוסף של רכיבים חזותיים של הממשק: צבעים, סגנונות טקסט, כפתורים, שדות, אייקונים, כרטיסים, תפריטים ורכיבים נוספים. בדרך כלל יוצרים אותו בכלי עיצוב כמו Figma ומשתמשים בו כספרייה משותפת לאתר, למוצר או לצוות.

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

UI Kit עוזר:

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

מי משתמש ב-UI Kit

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

הנקודה החשובה לבעל עסק: UI Kit הוא לא מותרות של חברות גדולות. אתר תדמית עם עשרה עמודים מרוויח ממנו כבר ביום שבו מוסיפים את העמוד האחד-עשר.

UI Kit, ספריית רכיבים ומערכת עיצוב: מה ההבדל

את שלושת המושגים האלה מערבבים לעתים קרובות, אבל יש ביניהם הבדל:

• UI Kit הוא אוסף הרכיבים החזותיים והכללים שלפיהם בונים את הממשק.
• ספריית רכיבים היא הכלי שבו הרכיבים נשמרים לשימוש חוזר. למשל, ה-UI Kit מתאר איך נראה כפתור בכל מצביו, וספריית Figma מכילה רכיב מוכן של הכפתור שהמעצב גורר לעמוד.
• מערכת עיצוב (Design System) רחבה משניהם. היא מתארת לא רק איך הרכיבים נראים, אלא גם איך ולמה משתמשים בהם: עקרונות עיצוב, טוקנים, כללי נגישות, תיעוד, דפוסי אינטראקציה וספריות גם למעצבים וגם למפתחים, כולל רכיבים בקוד.

לכן UI Kit הוא חלק ממערכת עיצוב, אבל מערכת עיצוב מלאה לא מסתכמת בו. דוגמאות פתוחות למערכות כאלה הן Material Design של Google ו-Atlassian Design System: שם מתועדים הרכיבים, הכללים לשימוש בהם וגם הקוד.

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

ממה מורכב UI Kit לאתר

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

צבעים וטוקנים

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

הדרך הנכונה לבנות פלטה היא טוקנים (design tokens): שמות קבועים לערכים, למשל color-text-primary או color-bg-surface, במקום קודי צבע שמפוזרים בקובץ. טוקן מקשר בין צבע הבסיס לבין התפקיד שלו, ומאפשר גם ערכות נושא: ב-Figma אפשר להגדיר ב-Variables מצבים (modes) לבהיר ולכהה, וכל רכיב יחליף צבעים אוטומטית. על בחירת הפלטה עצמה כתבנו במדריך על צבעי מותג.

טיפוגרפיה

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

ריווחים, רשת ופינות

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

כפתורים וטפסים

כפתורים הם רכיב בסיסי בכל UI Kit. מגדירים להם גודל, גובה, ריפוד פנימי, צבע, רדיוס וטיפוגרפיה, ובנפרד את המצבים: רגיל, מעבר עכבר, לחיצה, פוקוס, טעינה ולא פעיל. הרחבנו על כך במדריך על עיצוב כפתורים לאתר.

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

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

אייקונים

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

כרטיסים, תפריטים ורכיבים מורכבים

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

דפוסי UI

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

איך בונים UI Kit שלב אחר שלב

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

שלב 1: מגדירים סגנונות בסיס

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

שלב 2: אוספים את הרכיבים המרכזיים

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

שלב 3: מגדירים וריאנטים ומצבים

לרכיב אחד יש לעתים קרובות כמה גרסאות: לכפתור יש גדלים וסוגים, לשדה יש מצבים, למתג יש מצב פעיל ולא פעיל. ב-Figma משתמשים לשם כך ב-Variants וב-Component properties. כדאי להפריד תכונות בלתי תלויות: במקום תכונה אחת "סגנון" עם ערכים כמו Primary Large ו-Secondary Small, עדיף שתי תכונות נפרדות, Type ו-Size. כך הרכיב נשאר ניתן לניהול, ואף אחד לא מחפש את הכפתור הנכון בין עשרות כמעט-זהים.

לאפשרויות של "יש או אין", כמו אייקון בתוך כפתור, מתאימה תכונה מסוג Boolean: במופע רואים מתג פשוט ומדליקים או מכבים את האייקון.

שלב 4: מתכננים את מבנה הספרייה

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

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

שלב 5: שומרים על הערכה מעודכנת

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

UI Kit לאתר בעברית: מה חשוב לבדוק

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

כיוון RTL

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

גופנים לעברית ולטינית

לא כל גופן יפה באנגלית כולל עברית, ולא כל גופן עברי נראה טוב ליד לטינית. בוחרים גופן עם תמיכה מלאה בשתי השפות (ב-Google Fonts, למשל, Heebo, Assistant, Rubik ו-Noto Sans Hebrew) או זוג גופנים שמתואמים בגובה ובמשקל. זכרו שבעברית אין אותיות גדולות וקטנות, ובדרך כלל אין איטליק אמיתי, ולכן ההיררכיה נבנית מגודל ומשקל.

נגישות כבר ברכיב

בישראל אתרים של עסקים שנותנים שירות לציבור צריכים לעמוד בתקן הנגישות ת"י 5568, שמבוסס על WCAG. הדרך הזולה לעמוד בו היא לבנות את הנגישות לתוך הרכיבים, ולא לתקן כל עמוד בסוף:

• ניגודיות של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול ולרכיבי ממשק, כמו מסגרת של שדה;
• מצב פוקוס גלוי לכל רכיב אינטראקטיבי, לניווט במקלדת;
• תוויות אמיתיות לשדות טפסים, ולא רק טקסט placeholder שנעלם;
• הודעות שגיאה שלא נשענות רק על צבע אדום;
• אזורי לחיצה גדולים מספיק במובייל.

מובייל ווואטסאפ

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

מהעיצוב לאתר חי: UI Kit ב-Webflow, בוורדפרס ובקוד

UI Kit שחי רק ב-Figma עוזר למעצב. UI Kit שעבר לאתר עצמו עוזר לעסק לאורך שנים. הנה איך זה נראה בפלטפורמות הנפוצות.

Webflow

ב-Webflow מגדירים Variables לצבעים, לגדלים ולגופנים, ומחברים אליהם את הקלאסים. רכיבים חוזרים נבנים כ-Components עם properties, כך שאפשר לשנות טקסט, תמונה או קישור בכל מופע בלי לשבור את העיצוב. מתודולוגיה כמו Client-First של Finsweet נותנת שיטת שמות אחידה לקלאסים, וזה בדיוק מבנה הספרייה משלב 4, רק בתוך האתר. בנוסף, ב-Webflow אפשר לשתף ספריות רכיבים בין כמה אתרים של אותו ארגון.

וורדפרס

בוורדפרס עם עורך הבלוקים, הצבעים, הגופנים והריווחים מוגדרים בקובץ theme.json ומופיעים לעורכים כפלטה סגורה. ב-Elementor עובדים עם Global Colors ו-Global Fonts בהגדרות האתר ועם תבניות שמורות לרכיבים חוזרים. העיקרון זהה: הערך מוגדר פעם אחת, וכל העמודים שואבים ממנו. על בניית אתר וורדפרס מאפס כתבנו במדריך נפרד על אתר וורדפרס.

קוד ומסירה למפתחים

בפרויקטים בקוד (React ודומיו) רכיבי העיצוב הופכים לרכיבים בקוד, והטוקנים ממשתני Figma הופכים למשתני CSS. Storybook משמש לפיתוח ולתיעוד של הרכיבים בקוד, ו-Dev Mode ב-Figma מציג למפתח את המידות, הטוקנים והמאפיינים של כל רכיב. המסירה הטובה ביותר היא כשהרכיב בעיצוב והרכיב בקוד נקראים אותו דבר ויש להם אותן תכונות.

איפה יוצרים UI Kit ואיפה מוצאים ערכה מוכנה

הכלי לבדו לא הופך UI Kit לטוב. חשובים יותר המבנה, הכללים והנוחות לעבוד איתם. ובכל זאת:

• Figma. הבחירה הנפוצה לעבודת צוות: רכיבים ותכונות, וריאנטים, משתנים וספריות משותפות, עבודה משותפת בזמן אמת ומסירה נוחה למפתחים. החיסרון: תלות בחיבור לאינטרנט ובמגבלות של תוכנית המנוי.
• Sketch. מתאים לצוותים שכבר עובדים בו. יש בו ספריות רכיבים וסגנונות, אבל הוא מיועד בעיקר ל-macOS.
• Penpot. כלי קוד פתוח לעיצוב ממשקים ורכיבים, שאפשר גם להתקין על שרת משלכם.
• Adobe XD. לא מומלץ לפרויקט חדש: Adobe הודיעה שהכלי במצב תחזוקה בלבד, בלי פיתוח של יכולות חדשות.
• כלים משלימים. Zeroheight לתיעוד מערכת עיצוב, Storybook לרכיבים בקוד. משתמשים בהם לצד כלי העיצוב, לא במקומו.

ערכות מוכנות

ערכה מוכנה שימושית כשצריך לבנות אב-טיפוס מהר, לבדוק רעיון או להתחיל פרויקט קטן. ערכות חינמיות יש ב-Figma Community, בספריות הרשמיות (למשל Material 3 של Google וערכות הממשק של Apple) ובמערכות עיצוב פתוחות. ערכות בתשלום נמכרות בחנויות ייעודיות כמו UI8. לפני שקונים, בדקו את הרישיון (האם מותר להשתמש בה בפרויקט מסחרי של לקוח), מתי עודכנה לאחרונה ואם היא בנויה על Variables ועל Auto Layout.

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

טעויות נפוצות ב-UI Kit

יותר מדי רכיבים

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

כפילויות

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

הערכה לא מתעדכנת

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

מחכים לערכה "מושלמת"

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

מעצבים עמודים בלי רכיבים

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

שוכחים את העברית ואת הנגישות

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

איך RJL Studio בונה UI Kit לאתרים

ב-RJL Studio אנחנו מתחילים כל פרויקט עיצוב מסגנונות בסיס ורכיבים, ולא מעמודים בודדים. ב-Figma אנחנו בונים ערכה עם משתנים, וריאנטים ומצבים, כולל RTL, גופנים דו-לשוניים ונגישות לפי ת"י 5568, ואז מעבירים אותה לאתר החי: Variables ו-Components ב-Webflow לפי Client-First, או theme.json וסגנונות גלובליים בוורדפרס. כך אתם יכולים להוסיף עמודים ודפי נחיתה בעצמכם בלי לשבור את העיצוב.

רוצים אתר שנשאר אחיד גם אחרי שנה של עדכונים? קראו על שירותי עיצוב UX/UI ופיתוח ב-Webflow, או השאירו פרטים ונחזור אליכם.

שאלות נפוצות על UI Kit

האם מעצב אחד יכול לבנות UI Kit?

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

במה UI Kit שונה מתבנית אתר?

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

צריך לעדכן את ה-UI Kit אחרי שהאתר עלה?

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

אפשר להשתמש באותו UI Kit לכמה אתרים?

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

איך מעבירים UI Kit למפתחים?

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