การสร้างวิดเจ็ต Figma แบบโต้ตอบ

Figma สนับสนุนการทำงานร่วมกันระหว่างนักพัฒนาและนักออกแบบเสมอมา มันมุ่งมั่นในคลังปลั๊กอินที่สร้างโดยชุมชนไม่รู้จบ ต้องการองค์ประกอบ 3 มิติ? มีปลั๊กอินสำหรับสิ่งนั้น ต้องการ SVG ที่เป็นนามธรรมหรือไม่ มีปลั๊กอินสำหรับสิ่งนั้นเกินไป

ที่กล่าวว่าส่วนการออกแบบของ Figma นั้นค่อนข้างคงที่เสมอ - ทำงานกับสี่เหลี่ยมที่ไม่สามารถเคลื่อนย้ายได้ซึ่งเชื่อมต่อกันผ่านการโต้ตอบของผู้ใช้ที่กำหนดไว้ล่วงหน้า แต่ถ้าฉันบอกคุณว่างานออกแบบของคุณอาจมีชีวิตขึ้นมาได้ในทันใด — พวกเขาสามารถเคลื่อนไหวได้ โต้ตอบได้ และกระทั่งเก็บสถานะได้ แล้วอะไรจะแยกแนวคิดจากการนำไปปฏิบัติ?

มะเดื่อ ประกาศในเดือนมิถุนายน ที่นำวิดเจ็ตที่ขับเคลื่อนด้วย JavaScript มาสู่ตาราง ตอนนี้ นักออกแบบสามารถเรียกดูและใช้ส่วนประกอบที่ขับเคลื่อนด้วยตรรกะได้โดยตรงใน Figma!

ทักทาย วิดเจ็ต API! คุณต้องการที่จะรู้ว่ามันคืออะไรและใช้อย่างไร? นั่นคือสิ่งที่เราจะทำร่วมกันในโพสต์นี้

วิดเจ็ต Figma มอบความเป็นไปได้มากมาย

ลองนึกภาพว่าคุณกำลังทำงานกับคู่ของคุณตลอดเวลาเพื่อออกแบบแอปพลิเคชันร้านอาหารขนาดใหญ่ คุณทั้งคู่ได้ทำงานร่วมกันบนกระดาน Figma เดียวกันแล้ว คุณทั้งคู่กำลังแชร์เอกสารฉบับเดียวกันโดยมีการเปลี่ยนแปลงทันที

แน่นอน คุณรู้อยู่แล้วว่าการทำงานร่วมกันนั้นเกี่ยวข้องกับกระบวนการออกแบบมากกว่า:

• การจัดการโครงการ
• จัดการเลือกตั้งเพื่อรวบรวมคะแนนเสียง
• นำเข้าและแสดงภาพข้อมูลจำลอง
• และบางทีอาจจะเล่นเกมแบบผู้เล่นหลายคนเพื่อคลายร้อนหลังจากทำงานหลายชั่วโมง

เราเพียงต้องการคนเพียงคนเดียวเพื่อจัดการทุกอย่างและส่งลิงก์ไปยังสมาชิกคนอื่นๆ ในกลุ่ม แต่โอ้ นั่นไม่ได้มีประสิทธิภาพมากใช่ไหม

นั่นคือสิ่งที่วิดเจ็ตเข้ามาเล่น เราสามารถทำทุกอย่างได้ — ใช่ ทุกอย่าง — โดยไม่ต้องทิ้ง Figma

นี่เป็นเพียงไม่กี่วิธีที่คุณอาจต้องการใช้วิดเจ็ตใน Figma:

รายการไป เราและเรา. อย่างที่คุณบอกได้ว่ามีวิดเจ็ตมากมายที่คุณสามารถใช้ได้อย่างอิสระในเอกสารของคุณ ที่จริงแล้ว คุณสามารถเพิ่มวิดเจ็ตลงในบอร์ดของคุณได้โดยตรงจากเมนูวิดเจ็ต (Shift+I).

แต่เราไม่ได้อยู่ที่นี่เพื่อเรียนรู้วิธีใช้วิดเจ็ต เพราะมันง่าย ให้เราทำดีที่สุด: เราจะสร้างวิดเจ็ต Figma ของเราเอง! อันนี้จะได้แรงบันดาลใจจาก เว็บไซต์คำคมการออกแบบของ Chris Coyier. เราจะนำ API ป้อนลงในวิดเจ็ต จากนั้นแสดงราคาออกแบบแบบสุ่มใน Figma โดยตรง

นี่คือสิ่งที่เราต้องการ

ฉันไม่ชอบเป็นผู้แจ้งข่าวร้าย แต่เพื่อที่จะพัฒนาวิดเจ็ต คุณต้องใช้ Windows หรือ Mac ผู้ใช้ Linux ฉันขอโทษ แต่คุณโชคไม่ดี (คุณยังสามารถ ใช้ VM ถ้าต้องการติดตาม)

พวกเราจะ ดาวน์โหลด Figma Desktop แอปพลิเคชัน. วิธีที่ง่ายที่สุดในการเริ่มต้นคือการสร้างเทมเพลตวิดเจ็ตจากแอปโดยตรง

มาสร้างบอร์ดใหม่โดยเปิดเมนูวิดเจ็ต (Shift+ I) เปลี่ยนเป็น พัฒนาการ แท็บ และสร้างรายการใหม่

หลังจากนั้น Figma จะแจ้งให้คุณตั้งชื่อวิดเจ็ตใหม่และตัดสินใจว่าจะปรับแต่งให้เหมาะกับการใช้งานหรือไม่ บอร์ดออกแบบหรือบอร์ด FigJam ด้วย. ตัวเลือกเดิมเพียงพอสำหรับวัตถุประสงค์ของบทความนี้

และการปรับแต่งไม่ได้สิ้นสุดที่นี่ Figma ยังให้ตัวเลือกแก่คุณในการเริ่มต้นด้วยวิดเจ็ตตัวนับที่สร้างไว้ล่วงหน้าหรือทางเลือกที่เปิดใช้งาน iFrame ที่ให้คุณเข้าถึง Canvas และ Fetch API (รวมถึง API ของเบราว์เซอร์อื่นๆ ทั้งหมด) เราจะใช้ตัวเลือก "ว่าง" แบบง่ายๆ แต่ในที่สุดเราจะแก้ไขด้วยตนเองเพื่อใช้ประโยชน์จาก Fetch API

จากนั้น คุณจะได้รับแจ้งให้บันทึกโครงการวิดเจ็ตใหม่ของคุณไปยังไดเร็กทอรีพิเศษในระบบของคุณ เมื่อเสร็จแล้ว ให้เปิดเทอร์มินัลและนำทางไปยังโฟลเดอร์นั้น อย่าเพิ่งเรียกใช้คำสั่งใดๆ — เราจะดำเนินการในภายหลังและได้รับข้อผิดพลาดโดยมีจุดประสงค์โดยมีเป้าหมายเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ Widgets API

การออกแบบวิดเจ็ต

เรากำลังดึงการออกแบบตรงจาก เว็บไซต์คำคมการออกแบบของ Chris Coyier. ไปที่นั่นและดำดิ่งลงไปโดยเปิดใช้ DevTools

คีย์ลัดสองปุ่มที่ฉันใช้อยู่นี้คือ Ctrl+Shift+C (หรือ Cmd+Shift+C) เพื่อสลับเครื่องมือ "เลือกองค์ประกอบ" และ Shift+Click เพื่อเปลี่ยนรูปแบบสีเป็นรหัส HEX เรากำลังดำเนินการนี้เพื่อเรียนรู้เกี่ยวกับสี ฟอนต์ น้ำหนักฟอนต์ และขนาดฟอนต์ที่ใช้ในเว็บไซต์ของ Chris ข้อมูลทั้งหมดนี้มีความสำคัญอย่างยิ่งต่อการสร้างวิดเจ็ตที่คล้ายคลึงกันใน 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/> ส่วนประกอบยอมรับ a 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 ทั้งหมด สไตล์เกิดขึ้นจากชุดของ อุปกรณ์ประกอบฉากที่มีเอกสารอย่างดี. โชคดีสำหรับเราชื่อเหล่านี้เกือบ เหมือนกัน ให้กับคู่ของพวกเขาใน 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 ดังที่แสดงในอินโฟกราฟิกด้านบน นอกจากนี้ เราจะใช้ค่าจากส่วนสุดท้ายที่เราตรวจสอบเว็บไซต์ของ Chris

<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 ตะขอ; มันสวยมาก React's useStateแต่โปรแกรมเมอร์ต้องระบุคีย์เฉพาะ ข้อกำหนดนี้เกิดจากการที่ Figma ต้องซิงค์สถานะของวิดเจ็ตของเราข้าม ทั้งหมด ลูกค้าที่อาจดูบอร์ดออกแบบเดียวกัน แต่ผ่านคอมพิวเตอร์หลายเครื่อง

const { useSyncedState } = widget;

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

นั่นคือการเปลี่ยนแปลงทั้งหมดที่เราต้องการในตอนนี้ ในส่วนถัดไป เราจะหาวิธีดึงข้อมูลจากอินเทอร์เน็ต Spoiler Alert: มันไม่ง่ายอย่างที่คิด

กำลังดึงข้อมูลจากเครือข่าย

จำได้ว่าเมื่อ Figma ให้ทางเลือกแก่เราในการเริ่มต้นด้วยวิดเจ็ตที่เปิดใช้งาน iFrame แม้ว่าเราจะไม่ใช้ตัวเลือกนั้น แต่เรายังคงต้องใช้คุณลักษณะบางอย่างของมัน ให้ฉันอธิบายว่าทำไมเราถึงโทรหาไม่ได้ fetch() ภายในรหัสวิดเจ็ตของเรา

เมื่อคุณใช้วิดเจ็ต คุณกำลังเรียกใช้โค้ด JavaScript บนคอมพิวเตอร์ของคุณเองที่เขียนโดยบุคคลอื่น แม้ว่าเจ้าหน้าที่ของ Figma จะตรวจสอบวิดเจ็ตทั้งหมดอย่างละเอียด แต่ก็ยังเป็นช่องโหว่ด้านความปลอดภัยขนาดใหญ่ที่เราทุกคนทราบดีอยู่แล้ว สามารถสร้างความเสียหายได้ด้วย JavaScript แม้แต่บรรทัดเดียว.

เป็นผลให้ Figma ไม่สามารถทำได้ง่ายๆ eval() รหัสวิดเจ็ตใด ๆ ที่เขียนโดยโปรแกรมเมอร์นิรนาม สรุปโดยย่อ ทีมงานตัดสินใจว่าทางออกที่ดีที่สุดคือการรันโค้ดของบุคคลที่สามในสภาพแวดล้อมแซนด์บ็อกซ์ที่มีการป้องกันอย่างใกล้ชิด และอย่างที่คุณอาจเดาได้แล้วว่า API ของเบราว์เซอร์ไม่พร้อมใช้งานในสภาพแวดล้อมดังกล่าว

แต่อย่าวิตกกังวล วิธีแก้ปัญหาของฟิกม่าสำหรับปัญหาที่สองนี้คือ <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>

นั่นคือเทมเพลตทั่วไปสำหรับวิดเจ็ตต่อ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()
    }
  })
}

อย่างที่คุณเห็น อันดับแรก เรากำลังบอกให้ Figma เปิดเผยการเข้าถึงที่ซ่อนอยู่ของเรา <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>

และ voilàวิดเจ็ตของเราดึงใบเสนอราคาการออกแบบใหม่ทุกครั้งที่เพิ่มลงในบอร์ดออกแบบ

การเพิ่มเมนูคุณสมบัติไปยังวิดเจ็ตของเรา

แม้ว่าวิดเจ็ตของเราจะดึงใบเสนอราคาใหม่จากการสร้างอินสแตนซ์ แต่จะมีประโยชน์มากกว่าถ้าเราทำขั้นตอนนี้อีกครั้งแต่ไม่ลบออก ส่วนนี้จะสั้นเนื่องจากวิธีแก้ปัญหาค่อนข้างโดดเด่น กับ เมนูคุณสมบัติเราสามารถเพิ่มการโต้ตอบกับวิดเจ็ตของเราได้ด้วยการโทรเพียงครั้งเดียวไปที่ 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 ในระดับที่สูงขึ้น ผมขอแนะนำให้สำรวจชุมชน Widgets และใช้สิ่งที่ดึงดูดสายตาของคุณเป็นแรงบันดาลใจ สร้างวิดเจ็ตเพิ่มเติม ฝึกฝนทักษะ React ของคุณต่อไป และก่อนที่คุณจะรู้ตัว คุณจะได้สอนฉันถึงวิธีทำทั้งหมดนี้

แหล่งข้อมูลเพิ่มเติม

ฉันต้องอ้างอิงเอกสารจำนวนมากในขณะที่สร้างวิดเจ็ตนี้ ฉันคิดว่าฉันจะแบ่งปันสิ่งที่ฉันพบว่าสามารถช่วยได้มากที่สุด

สร้างวิดเจ็ตเพิ่มเติม:

เรียนรู้วิดเจ็ตในเชิงลึกมากขึ้น:

วิดเจ็ตเทียบกับปลั๊กอิน