Figma? ???? ???? ?? ??? ???? ??? ??? ???? ???? ?????? ?????. 3D ??? ??????? ????? ????! ?? SVG? ??????? ????? ????!

??? Figma? ??? ??? ?? ??? ???? ???? ???, ?? ?? ?? ? ??? ?? ??? ?? ?? ??? ?? ???? ???? ??? ?????. ??? ?? ??? ???? ??? ???? ? ??? ??? ??? ???????? ?????, ??? ?? ??? ? ? ????? ???? ??? ??? ???? ??????

Figma? 6 ?? JavaScript ?? ??? ?? ? ???? ??????. ?? ????? Figma?? ?? ?? ?? ?? ??? ???? ??? ? ????!

?? API? ?? ?? ?????! ??? ????, ??? ????? ?? ????? ??? ??? ???? ??? ?? ?? ? ????.

??? ??? ??? ???? ???????

??? ??? ???? ???? ??? ?? ?? ?? ????? ???? ?? ??? ?? ???????. ??? ?? ??? Figma Artboard?? ?? ??????.

??, ?? ??? ??? ???? ? ???? ???? ?? ?? ?? ????.

• ???? ??,
• ???? ??
• ????? ? ??? ?? ?? ? ???,
• ??? ???? ??? ??? ?? ?? ???? ??? ??? ? ?? ????.

? ???? ?? ?? ???? ??? ??? ??? ??????. ??? ??? ????? ????.

??? ???? ????. ??? Figma? ??? ??? ?? ? (?,? ?? ?)? ??? ? ????.

Figma?? ??? ????? ? ?? ??? ??? ????.

• Jira? Asana??? ??? ????
• Github?? ??? ????
• ?? ???? ?????
• ?? ??? ??????
• ?? ??? ????
• Tic Toe ????? ?? ??
• ?? ??
• ???? ????

????? ?????. ?????, ?? ??? ??? ??? ??? ?? ?? ??? ????. ??? ?? ?? (Shift I)?? ?? ?? ??? ??? ?? ? ? ????.

??? ??? ??? ???? ??? ??? ?? ??? ?? ????. ??? ??? ?????? : ??? ?? ??? Figma ??? ?? ????! ? ??? Chris Cyier? Design Quote ? ????? ??? ?? ????. ??? API? ?? ?? ??? ?? ? ?? Figma? ?? ??? ??? ???? ?????.

???? ??? ?

?? ?? ?? ??????? ?? ???? ??? ??? ????? Windows ?? Mac? ??????. Linux ???, ?????. ?? ?? ????. (?? ??? ???? ??? ?? ??? ??? ? ????.)

Figma Desktop ?? ????? ???? ? ????. ???? ?? ?? ??? ???????? ?? ?? ???? ???? ????.

?? ?? (Shift I)? ?? ?? ??? ???? ? ????? ??? ??? ??? ??? ??? ???.

? ?, Figma? ??? ??? ??? ???? ??? ?? ?? Figjam Artboards? ????? ?? ? ??? ????? ???? ?????. ? ??? ?? ?, ?? ????? ?????.

??? ??? ??? ????. Figma? ?? ??? ??? ?? ?? iframe? ????? ???? ??? ??? ??? ?????.?? ?? Canvas ? Fetch API (? ?? ?? ???? API)? ??? ? ? ????. ??? ??? "?"??? ????? ?? Fetch API? ????? ?? ?????.

?? ?? ? ?? ????? ???? ?? ????? ????? ???? ?????. ???? ???? ???? ??? ??????. ?? ??? ???? ????. ??? ? ????. ??? ????? ?? API? ?? ? ?? ??? ??? ??? ??? ????.

??? ??

Chris Cyier? Design Quote ? ????? ?? ????????. ???, DevTools? ???? ? ?? ?? ?????.

??? ?????? ? ?? ?? ?? ??? CTRL Shift C (?? CMD Shift C)?? ?? ?? ??? ???? ???? ?? ??? 16 ? ??? ?????. Chris ? ???? ???? ??, ??, ?? ?? ? ?? ??? ???? ??? ??? ?????. ? ?? ??? Figma?? ?? ??? ??? ???? ? ???? ??? ?? ??? ? ????! ??? ?? ??? ?? ??? ???? ??? ? ????.

? ??? ??? ??? ???? ??? ???? ??? ??? ???? ??? ???? ????. ??? ?? ??? ??? ???? ?????? ?? ?? ????? ?? ???????. CSS ???? ?? ??? ??? ? Figma ????? ????.

??? ?? ????? ????

???? ???? ?? ????? ???? ??? ??? ??? ???? ?????.

Figma? ??? ?? ??? ?? ? ?? ??? ???? ??? ?? ?? ????. ?? ?? ?? ???? ????? ??? ?? ??? ??? ?????.<autolayout></autolayout> ?? ??. ?? ? ?? ?? ?? ??? ?????.<text></text> ???<svg></svg> .

? ??? ?? ??? ?????? ... ?? ???? ?? ?????? ?? ??? ?????. ??? ?? ??? JSX ??? ?? ? ? ??? ? ???? ?????.

?????, ??? ??? ?? ??? ? ?? ?? ??? ???????. ?? API?? 8 ?? ??? ?? ?? ? ???? ??? ?? ??? ? ?? ??? ?? ?? ?????. ??? ? ? ? ??? ??? ??? ?? ??? ????? ???? ?????.

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

?? ?? ??? React??? ?? ??? ????? ?? ? ????.

 <code>function QuotesWidget() { const quote = `...`; const author = `...`; return (<autolayout></autolayout></code><svg></svg><autolayout><text> {????}</text><text> - {??}</text></autolayout><svg></svg>
  );
}

Widget.register (quoteswidget);

? ??? ???? ?? ?? ?????. ?? ?? ???? ?? ? ? ????. ???? name ??? ?? ??? ??? ?? ??? ? ????.

<code><autolayout name="{" quote></autolayout></code> <svg name="{" leftquotationmark></svg><autolayout name="{" quotecontent><text name="{" quotetext> {????}</text><text name="{" quoteauthor> - {??}</text></autolayout><svg name="{" rightquotationmark></svg> ;

??, ??? ??? ??? SVG? ? ? ????? ??? ?????.<svg></svg> ?? ??? SVG ??? ?? ??? ??? src ??? ?????. ??? ?? ? ?? ?? ???? ???? ???? ??? ?? ???.

 <code>const leftQuotationSvgSrc = `</code>
  // ???? ?? ??????? `;;
const rightquotationsvgsrc =` <svg fill="none" height="103" viewbox="0 0 118 103" width="118" xmlns="<http://www.w3.org/2000/svg>">
// ???? ?? ???????</svg> `;;

?? quoteswidget () {
  ?? (
    <svg name="{" leftquotationmark src="%7BleftQuotationSvgSrc%7D"></svg><svg name="{" rightquotationmark src="%7BrightQuotationSvgSrc%7D"></svg>
  );
}

?? ?? ??? ?? ?? ?? ?? ? ????? ? ?? ? ? ??? ?????! ??? ??? ??? ?? ?, ??? ??? ??? ?? ???? ? ??????.

??? ????? ?? ???

Figma? ? ? ??? ???? ??? ?? ? ? ??? ?? ??? ?????. ? ??? ???? ??? ????? ????? ?? ? ? ????.

?? ?? ?? (Shift I)? ?? ?? ??? ?? ? ?? ? ??? ????? ?? ??? ?? ?????. ??? ?? ? ????? ???? ????. ? ?? ? ??? ???? ??? manifest.json ??? ?? ????. ?, ??? ?? ??? ? ?? ?? ?????!

??, ?? ??? ?? ???? ?????

???? ?????. " ?? ?? "? ???? ??? ?????. ?? ?? ??? ???? ??? ??? ? ??? ???? ??? ????. Figma ??? ???? ?? ????? ???? ?? ??? ??????.

??? ?? JavaScript? TypeScript? ????? ??? ??? ? ????. npm install ? npm run watch (?? yarn ? yarn watch )? ???? ?? ? ??? ??? ?? ? ? ????. ???? ??? ????!

?? ???? ?? ??? ? ?? ???? ??? ?? ? ??? ??? ?? ??? ? ? ??? ????. ?? ???? ?? ?? ? ???? ?? ???? ? ?? ?? ? ? ????.

??? ?? ??

??? ??? ??? ??? ????? ????? ????? ??? ??? ??.

???? ???? Figma ?? ??? ??? ???????? ??? React ??????? ?? CSS? ?????? ??. Figma ??? ?? ?? ???? ?? ?? ??? ?? ?????. ????? ????? ??? ?? ????? ?? ??? ??? ??? ????.

??? ?? ? ??? ?? ? ????<autolayout></autolayout> ?? ??. ? ??? ??, ?? ??? ? ??? ?? ???? ?????. ?? ?? ??? ?? ???? ? ?? ??? ??? ? ????. ?? ??? ?? ???? ???? ?? ?? ??? ???? ?? ? ??? ??? ??? ??????.

 <code><autolayout direction="{" horizontal horizontal:="" horizontalalignitems="{" center name="{" quote padding="{{" spacing="{54}" vertical:="" verticalalignitems="{" start> <autolayout direction="{" vertical horizontal:="" horizontalalignitems="{" start name="{" quotecontent padding="{{" spacing="{10}" vertical:="" verticalalignitems="{" end></autolayout></autolayout> ;</code>

??? ? ??? ??????! ??? ??? ???? ???? ?? Figma? ?? ???? ?? ???. ??? ?? ? Figma? ??? ???? ?????? ??? ???????

??? ???? ????. ?? ?? ?? ??? ???? ???????.

<code><autolayout fill="{" name="{" quote></autolayout></code>

?? ? ?, Figma Artboard??? ?? ??? ?? ?? ??? ????? ??????.

? ???? ???? ?????<text></text> ?? ??? ???.

?? API ??? ??? ? ?? ??? ?? ?? ??? Figma ?? ????? ??? ?? ????? ?? ?????. ?? ?? ???? Chris ? ???? ?? ??? ????.

 <code><text fill="{'#545454'}" fontfamily="{'Lora'}" fontsize="{36}" fontweight="{'normal'}" name="{'QuoteText'}" width="{700}"> {quote}</text> <text fill="{'#16B6DF'}" fontfamily="{'Raleway'}" fontsize="{26}" fontweight="{'bold'}" name="{'QuoteAuthor'}" textcase="{'upper'}" width="{700}"> — {author}</text></code>

??? ??? ??????

??? ?? ??? ??? ?? ??? ?? ?? ??? ???? ????????. ??? ?? ?? ???? ???? ??? ??? ??????, ?? ??? ???? ?? ??? ? ???? ?????.

Figma??? State? useSyncedState hook? ???? ?????? ?? React? useState ???. ??? ?????? ?? ? key ???????. ? ?? ??? Figma? ??? ??? ?? ??? ? ??? ?? ?????? ???? ??? ??? ???????? ???? ?????.

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

??? ??? ????? ? ?? ?????. ?? ????? ????? ???? ?? ??? ??? ????. ???? ?? : ??? ??? ?? ? ???? ????.

?????? ???? ????

Figma? ???? Iframe? ????? ???? ????? ??? ? ????. ??? ? ??? ???? ???? ??? ? ?? ? ??? ????????. ?? ???? fetch() ??? ?? ? ??? ??? ???????.

??? ???? ???? ?? ??? ??? JavaScript ??? ???? ????. Figma ??? ?? ?? ??? ??? ??? ??????, ??? JavaScript ????? ??? ?? ??? ??? ? ??? ?? ?? ??? ??? ? ?? ??????.

??? Figma? ?? ?????? ??? ?? ??? ??? eval() ? ????. ??? ???, ?? ??? ???? ???? ?? ? ?? ?? ???? ?? ??? ???? ???? ??????. ?? ? ?? ??,? ????? ???? API? ??? ? ????.

??? ???? ????.? ? ?? ??? ?? Figma? ????<iframe></iframe> . ??? ??? ?? HTML ?? (?????? ui.html ??? ?)? ?? ???? API? ??? ? ? ????. ?? ??? ??? ??? ? ??? ??? ????? ????? ?? ?????. ?? ??? ??? ???.

 <code>// manifest.json { "ui": "ui.html" }</code>

 <code>window.onmessage = async (event) => { if (event.data.pluginMessage.type === 'networkRequest') { // TODO: 從服務器獲取數(shù)據(jù)window.parent.postMessage({ pluginMessage: { // TODO: 返回獲取的數(shù)據(jù)} }, '*') } }</code>

??? ???? iframe ????? ???? ??????. ???? ???? ?? ? ?????.

 <code>window.onmessage = async (event) => { if (event.data.pluginMessage.type === 'networkRequest') { // 獲取從0到100的隨機數(shù)const randomPage = Math.round(Math.random() * 100) // 從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() // 從響應中提取作者姓名和報價內(nèi)容const authorName = data[0].title.rendered const quoteContent = data[0].yoast_head_json.og_description window.parent.postMessage({ pluginMessage: { authorName, quoteContent } }, '*') } }</code>

???? ???? ???? ?? ?? ??? ?????. ?? ??? ???? ??? ?????? ?? ?????.<iframe></iframe> ?? ? ?? :

 <code>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() } }) }</void></code>

?????, ??? ?? Figma?? ??? ??? ??? ????? ????? ?????.<iframe></iframe> "NetworkRequest"?? ???? ??????. ???? ???? ui.html ???? event.data.pluginMessage.type === 'networkRequest' ??? ?? ???? ??? ???? ?????.

??? ?? ?? ?? ???? ????? ... ??? ??? fetchData() ??? ???? ?????. ?? ?? ???? ?? ???? ?? ??? ??? ?????.

<code>在小部件渲染期間無法使用showUI。</code>

Figma? ???? ?? ???? showUI ?? ??? ??? ???? ... ??? ??? ??? ??? ??????? ??? ??? ??? ??? ??? useEffect ? waitForTask ???. React Developer ? ?? ?? useEffect ? ?? ? ?? ??? ?? ?? ??? ??? ? ? ???? ???? ?? ?? ?? ???? ?????.

 <code>const { useEffect, waitForTask } = widget; function QuotesWidget() { useEffect(() => { waitForTask(fetchData()); }); }</code>

??? ?? ?? ??? ?? ??? ???? ?? ????? ? ?? "??"? ?????. ?? ??? ?? ??? ?? ? ??? ?? fetchData ?? ? ??? useEffect ?? ???? ??? ?????. React?? useEffect ? ?? ?? ? ??? ??? ??? Figma? ???? ???? ????. Figma ???? :

??? ???? ???? ?? ???? ??? ??? ???? ?? ? ???? ?? ???????.

????, ??? ??? ?? ??? ?? ??? ???? ?? ??? ?? ?? ? ?? ? useEffect ???? ??? ?? ??? ??? ? ????.

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

??? " ???? ?? ??? ??? "??? ??? ? ????. ??? ???? ? ?? ???? ?? ??????. ??? ?? ???? ??? ???? ????.

????? ??? ??? ???? ??? ? ? ????.

??? ?? ?? ???? ???? ???? ???????.

 <code>window.onmessage = async (event) => { // ... const quoteContent = decodeEntities(data[0].yoast_head_json.og_description); }; //<https:> 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(/]*>([\\\\S\\\\s]*?)/gim, ""); str = str.replace(/]|"[^"]*"|'[^']*')*>/gim, ""); element.innerHTML = str; str = element.textContent; element.textContent = ""; } return str; } return decodeHTMLEntities; })();</https:></code>

?? ??? ??? ?? ??? ?? ? ??? ??? ??? ???????.

??? ?? ??? ??????

??? ??????? ??? ??? ?? ??,? ????? ???? ??? ????? ?? ?? ? ? ??? ? ??????. ? ??? ???? ???? ??? ??? ?????. ?? ??? ???? usePropertyMenu Hook? ? ?? ???? ??? ?? ??? ?? ? ? ????.

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

??? ??? ???? ??? ??? ? ?? ??? ???? ??? ?? ? ????. ???? ????? ???? ?? ???? ? ??? ?????.

??? ???? ??????

??? ???? ??? ??? ???? ? ?? ???? ????. Figma? ??? ?? ??? ?? ?? ??? ?? ? ? ??? ? ??? ??? ???? ???? ?? ? ??????.

Figma?? 5 ~ 10 ?? ??? ??? ??? ?? ?? ????? ????. ??? ?? ?? ??? ?? ??? ?? ?? ?????? ??? ??? ??? ??? ????? ??? ????. ? ??? ?? ???? ????. ?? ?? ????? . ??? ? ?? ? ??? ???? ????? ??? ??? ?? ??????!

?? ?? ?? (Shift I)? ???? ?? ??? ???? ???????. ? ?? ? ??? ???? ??? ????.

Figma? ??, ?? ? ?? ??? ?? ??? ?? ?? ??? ????? ???? ?????. ?? 128 × 128 ??? ???? 1920 × 960 ?? ???? ?????.

??? ?? ???? ??? ??? ??? ??? ??? ?? ?????. ?? ??? ?? (???? ??, ???? ?? ??) ??? ??? ??? ???? ???? ???? ???? ??? ?????. ???? ? ??/?? ??? ?? PNG? ??? ??????.

? ??? ???? ?? ??? ??? ??? ??? ?? ?? ?????.

??? ????? ????? ??? ??????. ????! ?

Figma? ?? ?? ???? ?? ?? ??? ?????. ???? ?? ??? ???? ?? ??? ? ????.

?????

??? ?? ???? Figma ??? ??????! ?? ???, ?? ?? ?? ?? ???? ???? ??? ?? ?? ?? ????. ? GitHub ????? ??? ?? ?? ??? ??? ? ????.

Figma ??? ?? ??? ?? ??? ???? ???? ?? ?? ????? ???? ????? ???? ???? ?? ????. ? ?? ??? ?? ???? React ??? ?? ???? ???? ?? ?? ??? ???? ??? ??? ? ????.

? ?? ??

? ??? ?? ? ?? ??? ????????. ?? ?? ??? ? ?? ?? ? ???? ?????.

? ?? ?? ?? :

• ?? ????? ?? ??
• ??? ??? ?? Figma ?? ??

? ?? ??? ???? :

• ?? ?? ??
• ?? ?? ?? ??
• ??? ?? ??? ???? ??

?? ? ????

• ?? ? ????
• Figma ???? ??
• ?? ??? ????? ???? ??

? ??? ?? ? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!