שמעתם עמיתים לעיצוב זורמים על Figma, אבל עכשיו תורכם לנסות את זה!

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

Figma הציגה את Figma Dev Mode כדי לטפל בבעיות אלו, במטרה לתמוך בשיתוף פעולה חלק בעיצוב-פיתוח.

איך זה ישפיע על זרימת העבודה שלך כמפתחים? התעמק ב- Figma Dev Mode, חקור את התכונות שלו וגלה שיטות עבודה מומלצות לשימוש בו.

מהו Figma Dev Mode?

Figma, כלי עיצוב הממשק הפופולרי, פופולרי בקרב צוותים הבונים אבות טיפוס או יצירת דגמי אתרים. מצב הפיתוח שלו, עליו הכריזה החברה ב-Config 2023, שואף לשמש כמרחב עבודה למפתחים לאחר שהיוצרים הבינו כמה קשה להם לקיים אינטראקציה עם בד Figma.

Dev Mode דומה לכלי הבדיקה בכרום אבל הוא מעביר את כוונת המעצב בשפה מוכרת יותר.

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

instagram viewer

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

תקשורת חלקה עם מצב Dev

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

קרדיט תמונה: פיגמה

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

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

החלונית Inspect מציגה מידע רלוונטי עבורך באמצעות שפה שאתה מבין: קוד. אתה יכול לבדוק אלמנטים ו הוסף תוספים המתאימים יותר לעבודה שלך. Dev Mode מציע תכונות אינטראקציה שונות, המאפשרות לך לשתף את הרעיונות וההצעות שלך בנקודות שונות. תכונות אלה כוללות צ'אט סמן, חסימת הערות, צ'אט שמע וכפתור שיתוף.

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

מיצוי נכסים יעיל

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

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

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

תהליכי מסירה פשוטים

Dev Mode היא החבילה הטובה ביותר לטיפול במסרים. הוא משלב את כל מה שאתה צריך במיקום אחד שאתה יכול להתאים לזרימת העבודה שלך. מצב פיתוח עוזר להאיץ את תהליך המסירה על ידי הפעלת:

  • עיצוב ופיתוח בסביבה אחת
  • שיתוף פעולה בזמן אמת
  • בדיקה וקטעי קוד
  • עיצוב שילוב מערכות
  • תוויות סטטוס מדור (למשל "מוכן לפיתוח")

שיטות מומלצות וטיפים לשימוש במצב Dev

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

  • השתמש במשאבי פיתוח ובפלאגינים כדי להתאים את החוויה שלך; קשר את הכלים שבהם אתה כבר משתמש במצב Dev כדי לייעל את זרימת העבודה שלך. מ-GitHub ועד מסגרות בערימה שלך, ישנם סוגים לבחירה.
  • השתמש בתכונות הבדיקה וקטעי הקוד כדי לגשת למדידות, מפרטים, סגנונות ונכסים של אלמנטים עיצוביים. אתה יכול גם ליצור קוד בספריות שונות באמצעות תוספים.
  • עקוב אחר שינויים בעיצוב כדי להבטיח שלא תפספס שום דבר. ה השוו שינויים תכונה משמשת ככלי היסטוריית גרסאות - הקפד לבדוק אותה באופן קבוע.
  • נצל את כל תכונות שיתוף הפעולה לתקשורת, ופנה למעצבים באמצעות הערות, צ'אטים עם סמנים ועוד.
  • אתה יכול גם לבדוק אלמנטים בקוד VS עם הרחבה החדשה של Figma VS Code. זה גם מאפשר לך לעשות יותר - כולל ניווט קבצים, מעקב אחר שינויים, שיתוף פעולה של מעצבים והאצת יישום עיצוב - מבלי לעזוב את קוד VS.
  • הישאר מעודכן בתכונות חדשות יותר, ראה כיצד הן יכולות לשרת אותך בצורה הטובה ביותר, והטמיע את המיומנות בכל הזדמנות.

אמץ את מצב הפיתוח כדי לייעל את זרימת העבודה שלך

Figma Dev Mode אמור להפוך את זרימת העבודה שלך ליעילה יותר, ולאפשר שיתוף פעולה טוב יותר של מעצב-מפתח עם תכונות נחוצות.

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