הייטק
ליצירת דיון חדש בחרי את הפורום המתאים מתוך הלשונית ”דיונים”
מובילה:
- Organized by
-
עיצוב אתר בקוד – מFigma – עזרה!
עיצוב אתר בקוד – מFigma – עזרה!
מישהי יכולה לסייע לי?
אני באמצע עיצוב של אתר מתקשה להעתיק עיצוב מFigma לקוד
המערכת בשפות Next.JS ו React
אין לי תוכנית לעיצוב Dev Mode ב Figma וגם הבנתי שזה לא ממש עוזר אלא CSS שבור
מה אפשר לעשות אני חייבת עזרה!!!
יש כלים/תוספים משהו שיכול לעזור בזה?
קלאוד קוד חסום לי
- 25 תגובות
פעילה בקהילה במה בדיוק את מתקשה?
באופן כללי בהתאמה של הקוד לפיגמה או במשהו ספציפי?
את יכולה להשתמש בcodex, תוסיפי שם בplugins את האופציה של פיגמה והוא אמור להיות בהחלט מצוין בזה-
חברה תורמת
העיצוב לא נראה אותו דבר
ואני מעצבת הכל מהבסיס עם דיבים וכו’
codex חסום כמו קלאוד קוד
יש איזה תוספים או משהו שיכול לעזור?
-
פעילה בקהילה
אני לא מכירה תוספים לפיגמה עצמה.
איזה סינון יש לך?
צ’אטים של AI כן פתוחים לך?-
פעילה בקהילה
הכי פרימיטיבי, את יכולה פשוט לעשות צילום מסך של אלמנט מסוים שאת רוצה לעצב מהפיגמה (אפשר גם עמוד שלם)
ולצרף לצ’אט כמו קלאוד.
מניסיון, יכולות להיות תוצאות יעילות מאד אם כותבים פרומפט טוב.-
חברה תורמת
תודה נועה פתוח לי גיטהב קופילוט שממש לא מצליח לתת תוצאה טובה 🙁
וגם קוד בשליטה אבל הוא לא מחובר לפרויקט שלי
-
פעילה בקהילה
אין לך אפשרות איכשהו להוציא את העיצוב בקובץ HTML מפיגמה?
תחלצי את זה לקובץ HTML ושגרי לסוכנים שיעשו את העבדוה כמו שצריך..
-
חברה תורמת
איזה סוכנים?
-
פעילה בקהילה
בקופיילוט / קלוד. מניסיון שלי לוקח זמן עד שהסוכנים יוצרים, אבל בסוף זה יכול להיות ממש דומה למקור
-
חברה תורמת
בגיט הב קופילוט אפשר ליצור סוכן?
יודעת להגיד לי איך?
קלאוד חסום לי
-
חברה תורמת
יכולה להתקשר אלי ואסביר לך. 0504199417
-
פעילה בקהילה
היי מלי, אני גם לאחרונה עשיתי כזה דבר – בניית אתר מפיגמה.
עשיתי צילומי מסך לג’מיני והוא נתן לי קוד,
ברור שזה לא 100% מדויק וצריך לעבור ולתקן עד שיצא בדיוק כמו פיגמה,
אבל את הבסיס (ויותר מזה) הוא נותן נהדר!
וגם יכול לעזור בתיקונים כמובן.הצלחתי ממש מהר ובקלות יחסית. (הסתבכתי יותר בחלק הJS, אבל זה כבר לא קשור)
המון הצלחה!
-
חברה תורמת
יהודית תודה!!
אבל כמו שאמרתי לנועה לא פתוח לי…
יש לי גיט הב קופילוט שלא עושה את העבודה בכלל וקוד בשליטה ו… זהו!
חוץ מכלי AI שיעשו את העבודה, מה יכול עוד לעזור?
-
חברה תורמת
תורידי את הקוד מפיגמה
ותתני לגיטהב קופילוט את הקוד תגידי לו שיעצב את האתר בהקבלה לעיצוב שאת נותנת לו מFIGMA
(את יכולה לשים את הקוד בקובץ נפרד בתוך הפרויקט ולומר לו לעצב את העמודים לפי הקובץ XXX
בשביל שיהיה מדוייק ולא יאבד את זה תו”כ תעבדי עמוד עמוד,
כלו’ לא ‘תעצב את כל האתר כמו ההסגנון של קובץ XXX’
אלא ‘תעצב את עמוד הבית כמו הקובץ XXX’
אח”כ ‘תעצב את עמוד ההרשמה’…
ככה עמוד אחרי עמוד-אמור לעבוד…
שימי לב שאת במצב agent בגיטהב קופיילוט
ואפשר ליצור סוכן, אבל בגדול הסוכן הבסיסי הרגיל בגיטהב קופילוט אמור להספיק לזה …
באופן כללי בגיטהב קופילוט אם את רוצה להוסיף סוכן/סקיל/hook/MCP או כל דבר אחר משלך-
בלחיצה על גלגל השיניים של ההגדרות נפתח חלון של כל הנ”ל ואפשר ליצור מותאם אישית או להוסיף לפי הצורך..
(את יכולה ליצור למשל סקיל עיצוב ולהכניס בו את מה שפיגמה הוציא לך ולהשתמש בו כשאת אומרת לסוכן עצמו לעצב את האתר לפי העיצוב מפיגמה…
(בשביל ליצור את הסקיל/agent וכו’ בצורה טובה-את יכולה להעזר בסוכן עצמו ליצור אותם (יש לו סקילים ליצירת כל הנ”ל תקלידי create-skill/ או create-agent/ או כל דבר אחר, ותכתבי לו מה את רוצה שתהיה ההתמחות שלו וכו’..)
המון הצלחות!!
-
חברה תורמת
תודה ברכי!!
עזרת לי מאוד!!
- סטטוס תעסוקתי:
חברה תורמת
כשאני רואה שהתוצאה של ה-AI לא ממש משביעה רצון,
אני פשוט עוברת אלמנט-אלמנט, לכל אלמנט בפיגמה כתוב בצד כל מה שצריך – מה שחשוב זה margin, padding, ו-gap (כשיש בפנים אלמנטים ב-grid או ב-flex).
זה אמור להיראות בול! אחד לאחד! עם פיגמה. העיצוב בפיגמה ממש מדויק על הפיקסלים ולכן זה יוצא ממש אותו דבר.
אבל זה באמת הרבה עבודה ידנית שחורה, אם כי אני ראיתי יותר מפעם אחת שזו דרך ארוכה שהיא קצרה…
-
חברה תורמת
תודה!!
עכשיו אני רואה שזה לא נותן לי קוד ב Figma.
זה רק לעיצוב, קיבלתי את זה כך מהלקוחה כנראה שצריך שדרוג?
-
פעילה בקהילה
את בטוחה שלא?
לכאורה, אם יש לך הרשאה של Developer Mode
צריך להיות שבלחיצה על אלמנט מסוים מהפיגמה מופיע לך בצד חלון נפתח עם נתונים בסיסיים של CSS.
תבדקי את זה-
חברה תורמת
תסתכלי פה כשאני לוחצת על מצב DEV
- סטטוס תעסוקתי:
חברה תורמת
שימי לב לחיצים שסימנתי. זה אפילו לא במצב של developer.
יש לך את זה?
- סטטוס תעסוקתי:
חברה תורמת
עוד משהו,
מצרפת לך צילומסך כשאני במצב design – לחלק מהאלמנטים יש יותר נתונים (מבחינת הגדרות CSS).
בכל אופן כמה שזכור לי – תנסי לראות כמו בצילומסך השני, יש אפשרות לשכפל את הפרויקט לטיוטה מקומית ואז לך בעצמך אמור להיות גישה ל-developer mode. שימי לב רק שזה copy של הפרוייקט הקיים, ואם משהו משתנה בעיצוב הקיים (אם מישהו שמעצב לך משנה את העיצוב) – זה כמובן לא ישתנה בטיוטה ששכפלת. אבל תמיד אפשר למחוק את הטיוטה הקיימת ולשכפל שוב את המעודכן.
בהצלחה!
-
חברה תורמת
תודה!!
אני מנסה לשכפל ולא נותן…
וזה מה שהוא מציג לי בסרגל בצד, יש שם גובה ורוחב
- סטטוס תעסוקתי:
חברה תורמת
דבר ראשון, לגבי השכפול – שימי לב איפה ללחוץ.
חוץ מזה בצילום שצירפת נראה שיש עוד נתונים – שקיפות, עיגול פינות וכו’
(תנסי אולי לגלול עוד קצת למטה – אם יש עוד נתונים לאלמנט כמו padding וכד’ – הם יופיעו שם. אם אין נתונים נוספים – אין צורך ביותר ממה שיש)
- סטטוס תעסוקתי:
חברה תורמת
כדי לראות את הקוד בפיגמה את צריכה להוסיף פלאגין figma to code
-
חברה תורמת
ניסיתי.
הוא לא נותן ממש ברמה טובה, זה דיי מלמעלה.
אני רוצה שיהיה לפחות 90% מהעיצוב אותו מראה!!
וזה לא ככה.
-
חברה תורמת
יש MCP לעבודה מול פיגמה, ניסית אותו?
Log in to reply.
