Figma hat die Zusammenarbeit zwischen Entwicklern und Designern ermutigt und gedeiht mit seiner reichen Bibliothek von Community -Plugins. Ben?tigen Sie 3D -Elemente? Es gibt Plugins! Ben?tigen Sie eine abstrakte SVG? Es gibt auch Plugins!

Der Designteil von Figma war jedoch schon immer relativ statisch - unter Verwendung unbeweglicher Rechtecke, die durch vordefinierte Benutzerinteraktionen miteinander verbunden sind. Aber was würden Sie denken, wenn ich sagen würde, dass Ihr Design pl?tzlich zum Leben erweckt wird - kann animiert, interaktiv oder sogar staatlich sein? Was ist der Unterschied zwischen Konzepten und Implementierungen?

Figma kündigte im Juni an, ein auf JavaScript-basierter Widget zu starten. Jetzt k?nnen Designer logisch gesteuerte Komponenten direkt in Figma durchsuchen und implementieren!

Schauen wir uns die Widgets -API zusammen an! M?chten Sie wissen, was es ist und wie man es benutzt? Genau das werden wir gemeinsam in diesem Artikel untersuchen.

Figma -Widgets erm?glichen unendliche M?glichkeiten

Stellen Sie sich vor, Sie und Ihre Partner arbeiten Tag und Nacht, um eine gro?e Restaurantanwendung zu entwerfen. Sie alle arbeiten an derselben Figma -Kunstboard zusammen.

Natürlich wissen Sie bereits, dass die Zusammenarbeit nicht nur den Entwurfsprozess enth?lt:

• Projektmanagement,
• Eine Stimme halten,
• Importieren und visualisieren Sie simulierte Daten,
• Vielleicht spielen Sie sogar ein Multiplayer -Spiel, um sich lange zu entspannen.

Nur eine Person muss alles verwalten und Links an den Rest der Gruppe senden. Aber das ist nicht effizient, oder?

Hier kommt das Widget ins Spiel. Wir k?nnen uns vorstellen, all dies - ja, das alles - ohne Figma zu tun.

Hier sind einige M?glichkeiten, wie Sie Widgets in Figma verwenden m?chten:

• Erstellen Sie Aufgaben für Jira und Asana
• Erstellen Sie ein Problem in GitHub
• Dynamische Daten anzeigen
• Aufzeichnungsstimmungsmemos
• Erstellen Sie eine Aufgabenliste
• Zeitverschwendung spielen Tic Toe Games
• Tracking -Aktivit?ten
• Erstellen Sie einen Timer

Warte und warte. Wie Sie sehen k?nnen, gibt es bereits eine gro?e Anzahl von Widgets, die in Ihrer Dokumentation kostenlos verwendet werden k?nnen. In der Tat k?nnen Sie Ihrem altafel direkt aus dem widgetsmenü (Shift i) Widgets hinzufügen.

Aber wir sind nicht hier, um zu lernen, wie man Widgets benutzt, weil es einfach ist. Lassen Sie uns das tun, was wir am besten k?nnen: Wir werden unsere eigenen Figma -Widgets erstellen! Dieses Widget wird von der Design -Quote -Website von Chris Coyier inspiriert. Wir erhalten die API, füttern sie dem Widget und zeigen dann die zuf?lligen Designzitate direkt in Figma an.

Was wir brauchen

Ich mag es nicht, ein schlechter Nachrichten zu sein, aber um Widgets zu entwickeln, müssen Sie unter Windows oder Mac sein. Linux -Benutzer, Entschuldigung, Sie haben kein Glück. (Wenn Sie weiter lernen m?chten, k?nnen Sie dennoch eine virtuelle Maschine verwenden.)

Wir werden die Figma -Desktop -Anwendung herunterladen. Der einfachste Weg, um zu beginnen, besteht darin, Widget -Vorlagen direkt aus der Anwendung zu generieren.

Lassen Sie uns ein neues Kunstboard erstellen, indem wir das Widget -Menü (Shift I) ?ffnen, auf die Registerkarte Entwicklung wechseln und ein neues Projekt erstellen.

Danach fordert Figma Sie auf, das neue Widget zu benennen und zu entscheiden, ob es besser ist, Artboards oder Figjam Artboards zu entwerfen. Für den Zweck dieses Artikels ist die vorherige Option ausreichend.

Die Anpassung endet nicht dort. Wir werden die einfache "leere" Option w?hlen, aber wir werden sie schlie?lich selbst ?ndern, um die Fetch -API zu verwenden.

Anschlie?end werden Sie aufgefordert, das neue Widget -Projekt in einem speziellen Verzeichnis im System zu speichern. Starten Sie nach Abschluss Ihr Terminal und leiten Sie es in den Ordner. Führen Sie jetzt keine Befehle aus - wir werden es sp?ter tun und wir werden absichtlich einen Fehler machen, um mehr über die Widgets -API zu erfahren.

Design -Widgets

Wir erhalten Designs direkt von der Design -Quote -Website von Chris Coyier. Gehen wir also dorthin und graben uns tiefer, indem wir Devtools starten.

Die beiden wichtigsten Verknüpfungen, die ich hier verwende, sind Strg Shift C (oder CMD Shift C), um das Tool für die Auswahl von Elementen zu wechseln, und Schaltklicks, um das Farbformat in den Hex -Code zu ?ndern. Wir tun dies, um die Farben, Schriftarten, Schriftarten und Schriftgr??e zu verstehen, die auf der Chris -Website verwendet werden. Alle diese Informationen sind entscheidend für den Aufbau eines sehr ?hnlichen Widgets in Figma, und dies wird unser n?chster Schritt sein! Sie k?nnen die entworfenen Komponenten schnappen und sie auf Ihrer eigenen Leinwand verwenden.

Ich werde hier nicht auf Details eingehen, da das Thema dieses Artikels darin besteht, Widgets durch das Schreiben von Code zu erstellen. Aber ich muss betonen, dass es sehr wichtig ist, Ihre Widgets sorgf?ltig zu stylen. CSS-Tricks haben bereits viele designorientierte Figma-Tutorials.

Erstellen Sie Layouts für unsere Widgets

Sobald das Design fertig ist, ist es an der Zeit, unsere Programmierfinger herauszuziehen und die Zahnr?der unserer Widgets zu bauen.

Es ist sehr interessant, wie Figma seine Konstruktionsbausteine ??in reag-?hnliche Komponenten umwandelt. Beispielsweise wird im Code als Code ein Framework -Element mit automatischer Layoutfunktion dargestellt<autolayout></autolayout> Komponenten. Darüber hinaus werden wir zwei weitere Komponenten verwenden:<text></text> Und<svg></svg> .

Schauen Sie sich meine Figma -Kunstboard an ... Ich bitte Sie, auf den Objektbaum zu achten. Dies ist der Schlüssel zu unserer Notwendigkeit, unser Widget -Design in JSX -Code umzuwandeln.

Wie Sie sehen k?nnen, erfordert unser Design -Zitat -Widget zum Importieren von drei Komponenten. In Anbetracht der Tatsache, dass die vollst?ndige API nur acht schichtbasierte Knoten enth?lt, ist dies eine betr?chtliche Anzahl von Komponenten. Aber wie Sie bald sehen werden, reichen diese Module aus, um alle Arten von Layouts zu erstellen.

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

Damit k?nnen wir das Skelett unserer Widgets wie in React bauen:

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

widget.register (ziteswidget);

Dieser Code ist, gelinde gesagt, sehr verwirrend. Jetzt k?nnen wir nicht zwischen Designschichten unterscheiden. Glücklicherweise k?nnen wir dieses Problem leicht mit name verwenden.

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

Natürlich k?nnen wir unser Angebot SVG immer noch nicht sehen, also beginnen wir mit diesem Problem.<svg></svg> Die Komponente akzeptiert ein src -Attribut, das den Quellcode des SVG -Elements nimmt. Darauf gibt es nicht viel zu sagen, also halten wir es einfach und springen Sie zurück zum Code:

 <code>const leftQuotationSvgSrc = `</code>
  // Der Einfachheit halber wurde es verkürzt `;
const rightquotationsvgsrc = ` <svg fill="none" height="103" viewbox="0 0 118 103" width="118" xmlns="<http://www.w3.org/2000/svg>">
// Der Einfachheit halber wurde es verkürzt</svg> `;

Funktion zitesSwidget () {
  Zurückkehren (
    <svg name="{" leftquotationmark src="%7BleftQuotationSvgSrc%7D"></svg><svg name="{" rightquotationmark src="%7BrightQuotationSvgSrc%7D"></svg>
  );
}

Ich denke, wir k?nnen uns alle einig sein, dass jetzt alles viel klarer ist! Wenn wir Dinge nennen, wird ihr Zweck für die Leser unseres Codes pl?tzlich deutlicher.

Vorschau unseres Widgets in Echtzeit

Figma bietet eine gute Entwicklungserfahrung beim Aufbau von Widgets, einschlie?lich (aber nicht beschr?nkt auf das hei?e Nachladen). Mit dieser Funktion k?nnen wir ?nderungen in Widgets in Echtzeit codieren und Vorschau auf die Vorschau haben.

?ffnen Sie zun?chst das Widgets -Menü (Schicht I), wechseln Sie zur Registerkarte Entwicklung und klicken Sie auf oder ziehen Sie Ihr neues Widget auf das ARTboard. Sie k?nnen Ihr Widget nicht finden? Machen Sie sich keine Sorgen, klicken Sie einfach auf das Drei -Punkt -Menü und importieren Sie die manifest.json -Datei Ihres Widgets. Ja, das sind alle Schritte, um es wieder in die Existenz zu bringen!

Warten Sie, gibt es am Ende Ihres Bildschirms eine Fehlermeldung?

Wenn ja, lassen Sie uns nachforschen. Klicken Sie auf " Konsole ?ffnen " und lesen Sie den Inhalt. Wenn die Taste der offenen Konsole verschwindet, gibt es eine alternative M?glichkeit, die Debug -Konsole zu ?ffnen. Klicken Sie auf das Figma -Logo, springen Sie zur Kategorie der Widgets und zeigen Sie das Entwicklungsmenü an.

Der Fehler kann darauf liegen, dass wir noch nicht in JavaScript zusammengestellt haben. Wir k?nnen dies auf der Befehlszeile tun, indem wir npm install und npm run watch (oder yarn und yarn watch ) ausführen. Diesmal gibt es keine Fehler!

Eine weitere Hürde, auf die Sie begegnen k?nnen, ist, dass das Widget nicht jedes Mal erneut gerendert werden kann, wenn sich der Code ?ndert. Wir k?nnen Widget-Updates einfach mit dem folgenden Kontextmenübefehl erzwingen: Widget → Render-Widgets neu .

Stileinstellungen Widget

Im Moment ist das Aussehen unserer Widgets noch weit von dem entfernt, was wir letztendlich tun m?chten.

Wie stylen wir die Figmakomponente aus dem Code? Vielleicht mit CSS wie in einem React -Projekt verwenden? Fehler. Für Figma -Widgets werden alle Stile über einen vollst?ndigen Satz von Eigenschaften implementiert. Glücklicherweise haben diese Projekte fast genau den gleichen Namen wie die entsprechenden Projekte in Figma.

Wir werden zuerst unsere beiden konfigurieren<autolayout></autolayout> Komponenten. Wie in der obigen Abbildung gezeigt, beschreiben die Attributnamen ihren Zweck sehr deutlich. Auf diese Weise k?nnen wir direkt zum Code springen und einige ?nderungen vornehmen. Ich werde den gesamten Code nicht noch einmal zeigen, also verlassen Sie mich auf den Komponentennamen, um Sie dort zu führen, wo sich das Code -Snippet befindet.

 <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>

Wir haben gro?e Fortschritte gemacht! Lassen Sie uns speichern und zu Figma zurückkehren, um zu sehen, wie unser Widget aussieht. Erinnern Sie sich, wie Figma das Widget nach einer neuen ?nderung automatisch neu l?dt?

Aber es ist nicht genug. Wir müssen der Stammkomponente auch Hintergrundfarbe hinzufügen:

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

Schauen Sie sich erneut Ihre Figma -Kunstboard an und bemerken Sie, wie sich die ?nderungen fast sofort in das Widget widerspiegeln.

Lassen Sie uns diesen Leitfaden fortsetzen und sie einrichten<text></text> Der Stil der Komponente.

Nach der überprüfung der Widgets -API -Dokumentation ist erneut klar, dass der Eigenschaftsname nahezu mit seinem Gegenstück in der Figma -Anwendung ist, wie in der obigen Abbildung gezeigt. Wir werden auch die Werte der Chris -Website im vorherigen Abschnitt verwenden.

 <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>

Fügen Sie dem Widget Status hinzu

Unser Widget zeigt derzeit das gleiche Zitat, aber wir m?chten zuf?llig aus dem gesamten Zitatpool extrahieren. Wir müssen unserem Widget zu Zustand hinzufügen, von dem alle React-Entwickler wissen, dass es sich um eine Variable handelt, und ihre ?nderungen führen zu einer erneuten Rendern unserer Komponenten.

In Figma wird der Zustand mit useState useSyncedState -Haken erstellt key Diese Anforderung beruht auf der Tatsache, dass Figma die Zust?nde unserer Widgets synchronisieren muss, die alle Clients überspannen, die m?glicherweise das gleiche Design -Kunstboard sehen, jedoch über verschiedene Computer.

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

Im Moment sind das alle ?nderungen, die wir vornehmen müssen. Im n?chsten Abschnitt werden wir herausfinden, wie Sie Daten aus dem Internet erhalten. Spoiler -Warnung: Dies ist nicht so einfach, wie es scheint.

Holen Sie sich Daten aus dem Netzwerk

Mit Abrechnung von Figma k?nnen wir mit dem Widget beginnen, das IFrame erm?glicht. Obwohl wir diese Option nicht gew?hlt haben, mussten wir einige seiner Funktionen noch implementieren. Lassen Sie mich erkl?ren, warum wir fetch() im Widget -Code nicht einfach aufrufen k?nnen.

Wenn Sie Widgets verwenden, führen Sie JavaScript -Code aus, das von jemand anderem auf Ihrem Computer geschrieben wurde. W?hrend alle Widgets von Figma -Mitarbeitern gründlich geprüft wurden, ist dies immer noch eine gro?e Sicherheitsanf?lligkeit, da wir alle wissen, wie viel Schaden selbst eine JavaScript -Linie verursachen kann.

Daher kann Figma nicht einfach eval() . Kurz gesagt, das Team entschied, dass die beste L?sung darin bestand, Code von Drittanbietern in einer eng geschützten Sandbox-Umgebung auszuführen. Wie Sie vielleicht vermutet haben, ist die Browser -API in dieser Umgebung nicht verfügbar.

Aber keine Sorge, die L?sung von Figma für dieses zweite Problem ist<iframe></iframe> . Jeder HTML -Code, den wir in einer Datei schreiben (vorzugsweise ui.html ), hat Zugriff auf alle Browser -APIs. M?glicherweise fragen Sie sich, wie wir diesen Code von einem Widget ausl?sen k?nnen, aber wir werden uns sp?ter damit befassen. Kehren wir nun zum Code zurück:

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

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

Dies ist eine gemeinsame Vorlage für Widget -to -Iframe -Kommunikation. Verwenden wir es, um Daten vom Server abzurufen:

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

Um es einfach und klar zu halten, lassen wir die Fehlerbehebung aus. Kehren wir zum Widget -Code zurück und sehen, wie wir darauf zugreifen<iframe></iframe> Funktionen definiert in:

 <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>

Wie Sie sehen k?nnen, sagen wir zuerst Figma, wir sollen ?ffentlich auf unsere versteckten Zugriffe zugreifen<iframe></iframe> Und ausl?sen ein Ereignis namens "NetworkRequest". Wir verarbeiten dieses Ereignis in der ui.html -Datei, indem wir event.data.pluginMessage.type === 'networkRequest' überprüfen und dann die Daten an das Widget zurückgeben.

Aber noch ist noch nichts passiert ... wir haben fetchData() noch nicht angerufen. Wenn wir es direkt in der Komponentenfunktion aufrufen, wird der folgende Fehler in der Konsole angezeigt:

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

Figma sagt uns, wir sollen showUI nicht direkt im Funktionsk?rper anrufen ... Also, wo sollen wir es setzen? Die Antwort ist ein neuer Haken und eine neue Funktion: useEffect und waitForTask . Wenn Sie ein React -Entwickler sind, sind Sie m?glicherweise bereits mit useEffect vertraut, aber wir werden es hier verwenden, um Daten vom Server zu erhalten, wenn die Widget -Komponenten montiert werden.

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

Dies führt jedoch zu einem weiteren "Fehler", dass unser Widget immer mit neuen Zitaten neu geführt wird. Dies geschieht, weil useEffect per Definition erneut abfeuert, wenn sich der Status des Widgets ?ndert oder wenn wir fetchData aufrufen. Obwohl es eine Technik gibt, die nur einmal in React useEffect aufrufen kann, funktioniert sie nicht mit der Implementierung von Figma. Aus der Figma -Dokumentation:

Aufgrund der Art und Weise, wie das Widget ausgeführt wird, sollte der Gebrauch Effect verarbeiten, wenn Sie mehrmals mit demselben Zustand aufgerufen werden.

Glücklicherweise k?nnen wir eine einfache Problemumgehung nutzen, die die Aufrufe nur dann useEffect , wenn die Komponente zum ersten Mal montiert wird, indem der Wert des Staates noch leer ist:

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

Sie k?nnen auf einen schrecklichen Fehler " Speicherzugriff aus den Grenzen " sto?en. Dies ist bei Plug-in- und Widget-Entwicklung sehr h?ufig. Starten Sie einfach die Figma neu und es wird nicht wieder erscheinen.

M?glicherweise haben Sie bemerkt, dass manchmal Zitattext seltsame Zeichen enth?lt.

Dies sind Unicode -Zeichen, und wir müssen sie im Code korrekt formatieren:

 <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>

Look, unser Widget erh?lt jedes Mal ein brandneues Design -Zitat, wenn es in die Design -Kunstkarte hinzugefügt wird.

Fügen Sie unserem Widget Eigenschaftenmenü hinzu

W?hrend unser Widget bei der Instanziierung ein neues Angebot erh?lt, ist es praktischer, wenn wir diesen Prozess erneut ausführen k?nnen, ohne ihn zu entfernen. Dieser Abschnitt wird kurz eingeführt, da die L?sung ausgezeichnet ist. Mit dem Menü Eigenschaften k?nnen wir unserem Widget Interaktivit?t hinzufügen, indem wir den usePropertyMenu -Hook sofort aufrufen.

 <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 ()
  );
}

Mit einem einfachen Haken k?nnen wir eine Taste erstellen, die in der N?he unseres Widgets angezeigt wird, wenn unser Widget ausgew?hlt ist. Dies ist der letzte Teil, den wir hinzufügen müssen, um dieses Projekt abzuschlie?en.

Ver?ffentlichen Sie unser Widget für die ?ffentlichkeit

Wenn niemand es benutzt , ist das Erstellen eines Widgets von geringem Nutzen. W?hrend Figma es Unternehmen erm?glicht, private Widgets für den internen Gebrauch zu starten, ist es h?ufiger, diese Applets auf der ganzen Welt zu ver?ffentlichen.

Figma hat einen sorgf?ltigen Widget -überprüfungsprozess, der zwischen 5 und 10 Arbeitstagen dauern kann. W?hrend das Design -Zitat -Widget, das wir zusammen erstellt haben, bereits in der Widget -Bibliothek befindet, werde ich immer noch demonstrieren, wie es dort kommt. Bitte versuchen Sie nicht, dieses Widget erneut zu ver?ffentlichen, da dies nur zu L?schen führt . Wenn Sie jedoch einige wichtige ?nderungen daran vornehmen, teilen Sie weiterhin Ihre eigenen Widgets mit der Community!

Klicken Sie zun?chst auf das Widget -Menü (SHIFT I) und wechseln Sie zur Registerkarte Entwicklung , um unser Widget anzuzeigen. Klicken Sie auf das Menü Drei Punkte und drücken Sie die Ver?ffentlichung .

Figma fordert Sie auf, einige Details über Ihr Widget wie Titel, Beschreibung und einige Tags einzugeben. Wir brauchen auch ein 128 × 128 -Symbolbild und ein 1920 × 960 Bannerbild.

Nach dem Importieren all dieser Ressourcen ben?tigen wir noch einen Screenshot des Widgets. Schalten Sie den Ver?ffentlichungsmodus aus (keine Sorge, Sie werden keine Daten verlieren) und klicken Sie mit der rechten Maustaste auf das Widget, um ein interessantes Kontextmenü anzuzeigen. Finden Sie als Kategorie kopieren/einfügen und w?hlen Sie als PNG kopieren .

Sobald dies erledigt ist, gehen wir zurück in den Ver?ffentlichung des Modus und fügen Sie den Screenshot des Widgets in ein:

Scrollen Sie nach unten und lassen Sie schlie?lich Ihr Muster los. feiern! ?

Figma wird Sie in wenigen Tagen in Verbindung setzen, um Sie über den Status der Modellüberprüfung zu informieren. Wenn Sie abgelehnt werden, haben Sie die M?glichkeit, die ?nderungen vorzunehmen und sie erneut einzureichen.

abschlie?end

Wir haben gerade ein Figma -Widget von Grund auf neu gebaut! Hier gibt es eine Menge, die hier nicht behandelt wird, wie z. B. Klickereignisse, Eingabeberkten und vieles mehr. Sie k?nnen in diesem Github -Repository in den vollst?ndigen Quellcode von Widget eingraben.

Für diejenigen, die bestrebt sind, ihre Figma -F?higkeiten auf die n?chste Ebene zu bringen, empfehle ich, die Widgets -Community zu erkunden und das zu verwenden, was Sie als Inspiration interessiert. Bauen Sie weiter mehr Widgets auf, verbessern Sie Ihre React -F?higkeiten weiter und Sie werden mir beibringen, wie Sie alles tun k?nnen, bevor Sie es erkennen.

Weitere Ressourcen

Ich musste mich auf eine Menge Dokumentation beziehen, wenn ich dieses Widget machte. Ich denke, ich werde das teilen, was ich am hilfreichsten fand.

Erstellen Sie mehr Widgets:

• Best Practices für den Bau von Widgets
• Offizielles Figma -Widget -Beispiel, einschlie?lich Code

Erfahren Sie mehr Widgets:

• Alle Widget -Haken
• Alle Widget -Komponenten
• Wie Widgets hinter den Kulissen arbeiten

Widgets und Plug-Ins

• Widgets und Plug-Ins
• Einführung in das Figma -Plugin
• So laufen Sie das Plugin hinter den Kulissen

Das obige ist der detaillierte Inhalt vonBauen Sie interaktive Figma -Widgets auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!