פיגמה · שלב 7
Dev Mode בפיגמה
Dev Mode הוא סביבת עבודה בתוך קובץ העיצוב שמיועדת למפתחים: בודקים בה מידות, צבעים וקוד, מורידים נכסים ורואים מה השתנה. למעצבים הוא המקום שבו מסירת העיצוב (handoff) הופכת מסדרת קבצים לתהליך מסודר.
מה זה Dev Mode ומי יכול להשתמש בו
לפי מרכז העזרה של פיגמה, Dev Mode הוא סביבת עבודה ממוקדת מפתחים בתוך קובצי Figma Design. נכנסים אליו מהמתג בסרגל הכלים או ב-Shift D, ויוצאים באותו קיצור. העיצוב עצמו לא משתנה: רק הממשק מתחלף לתצוגה של בדיקה ולא של עריכה.
| מה כלול | |
|---|---|
| תוכניות | Professional, Education, Organization, Government ו-Enterprise. בתוכנית החינמית Starter אין Dev Mode |
| Dev seat | Dev Mode, FigJam, Slides, Buzz ו-Specs, וצפייה והערות בקובצי עיצוב |
| Full seat | כל המוצרים, כולל Dev Mode |
| Collab seat | בדיקה בסיסית בלבד ב-Dev Mode |
המשמעות המעשית: מפתח בצוות לא צריך מושב Full כדי לעבוד עם העיצוב. מחירי המושבים מפורטים בעמוד מחירי פיגמה.
מה רואים ב-Dev Mode
- Inspect panel: שם השכבה וסוגה, המאפיינים שלה, ה-Styles שהוחלו עליה ופרטי הקומפוננטה.
- קוד: תצוגת Code או List. בתפריט השפה אפשר לשנות הגדרות כמו יחידת המידה של ה-CSS, ולבחור תוסף שמייצר קוד (codegen plugin).
- מדידות והערות (Annotations): מעצבים מוסיפים הערות, מפרטים ומידות ישירות על העיצוב, והן מופיעות למפתחים.
- Compare changes: השוואה בין הגרסה הנוכחית לגרסאות קודמות, והשוואה בין Instance לקומפוננטה המקורית שלו.
- ניווט: בסרגל השמאלי מופיעים העיצובים שסומנו כמוכנים, ומתי כל אחד נערך לאחרונה.
- Plugins: לשונית עם תוספים מומלצים, למשל חיבורים ל-Jira, Storybook ו-GitHub.
Ready for dev: איך מסדרים את המסירה
במקום לשלוח למפתחים קישור לקובץ שלם ולהסביר מה סופי, מסמנים מסכים או חלקים כ-Ready for dev. הם מופיעים בסרגל של Dev Mode, ומי שיש לו מושב Full או Dev יכול לקבל התראות עליהם. בתוכניות Organization ו-Enterprise יש גם סטטוס Completed לסימון מה כבר פותח.
- מסדרים את הקובץ מסכים סופיים בעמוד או ב-Section נפרד, עם שמות ברורים. טיוטות ורעיונות נשארים בעמוד אחר.
- בודקים את המבנה Auto Layout בכל מקום שיש בו רשימה או ריווח, ו-Variables במקום צבעים ידניים. כך המדידות והקוד שהמפתח רואה הגיוניים.
- מוסיפים הערות מה קורה במצב שגיאה, מה הגבול של טקסט ארוך, ומה ההתנהגות במסך צר.
- מסמנים Ready for dev ומודיעים לצוות. כשמשהו משתנה אחר כך, Compare changes מראה בדיוק מה.
הערות טובות הן בעצם חלק מאפיון המערכת. כשיש אפיון כתוב, Dev Mode הוא המקום שבו הוא פוגש את העיצוב.
Code Connect, VS Code ושרת ה-MCP
- Code Connect: מציג ב-Dev Mode את הקוד האמיתי של הקומפוננטות מספריית הקוד שלכם, במקום קוד שנוצר אוטומטית. כך מפתח שבודק כפתור רואה את הקומפוננטה שכבר קיימת בקוד. זמין ב-Professional, Organization ו-Enterprise.
- Figma for VS Code: תוסף לעורך הקוד שמאפשר לבדוק עיצובים, לראות הערות ולקשר קובצי קוד לקומפוננטות בלי לצאת מהעורך.
- שרת ה-MCP של פיגמה: נותן לכלי AI לכתיבת קוד, כמו Claude Code, Cursor ו-VS Code, גישה להקשר של העיצוב כדי לייצר ממנו קוד, ומאפשר להם גם ליצור תוכן בקנבס. פיגמה ממליצה על השרת המרוחק, שלא דורש את האפליקציה למחשב. השרת המקומי רץ דרך האפליקציה ודורש מושב Dev או Full בתוכנית Professional, Education, Organization, Government או Enterprise.
גם כאן, איכות הקובץ קובעת את איכות התוצאה. מרכז העזרה של פיגמה ממליץ לעבוד עם קומפוננטות, Code Connect, Variables, שמות שכבות ברורים ו-Auto Layout, ולבחור קטעים קטנים בכל פעם.
מסירה של ממשק בעברית
בממשק מימין לשמאל יש דברים שהמפתח לא יכול לנחש מתוך מידות בלבד. כדאי לכתוב אותם במפורש בהערות:
- שכל המסך בכיוון RTL, ואילו רכיבים נשארים משמאל לימין, כמו מספרי טלפון, קוד או שדות באנגלית.
- אילו אייקונים מתהפכים ואילו לא. הכללים בעמוד אייקונים והיפוך.
- שכאשר ב-Auto Layout השכבות מסודרות הפוך כדי שהמסך ייראה נכון בעברית, בקוד הסדר צריך להיות לפי הקריאה (הראשון מימין הוא הראשון בקוד).
- איך מוצגים מספרים, תאריכים וטקסט מעורב. ראו מספרים, תאריכים וטקסט מעורב.
שאלות נפוצות
האם Dev Mode חינמי?
לא. Dev Mode זמין בתוכניות Professional, Education, Organization, Government ו-Enterprise, ולא בתוכנית החינמית Starter. סטודנטים ומורים מקבלים אותו בתוכנית החינוך.
איך נכנסים ל-Dev Mode?
פותחים קובץ Figma Design ולוחצים על מתג Dev Mode בסרגל הכלים, או Shift D. אותו קיצור מחזיר למצב עיצוב.
מה ההבדל בין Dev seat ל-Full seat?
Dev seat כולל Dev Mode, FigJam, Slides, Buzz ו-Specs, וצפייה והערות בקובצי עיצוב, אבל לא עריכה. Full seat כולל את כל המוצרים.
מה זה Code Connect?
חיבור בין קומפוננטות בפיגמה לקומפוננטות בקוד, כך ש-Dev Mode מציג את הקוד האמיתי מספריית הקוד במקום קוד שנוצר אוטומטית. זמין ב-Professional, Organization ו-Enterprise.
מקורות
- Guide to Dev Mode · Figma Help Center
- Guide to the Figma MCP server · Figma Help Center
- MCP server best practices · Figma Help Center
- Compare Figma plans and features · Figma Help Center
- Figma pricing · Figma
נבדק מול המקורות לאחרונה ב־10 בנובמבר 2026. מצאתם טעות? כתבו לנו.