Bauen Sie interaktive Figma -Widgets auf

Figma hat immer die Zusammenarbeit zwischen Entwicklern und Designer und Designern und Designer gefördert. 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 - immer wieder nicht verwendbare 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 gab im Juni bekannt, dass ein JavaScript-basierter Widget starten würde. Jetzt können Designer logisch gesteuerte Komponenten direkt in Figma durchsuchen und implementieren!

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

Figma -Widget ermöglicht 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 mehr als nur den Entwurfsprozess beinhaltet:

• Projektmanagement,
• eine Abstimmung,
• Importieren und visualisieren simulierte Daten,
• Spielen Sie vielleicht sogar ein Multiplayer -Spiel, um sich für lange Zeit 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.

Here are some ways you might want to use widgets in Figma:

• Create tasks for Jira and Asana
• Create issues in GitHub
• Show dynamic data
• Record voice memo
• Create a list of tasks
• Waste timePlay tic toe
• Track activities
• Create timers

So and so on. 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 verwendet, 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 brauchen wir

Ich mag es nicht, ein Spreeiter von schlechten 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 das Lernen fortsetzen möchten, können Sie die virtuelle Maschine weiterhin 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 zum Entwerfen von Artboards oder Figjam -Artboards geeignet ist. 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.

Das System fordert Sie dann auf, 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 das Design 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 unser Widget

Nach Abschluss des Designs ist es an der Zeit, unsere Programmierfinger herauszunehmen und die Zahnräder unserer Widgets aufzubauen.

Wie Figma seine Konstruktionsbausteine ​​in reag-ähnliche Komponenten umwandelt, ist sehr interessant. Beispielsweise wird im Code ein Framework -Element mit automatischem Layout als <autolayout> </autolayout> dargestellt. Zusätzlich verwenden wir zwei weitere Komponenten: <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.tsx const {widget} = figma; ayout> <svg> </svg> {Quote} - {Autor} <svg> </svg> ); Jetzt können wir nicht zwischen Designschichten unterscheiden. Glücklicherweise können wir dieses Problem leicht durch das Attribut Name lösen.

 <code> <autolayout name="{" quote> <svg name="{" linke quotationmark> </svg> <autolayout name="{" quotingcontent> <textname>        } ">  </textname></autolayout>; </autolayout></code> 

Natürlich können wir unser Angebot SVG immer noch nicht sehen, also beginnen wir mit der Lösung dieses Problems. Die <svg> </svg> akzeptiert ein src Attribut, das den Quellcode des SVG -Elements verwendet. Es gibt nicht viel zu sagen, also halten wir es einfach und springen Sie direkt zum Code zurück:

 <code> const linksquotationsvgsrc = `<svg fill=" Keine " h> `; xmlns = "<http:>"> // verkürzte Einfachheit </http:></svg> `; "src =" {rightquotationsvgsrc} "> );} </code> 

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

Figma bietet ein gutes Entwicklungserlebnis 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 Widget -Menü (Schicht I), wechseln Sie zur Registerkarte Entwicklung und klicken Sie dann oder ziehen Sie Ihr neues Widget auf das Kunstboard. Sie können Ihr Widget nicht finden? Machen Sie sich keine Sorgen, klicken Sie einfach auf das Drei-Punkte-Menü und importieren Sie die Datei Manifest.json 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 untersuchen. Klicken Sie auf " Öffnen Sie die Konsole " und lesen Sie den Inhalt. Wenn die Taste offene 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 mit JavaScript zusammengestellt haben. Wir können dies in der Befehlszeile tun, indem wir npm install und npm run Watch (oder Garn und Garn Uhr ) 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 problemlos mit dem folgenden Kontextmenübefehl erzwingen: Widget → Render-Widget .

Stileinstellungen Widget

Im Moment ist das Erscheinungsbild unserer Widgets noch weit von unserem ultimativen Ziel entfernt.

Wie stylen wir die Figma -Komponente 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 den gleichen Namen wie die entsprechenden Projekte in Figma.

Wir werden zuerst unsere zwei <autolayout> </autolayout> konfigurieren. 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:="" center name="{" quote padding="{{" spactical al:="" start quiteinter spaces="{10}" vertikal:="" verticalalignitems="{" end> </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 reicht nicht aus. Wir müssen der Stammkomponente auch Hintergrundfarbe hinzufügen:

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

In ähnlicher Weise schauen Sie sich Ihr Fig. Munoter und beachten Sie, wie die Änderungen fast sofort in das Widget reflektiert werden.

Lassen Sie uns diese Anleitung fortsetzen und die Komponente <text> </text> stylen.

Nach dem Anzeigen der Widgets -API -Dokumentation sehen Sie deutlich, dass der Eigenschaftsname nahezu dem entsprechenden Element in der Figmaanwendung 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'}" ober> - {Autor} </text> </code> 

Fügen Sie dem Widget

unser Widget derzeit das gleiche Zitat hinzu, wir möchten es jedoch zufällig aus dem gesamten Zitatpool extrahieren. Wir müssen unserem Widget einen Status hinzufügen, von dem alle React-Entwickler eine Variable sind, deren Änderungen einen Neurender unserer Komponente auslösen.

In Figma wird der Status mit dem useSyNCedState erstellt. Es ist fast React's Usestate , aber der Programmierer kann einen eindeutigen Schlüssel angeben. 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 {useNcedState} = widget; Im nächsten Abschnitt werden wir herausfinden, wie Sie Daten aus dem Internet erhalten. Spoiler -Warnung: Dies ist nicht so einfach, wie es scheint.  <h3> Daten aus dem Netzwerk abrufen </h3> <p> Rückruf -Figma Mit Figma können wir mit einem 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 nicht einfach <code> fetch () </code> im Widget -Code aufrufen können. </p> <p> Wenn Sie Widgets verwenden, werden JavaScript -Code ausgeführt, 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. </p> <p> Figma kann also nicht einfach <code> eval () </code> anonym einen von einem Programmierer geschriebenen Widget -Code. 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. </p> <p> Aber mach dir keine Sorgen, die Lösung von Figma für dieses zweite Problem ist <code> <iframe> </iframe></code>. Jeder HTML -Code, den wir in einer Datei schreiben (vorzugsweise <code> ui.html </code>), 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 zu dem Code zurück:  </p> <code> // Manifest.json {"ui": "ui.html"} </code> </code>

 <code> window.onmessage = async (Ereignis) & gt; Serverfenster.Parent.PostMessage ({PluginMessage: {// todo: Rückgabe der abgerufenen Daten}}, '*')}} </code> 

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

Fenster. fetch (`https://quotesondesign.com/wp-json/wp/v2/posts Rendered const quoteContent = data [0] .yoast_head_json.og_description window.parent.postmessage ({pluginMessage: {authorname, quiteinter}}, '*')}}

Um es einfach und klar zu halten, lassen wir die Fehlerbehandlung weg. Kehren Sie zum Widget -Code zurück und sehen Sie, wie wir auf die in <iframe> </iframe>:

 <code> Funktion fetchdata () {return New Promise <void> (Resolve = & Gt; }) figma.ui.onMessage = async ({authorname, quiteinter}) = & gt; } </void> </code> 

Wie Sie sehen können, sagen wir zuerst, dass Figma auf unseren versteckten <iframe> </iframe> zugreifen und ein Ereignis namens "NetworkRequest" auslösen soll. Wir verarbeiten dieses Ereignis in der Datei ui.html , indem wir event.data.pluginMessage.Type === 'NetworkRequest' überprüfen und dann die Daten wieder an das Widget veröffentlichen.

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

 <code> showui kann während des Widget -Renderings nicht verwendet werden. </code> 

Figma fordert uns an, nicht showui direkt in der Funktionsbehörde aufzurufen ... Also, wo sollen wir es setzen? Die Antwort ist ein neuer Haken und eine neue Funktion: useEffect und WaitForfAn . Wenn Sie ein React -Entwickler sind, sind Sie möglicherweise bereits mit useEffect vertraut. Wir werden sie jedoch hier verwenden, um Daten vom Server zu erhalten, wenn die Widget -Komponente montiert ist.

 <code> const {useEffect, WaitFortask} = Widget; Dies geschieht, weil <code> useEffect </code> per Definition erneut abgefeuert wird, wenn sich der Status des Widgets ändert oder wenn wir <code> FetchData </code> aufrufen. Während es eine Technik gibt, die nur <code> useEffect </code> einmal in React aufrufen kann, funktioniert es nicht mit der Implementierung von Figma. Aus Figma -Dokumentation:  <blockquote> <p> Aufgrund der Ausführung von Widgets sollte die VerwendungEffect mit demselben Zustand mehrmals aufgerufen werden. </p> </blockquote> <p> Zum Glück können wir eine einfache Problemumgehung nutzen, die nur aufgerufen wird. ;}}); Dies ist bei Plug-in- und Widget-Entwicklung sehr häufig. Starten Sie einfach die Figma neu und es wird nicht wieder erscheinen. </p> <p> Sie haben vielleicht bemerkt, dass manchmal Zitattext seltsame Zeichen enthält. </p> <p> Dies sind Unicode -Zeichen, wir müssen sie in dem Code korrekt formatieren: </p> <code> Fenster. OdeEntities = (function () {// Dies verhindert, dass jeder Overhead das Objekt jedes Mal var element = document.createelement ("div") erstellt; Funktion; decodehtmlentities (str) {if (str & amp; & amp; typeof str === "String") {// Strip script/html tags str = str.replace (/]*& gt; \\/? \\\\\\ W (?: [^"'& gt;] |" [^"]*" |' [^']*')*& gt;/gim, ""); Element.TextContent = "";  <h3> Eigenschaftenmenü in unserem Widget </h3> <p>, während unser Widget bei der Instanziation ein neues Angebot erhält, ist es praktischer, wenn wir diesen Vorgang 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 <code> usePropertyMenus </code> gleichzeitig aufrufen. </p> <pre class="brush:php;toolbar:false"> <code> const {usePropertyMenu} = Widget; www.w3.org/2000/svg> "> `,},], () = & gt; fetchData ());} </code> 

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 an der Öffentlichkeit

Wenn niemand es verwendet, ist das Erstellen eines Widgets von wenig nützlich. Während Figma es Unternehmen ermöglicht, private Widgets für den internen Gebrauch zu starten, ist es üblicher, 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 zuerst auf das Widget -Menü (Schicht I) und wechseln Sie dann zur Registerkarte Entwicklung, um unser Widget anzuzeigen. Klicken Sie auf das Drei-Punkt-Menü und drücken Sie Veröffentlichung .

Figma fordert Sie auf, einige Details zu Ihrem 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. Suchen Sie die Kategorie Kopieren/Einfügen als und wählen Sie als PNG kopieren.

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

nach unten ein und veröffentlichen Sie schließlich Ihren Modus. feiern!

Figma kontaktieren Sie in ein paar Tagen, 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.

Schlussfolgerung

Wir haben gerade ein Figma -Widget von Grund auf neu erstellt! 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 Figmafähigkeiten auf die nächste Stufe zu bringen, empfehle ich, die Widget -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 bei der Erstellung dieses Widgets auf eine Menge Dokumentation beziehen. Ich denke, ich werde das teilen, was ich am hilfreichsten fand.

Erstellen Sie mehr Widgets:

• Best Practices zum Erstellen von Widgets
• Offizielle Figma -Widget -Beispiele mit Code

Erfahren Sie mehr > Widgets und Plugins

• Widgets und Plugins
• Einführung in Figma -Plugins
• Wie Plugins hinter den Kulissen laufen

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!