בניית ווידג'טים אינטראקטיביים של Figma

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

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

פיגמה הודיעה ביוני שהיא מביאה לשולחן ווידג'טים המופעלים על ידי JavaScript. כעת, למעצבים יש אפשרות לדפדף וליישם רכיבים מונעי הגיון ישר ב-Figma!

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

ווידג'טים של Figma פותחים המון אפשרויות

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

בוודאי, אתה כבר יודע ששיתוף פעולה כולל יותר מאשר רק תהליך העיצוב:

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

אנחנו רק דורשים מאדם אחד לנהל הכל ולשלוח קישורים לחברים אחרים בקבוצה. אבל הו, זה לא מאוד יעיל, נכון?

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

הנה רק כמה מהדרכים שאולי תרצו להשתמש בווידג'טים ב- Figma:

הרשימה הולכת עוד ועוד. כפי שאתה יכול לראות, יש כבר שפע של ווידג'טים שאתה יכול להשתמש בהם באופן חופשי במסמכים שלך. למעשה, אתה יכול להוסיף ווידג'טים ישירות ללוח שלך מתפריט ווידג'טים (Shift+I).

אבל אנחנו לא כאן כדי ללמוד איך להשתמש בווידג'טים, כי זה קל. תן לנו לעשות את מה שאנחנו עושים הכי טוב: אנחנו הולכים ליצור ווידג'ט Figma משלנו! זה יהיה בהשראת אתר ציטוטי העיצוב של Chris Coyier. ניקח את ה-API, נזין אותו לתוך הווידג'ט, ואז נציג ציטוטים אקראיים של עיצוב ישירות ב-Figma.

הנה מה שאנחנו צריכים

אני לא אוהב להיות נושא החדשות הרעות, אבל כדי לפתח ווידג'טים, אתה חייב להיות ב-Windows או Mac. משתמשי לינוקס, אני מצטער, אבל אין לך מזל. (אתה עדיין יכול להשתמש ב-VM אם אתה רוצה לעקוב.)

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

בואו ניצור לוח חדש על ידי פתיחת תפריט הווידג'טים (Shift+ I), מעבר ל- צעצועי התפתחות לשונית, ויצירת פריט חדש.

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

וההתאמה האישית לא מסתיימת כאן; Figma גם תיתן לך את האפשרות להתחיל עם ווידג'ט נגד מוכן מראש או אלטרנטיבה התומכת ב-iFrame המעניקה לך גם גישה ל-Canvas ו-Fetch APIs (כמו גם לכל שאר ה-APIs של הדפדפן). נלך על האפשרות הפשוטה "ריק", אבל בסופו של דבר נשנה אותה בעצמנו כדי לעשות שימוש ב-Fetch API.

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

עיצוב הווידג'ט

אנחנו מושכים את העיצוב ישר אתר ציטוטי העיצוב של Chris Coyier. אז, בוא נלך לשם נצלול לתוך על ידי הפעלת DevTools.

שני קיצורי המפתח שבהם אני משתמש כאן Ctrl+Shift+C (אוֹ Cmd+Shift+C) כדי להחליף את הכלי "בחר אלמנט", ו Shift+Click כדי לשנות את פורמט הצבע לקוד HEX. אנו עושים זאת כדי ללמוד על הצבעים, הגופנים, משקלי הגופנים וגדלי הגופנים המשמשים באתר האינטרנט של כריס. כל המידע הזה הוא קריטי לבניית ווידג'ט הדומה מאוד ב-Figma, וזה יהיה הצעד הבא שלנו! אתה יכול לתפוס את הרכיב המעוצב והשתמש בו בקנבס משלך.

אני לא אפרט כאן כיוון שהנושא העיקרי של מאמר זה הוא בניית ווידג'טים על ידי כתיבת קוד. אבל אני לא יכול להדגיש מספיק כמה זה חשוב לטפל היטב בכם הסגנון של ווידג'טים... ל-CSS-Tricks כבר יש שפע של הדרכות Figma מוכוונות עיצוב; לא תצטער שהוספת אותם לרשימת הקריאה שלך.

יצירת הפריסה עבור הווידג'ט שלנו

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

זה מאוד מעניין איך Figma מתרגמת את אבני הבניין העיצוביות שלה לרכיבים דמויי React. רכיבי מסגרת עם תכונת הפריסה האוטומטית, למשל, מיוצגים כ- <AutoLayout /> רכיב בקוד. בנוסף לכך, נשתמש בשני רכיבים נוספים: <Text /> ו <SVG />.

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

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

// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;

ועם זה, יש לנו את כל מה שאנחנו צריכים כדי להמשיך ולבנות את השלד של הווידג'ט שלנו כמו שהיינו ב-React:

function QuotesWidget() {
  const quote = `...`;
  const author = `...`;

  return (
    <AutoLayout>
      <SVG />
      <AutoLayout>
        <Text>{quote}</Text>
        <Text>— {author}</Text>
      </AutoLayout>
      <SVG />
    </AutoLayout>
  );
}

widget.register(QuotesWidget);

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

<AutoLayout name={"Quote"}>
  <SVG name={"LeftQuotationMark"} />
  <AutoLayout name={"QuoteContent"}>
    <Text name={"QuoteText"}>{quote}</Text>
    <Text name={"QuoteAuthor"}>— {author}</Text>
  </AutoLayout>
  <SVG name={"RightQuotationMark"} />
</AutoLayout>;

וכמובן, אנחנו עדיין לא יכולים לראות את ה-SVG במרכאות שלנו, אז בואו נעבוד על תיקון זה. ה <SVG/> רכיב מקבל א srcמאפיין שלוקח את קוד המקור עבור רכיב SVG. אין הרבה מה לומר על זה, אז בואו נשמור את זה פשוט ונחזור ישר לקוד:

const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
  // shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;

function QuotesWidget() {
  return (
    <SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
    <SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
  );
}

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

תצוגה מקדימה של הווידג'ט שלנו בזמן אמת

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

התחל על ידי פתיחת תפריט הווידג'טים (Shift+I), מעבר ללשונית הפיתוח ולחיצה או גרירה של הווידג'ט החדש שלך ללוח. לא מצליח לאתר את הווידג'ט שלך? אל תדאג, פשוט לחץ על תפריט שלוש הנקודות וייבא את הווידג'ט שלך manifest.json קוֹבֶץ. כן, זה כל מה שצריך להחזיר אותו לקיום!

רגע, האם קיבלת הודעת שגיאה בתחתית המסך?

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

שגיאה זו נובעת ככל הנראה מהעובדה שעדיין לא הידור ה-TypeScript שלנו ל-JavaScript. נוכל לעשות זאת בשורת הפקודה על ידי ריצה npm install ו npm run watch. (אוֹ yarn ו yarn watch ). אין שגיאות הפעם!

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

עיצוב הווידג'ט

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

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

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

<AutoLayout
  name={"Quote"}
  direction={"horizontal"}
  verticalAlignItems={"start"}
  horizontalAlignItems={"center"}
  spacing={54}
  padding={{
    horizontal: 61,
    vertical: 47,
  }}
>
  <AutoLayout
    name={"QuoteContent"}
    direction={"vertical"}
    verticalAlignItems={"end"}
    horizontalAlignItems={"start"}
    spacing={10}
    padding={{
      horizontal: 0,
      vertical: 0,
    }}
  ></AutoLayout>
</AutoLayout>;

פשוט התקדמנו הרבה! בוא נשמור ונקפוץ חזרה ל- Figma כדי לראות איך הווידג'ט שלנו נראה. זוכר איך Figma טוען מחדש ווידג'טים אוטומטית עם שינויים חדשים?

אבל זה עדיין לא ממש שם. עלינו להוסיף גם צבע רקע לרכיב השורש:

<AutoLayout name={"Quote"} fill={"#ffffff"}>

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

בואו נמשיך במדריך הזה ונעצב את <Text> רכיבים.

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

<Text name={'QuoteText'}
  fontFamily={'Lora'}
  fontSize={36}
  width={700}
  fill={'#545454'}
  fontWeight={'normal'}
>{quote}</Text>

<Text name={'QuoteAuthor'}
  fontFamily={'Raleway'}
  fontSize={26}
  width={700}
  fill={'#16B6DF'}
  fontWeight={'bold'}
  textCase={'upper'}
>— {author}</Text>

הוספת מצב לווידג'ט

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

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

const { useSyncedState } = widget;

function QuotesWidget() {
  const [quote, setQuote] = useSyncedState("quote-text", "");
  const [author, setAuthor] = useSyncedState("quote-author", "");
}

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

שואב נתונים מהרשת

כזכור, כאשר Figma נתנה לנו את הבחירה להתחיל עם ווידג'ט התומך ב-iFrame. למרות שלא הלכנו עם האפשרות הזו, אנחנו עדיין חייבים ליישם חלק מהתכונות שלה. תן לי להסביר למה אנחנו לא יכולים פשוט להתקשר fetch() בתוך קוד הווידג'ט שלנו.

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

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

אבל אל תדאג, הפתרון של Figma לבעיה השנייה הזו הוא <iframe>ס. כל קוד HTML שנכתוב בקובץ, רצוי שנקרא ui.html, תהיה גישה לכל ממשקי ה-API של הדפדפן. אתה אולי תוהה איך נוכל להפעיל את הקוד הזה מהווידג'ט, אבל נבדוק את זה מאוחר יותר. עכשיו, בואו נקפוץ בחזרה לקוד:

// manifest.json
{
  "ui": "ui.html"
}

<!-- ui.html -->
<script>
window.onmessage = async (event) => {
  if (event.data.pluginMessage.type === 'networkRequest') {
    // TODO: fetch data from the server

    window.parent.postMessage({
      pluginMessage: {
        // TODO: return fetched data
      }
    }, '*')
  }
}
</script>

זו התבנית הכללית ל-widget-to-iframe תִקשׁוֹרֶת. בוא נשתמש בו כדי להביא נתונים מהשרת:

<!-- ui.html -->
<script>
window.onmessage = async (event) => {
  if (event.data.pluginMessage.type === 'networkRequest') {
    // Get random number from 0 to 100
    const randomPage = Math.round(Math.random() * 100)

    // Get a random quote from the Design Quotes API
    const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
    const data = await res.json()

    // Extract author name and quote content from response
    const authorName = data[0].title.rendered
    const quoteContent = data[0].yoast_head_json.og_description

    window.parent.postMessage({
      pluginMessage: {
        authorName,
        quoteContent
      }
    }, '*')
  }
}
</script>

אנו משאירים טיפול בשגיאות כדי לשמור על זה פשוט ולעניין. בואו נקפוץ חזרה לקוד הווידג'ט ונראה כיצד אנו ניגשים לפונקציות המוגדרות ב- <iframe>:

function fetchData() {
  return new Promise<void>(resolve => {
    figma.showUI(__html__, {visible: false})
    figma.ui.postMessage({type: 'networkRequest'})

    figma.ui.onmessage = async ({authorName, quoteContent}) => {
      setAuthor(authorName)
      setQuote(quoteContent)

      resolve()
    }
  })
}

כפי שאתה יכול לראות, אנחנו קודם כל אומרים לפיגמה לחשוף את הגישה לנסתר שלנו <iframe> וכדי להפעיל אירוע עם השם "networkRequest". אנחנו מטפלים באירוע הזה ב ui.html קובץ על ידי בדיקה event.data.pluginMessage.type === 'networkRequest', ולאחר מכן פרסום נתונים בחזרה לווידג'ט.

אבל שום דבר עדיין לא קורה... עדיין לא התקשרנו ל- fetchData() פוּנקצִיָה. אם נקרא לזה ישירות בפונקציית הרכיב, השגיאה הבאה מתרחשת במסוף:

Cannot use showUI during widget rendering.

פיגמה אומרת לנו לא להתקשר showUI ישירות בגוף הפונקציה... אז איפה כדאי לשים את זה? התשובה לכך היא וו חדש ופונקציה אחת חדשה: useEffect ו waitForTask. אולי כבר יש לך היכרות עם useEffect אם אתה מפתח React, אבל אנחנו הולכים להשתמש בו כאן כדי להביא נתונים מהשרת כאשר רכיב הווידג'ט עולה.

const { useEffect, waitForTask } = widget;

function QuotesWidget() {
  useEffect(() => {
    waitForTask(fetchData());
  });
}

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

בגלל איך ווידג'טים פועלים, useEffect צריך לטפל בהתקשרות מספר פעמים באותו מצב.

למרבה המזל, יש פתרון פשוט שנוכל לנצל ולהתקשר אליו useEffect רק פעם אחת כאשר הרכיב נטען לראשונה, וזה על ידי בדיקה אם ערכי המצב עדיין ריקים או לא:

function QuotesWidget() {
  useEffect(() => {
    if (!author.length & !quote.length) {
      waitForTask(fetchData());
    }
  });
}

אתה עלול להיתקל באירוע מפחיד"גישה לזיכרון מחוץ לתחום" שְׁגִיאָה. שֶׁלָה די נפוץ לראות בפיתוח תוספים ווידג'טים. פשוט הפעל מחדש את Figma וזה לא יהיה שם יותר.

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

אלו הם תווים של Unicode ועלינו לעצב אותם כראוי בקוד:

<!-- ui.html -->
<script>
window.onmessage = async (event) => {
  // ...
  const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};

// <https://stackoverflow.com/a/9609450>
var decodeEntities = (function () {
  // this prevents any overhead from creating the object each time
  var element = document.createElement("div");

  function decodeHTMLEntities(str) {
    if (str && typeof str === "string") {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([Ss]*?)</script>/gim, "");
      str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = "";
    }

    return str;
  }

  return decodeHTMLEntities;
})();
</script>

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

הוספת תפריט נכסים לווידג'ט שלנו

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

const { usePropertyMenu } = widget;

function QuotesWidget() {
  usePropertyMenu(
    [
      {
        itemType: "action",
        propertyName: "generate",
	tooltip: "Generate",
        icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
          <!-- Shortened for brevity -->
        </svg>`,
      },
    ],
    () => fetchData()
  );
}

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

פרסום הווידג'ט שלנו לציבור

אין הרבה תועלת בבניית ווידג'ט אם, ובכן, אף אחד שימושים זה. ובזמן Figma מעניקה לארגונים אפשרות להשיק פְּרָטִי יישומונים לשימוש פנימי, זה הרבה יותר נפוץ לשחרר את התוכניות הקטנות האלה לעולם.

ל-Figma יש תהליך סקירת יישומונים עדין שעשוי להימשך בין 5 ל-10 ימי עסקים. ובעוד יישומון ציטוטי העיצוב שבנינו יחד הוא כבר בספריית הווידג'טים, אני עדיין אדגים איך זה הגיע לשם. אנא אל תנסה לפרסם מחדש את הווידג'ט הזה שוב, כי זה רק יביא להסרה. אבל אם עשית לו כמה שינויים משמעותיים, קדימה ושתף את הווידג'ט שלך עם הקהילה!

התחל על ידי לחיצה על תפריט הווידג'טים (Shift+I) ומעבר ל- צעצועי התפתחות לשונית כדי להציג את הווידג'ט שלנו. לחץ על תפריט שלוש הנקודות ולחץ לפרסם.

Figma תבקש ממך להזין כמה פרטים על הווידג'ט שלך, כגון כותרת, תיאור וכמה תגים. נצטרך גם תמונת סמל בגודל 128×128 ותמונת באנר בגודל 1920×960.

לאחר ייבוא ​​כל הנכסים האלה, אנחנו עדיין צריכים צילום מסך של הווידג'ט שלנו. סגור את שיטת הפרסום (אל תדאג, לא תאבד את הנתונים שלך) ולחץ לחיצה ימנית על הווידג'ט כדי לחשוף תפריט הקשר מעניין. למצוא את ה העתק/הדבק בשםקטגוריה ובחר העתק כ-PNG.

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

גלול למטה ולבסוף פרסם את המודאל שלך. לַחֲגוֹג! 🎉

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

סיכום

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

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

משאבים נוספים

הייתי צריך להפנות להרבה תיעוד בזמן שהכנתי את הווידג'ט הזה. חשבתי לשתף במה שמצאתי שהכי עוזר.

בנה עוד ווידג'טים:

למד ווידג'טים לעומק יותר:

ווידג'טים לעומת תוספים