קלוד קוד ו-Figma: לבנות אתר, ולערוך אותו בגרירה

מה זה החיבור של קלוד קוד לפיגמה?

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

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

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

איך מחברים את Figma לקלוד קוד?

לפי מדריך ההתקנה של פיגמה, הדרך המומלצת היא התוסף הרשמי, שכולל גם את השרת וגם את הסקילים של פיגמה:

העתקהclaude plugin install figma@claude-plugins-official

1. אם קלוד קוד פתוח, מפעילים אותו מחדש.
2. כותבים /plugin, עוברים ללשונית Installed עם החצים ובוחרים את figma.
3. לוחצים Enter כדי להתחבר. נפתח דפדפן, ולוחצים Allow access.
4. חוזרים לקלוד קוד וכותבים שוב /plugin. אם figma מסומן כמחובר, אפשר להתחיל.

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

העתקהclaude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

אחר כך פותחים סשן חדש, כותבים /mcp, בוחרים figma ומאשרים בדפדפן. לא צריך את אפליקציית פיגמה במחשב, השרת המרוחק מתחבר ישר לחשבון.

איך שולחים את האתר מקלוד קוד לפיגמה?

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

העתקהStart a local server for my app and capture the UI in a new Figma file.

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

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

למי זה מתאים, ואיך זה משנה את העבודה מול לקוחות?

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

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

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

מה חשוב לדעת לפני שמתחילים?

• יש תוכנית חינמית, עם תקרה. הלכידה זמינה גם בתוכנית החינמית Starter. אבל לפי עמוד המגבלות של פיגמה, נכון לנובמבר 2026, בתוכנית החינמית יש עד 20 קריאות קריאה בחודש. כלי כתיבה, כמו הלכידה עצמה, לא נספרים. ההחזרה לקוד היא קריאה, ולכן בחינם תוכלו לעשות רק כמה סבבים בחודש.
• בתשלום יש הרבה יותר. עם מושב Full או Dev בתוכנית Professional: עד 200 קריאות ביום. ב-Enterprise: עד 600.
• שכבות שטוחות. לפי פיגמה, הלכידה יוצרת שכבות רגילות בלי חיבור לספריית הרכיבים שלכם. זה מצוין לעריכה ולהערות, פחות למערכת עיצוב מסודרת.
• הכלי עוד מתבגר. מסכים מורכבים לא תמיד נלכדים בדיוק כמו בדפדפן. תבדקו את התוצאה בפיגמה לפני שאתם שולחים ללקוח.
• השרת המרוחק בלבד. הלכידה עובדת רק עם השרת המרוחק. אם הגדרתם גם את השרת של אפליקציית הדסקטופ, זה הגורם הנפוץ לכך שהכלי לא מופיע.
• "כמו בקנבה" זה דימוי. פיגמה פשוטה לעריכה בסיסית, אבל זה כלי מקצועי. לגרירה והחלפת טקסט לא צריך ניסיון, לעבודה עמוקה יותר כן.

איך מקבלים תוצאה טובה מהסבב?

שלושה הרגלים שחוסכים סבבים מיותרים:

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