איזו דוקומנטציה ממש חייבים ומה בעדיפות נמוכה יותר?

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

דוקומנטציה הכרחית:

  1. טוקנים ויסודות: כל הדיזיין סיסטם נשען על יסודות, ולכן זה השלב ההכרחי ביותר. תעדו את מערכת הצבעים, טיפוגרפיה, מרווחים, בורדר רדיוס, עובי קו ואייקונים.
  2. תיעוד קומפוננטות: עבור כל קומפוננטה, הכרחי לכלול:
    • שם: שם ברור ומדויק.
    • הסבר קצר: תיאור מטרת הקומפוננטה והקשר השימוש שלה (מומלץ להוסיף לינק לסטוריבוק, אם יש).
    • תיעוד וריאנטים: לדוגמה, פריימרי/סקנדרי, גדול/בינוני/קטן, סטייטים (כגון דיפולט, האבר וכו') ופרופרטיז (כגון עם/בלי אייקון).
    • מאפיינים מרכזיים ומגבלות: כמו גודל מינימלי ומקסימלי.

תיעוד יסודות – דוקומנטציה למערכת הצבעים הגלובלית וצבעי ה-Theme

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

תיעוד בסיסי לדוגמה של קומפוננטת Number Input: וריאנטים, סטייטים והתייחסות למגבלות גודל

Good to have – תיעוד שאפשר להוסיף בשלב מאוחר יותר:

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

תיעוד המלצה לשימוש נכון של רכיב כפתור

דוגמה לקווים מנחים לכתיבת לייבלים ברכיב כפתור

תיעוד של פאטרן שימוש נכון בקומפוננטת תגית

דוקומנטציה לקומפוננטת Combo Box: הפניות לרכיבים דומים עם פטרן שימוש שונה, שיעזרו למעצבים ומפתחים להשתמש ברכיב הנכון

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

מצאתם טעות? ההסבר לא מספיק ברור? תכתבו לנו: natali@bestdesignersever.com