עד לא מזמן, לעצב בפיגמה ולכתוב קוד היו שני עולמות נפרדים. אתה מעצב, מסביר למפתח, הוא מתרגם — ומשהו תמיד הולך לאיבוד בדרך. Codex של OpenAI מחבר בין השניים: מצביעים על עיצוב, מקבלים קוד.
הדבר הכי חשוב לפני שמתחילים: Codex הוא תכנת דסקטופ — לא אתר, לא תוסף. מורידים, מתקינים, ועובדים. כרגע זה חינמי למי שיש לו חשבון ChatGPT (גם החינמי), עם מכסת שימוש חודשית. אין צורך לשלם כדי להתחיל.
שלושתם עושים דברים דומים, אבל Codex הוא הכי נגיש להתחלה. חשבון ChatGPT חינמי מספיק — אין צורך בכרטיס אשראי כדי להתנסות. Claude Code דורש מינוי בתשלום מיום אחד, Cursor מגביל מהר. עם Codex תבינו אם זה מתאים לתהליך שלכם לפני שמוציאים שקל.
שלב 1 — הורדה והתקנה
הורדה ל-Mac
לוחצים על הכפתור להורדת קובץ ה-.dmg. אחרי שהורד — פותחים אותו, גוררים את Codex לתיקיית Applications, ומפעילים.
הורדה ל-Windows
ב-Windows מורידים דרך Microsoft Store. לוחצים על הכפתור, נפתח ה-Store ישירות על הדף של Codex — לוחצים Get.
התחברות לאחר ההתקנה
מפעילים את Codex לראשונה — מופיע מסך כניסה. בוחרים Sign in with ChatGPT ומתחברים עם החשבון הקיים. זהו. אין צורך ב-API key, אין צורך להגדיר כלום נוסף.
ממשק Codex — שיחה עם ה-AI משמאל, קוד ו-diff מימין
שלב 2 — מה זה MCP ולמה זה חשוב
MCP (Model Context Protocol) הוא תקן פתוח שמאפשר לתכנות AI לדבר עם כלים חיצוניים. תחשבו על זה כמו חיבור USB — תכנת ה-AI מצד אחד, הכלים שלכם מהצד השני.
פיגמה שחררה Figma MCP Server שמאפשר ל-Codex לקרוא את העיצובים שלכם ישירות: layout, צבעים, קומפוננטות, משתנים — הכל, בלי לייצא כלום ידנית. קראו את המדריך הרשמי של פיגמה ←
שלב 3 — חיבור פיגמה ל-Codex
דרך לשונית Skills
בפינה הימנית העליונה של Codex יש כפתור Skills. לוחצים עליו, מוצאים את Figma ברשימה, ולוחצים Install. נפתח חלון OAuth — לוחצים "Allow access" ומאשרים. זהו.
דרך Settings
לוחצים על אייקון ההגדרות בפינה השמאלית התחתונה — או Cmd+, ב-Mac. נכנסים ל-MCP Servers. ברשימת השרתים המומלצים מופיעה פיגמה — לוחצים Install ועוברים את האימות.
בשתי הדרכים, פיגמה מתחברת דרך OAuth — מאשרים פעם אחת ו-Codex זוכר את החיבור.
שלב 4 — מפיגמה לקוד
חוזרים לפיגמה. בוחרים את הפריים או הקומפוננטה שרוצים לממש, לוחצים קליק ימני ובוחרים Copy link to selection.
הלינק חייב להיות לאלמנט הספציפי — לא לקובץ כולו. קליק ימני על הפריים עצמו, לא על הדף. זו הטעות הכי נפוצה בהתחלה.
חוזרים ל-Codex, פותחים שיחה חדשה, ומדביקים את הלינק עם הוראה — למשל:
[לינק מפיגמה]
השתמש בקומפוננטות הקיימות בפרויקט. שמור על הצבעים והגדלים המדויקים.
Codex קורא את העיצוב דרך ה-MCP, מבין layout, צבעים, גדלים — וכותב קוד. יש גם מדריך מפורט עם כל הפרטים באתר של OpenAI: Figma designs to code ←
Codex עובד על קוד — גרסת Windows
בונוס — מקוד חזרה לפיגמה
זה עובד גם הפוך. אם יש לכם ממשק רץ שרוצים להביא לפיגמה, Codex יכול לצלם אותו וליצור ממנו פריים עריך ישירות על ה-Canvas. מגיע לשם דרך פרומפט פשוט: "תיצור עיצוב בפיגמה מהממשק הזה". פרטים נוספים על השותפות ←
השוואה מהירה
| כלי | ניסיון חינמי | חיבור לפיגמה | תכנת דסקטופ |
|---|---|---|---|
| Codex | ✓ חשבון ChatGPT מספיק | ✓ MCP מובנה | ✓ |
| Claude Code | ✗ בתשלום מיום 1 | ✓ MCP | ✓ |
| Cursor | חלקי | ✓ Plugin | ✓ |
הכלים האלה עדיין לא מושלמים — הקוד שיוצא לא תמיד production-ready, ולפעמים צריך לתקן פרטים. אבל הקפיצה בין "אין קוד" ל-"יש בסיס לעבוד ממנו" קרתה תוך דקות. ובדקות האלה, הפער בין עיצוב לפיתוח נסגר קצת יותר.