Bauen Sie interaktive Figma -Widgets auf

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: 从服务器获取数据window.parent.postMessage({ pluginMessage: { // TODO: 返回获取的数据} }, '*') } }</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的随机数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() // 从响应中提取作者姓名和报价内容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>在小部件渲染期间无法使用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!