Figma hat immer die Zusammenarbeit zwischen Entwicklern und Designern gefördert. Es strebt nach einer endlosen Schatzkammer von Community-erstellten Plugins. Benötigen Sie 3D-Elemente? Dafür gibt es ein Plugin. Benötigen Sie abstrakte SVGs? Dafür gibt es ein Plugin, Zu.
Allerdings war der Designteil von Figma schon immer relativ statisch – es wurde immer mit unbeweglichen Rechtecken gearbeitet, die durch vordefinierte Benutzerinteraktionen miteinander verbunden sind. Aber was wäre, wenn ich Ihnen sagen würde, dass Ihre Designs plötzlich zum Leben erweckt werden könnten – dass sie animiert, interaktiv und sogar zustandsbehaftet sein könnten? Was würde dann das Konzept von der Umsetzung trennen?
Figma angekündigt im Juni dass es JavaScript-betriebene Widgets auf den Tisch bringt. Jetzt können Designer logikgesteuerte Komponenten direkt in Figma durchsuchen und implementieren!
Sag hallo zu die Widgets-API! Du willst wissen, was es ist und wie man es benutzt? Genau das werden wir in diesem Beitrag gemeinsam tun.
Figma-Widgets eröffnen unzählige Möglichkeiten
Stellen Sie sich vor, Sie arbeiten rund um die Uhr mit Ihrem Partner an der Entwicklung einer großen Restaurantanwendung. Sie arbeiten beide bereits im selben Figma-Board zusammen; Sie beide teilen genau dasselbe Dokument, wobei Änderungen im laufenden Betrieb vorgenommen werden.
Sicher wissen Sie bereits, dass Zusammenarbeit mehr als nur den Designprozess umfasst:
- Projektmanagement,
- Durchführung von Umfragen, um Stimmen zu sammeln,
- Importieren und Visualisieren von Mock-Daten,
- und vielleicht sogar ein Multiplayer-Spiel spielen, um sich nach vielen Stunden Arbeit abzukühlen.
Wir benötigen nur eine Person, die alles verwaltet und Links an andere Mitglieder der Gruppe versendet. Aber oh, das ist nicht sehr effizient, oder?
Nun, hier kommen Widgets ins Spiel. Wir können all das – ja, alles – tun, ohne Figma jemals verlassen zu müssen.
Hier sind nur einige der Möglichkeiten, wie Sie Widgets in Figma verwenden möchten:
Die Liste geht und weiter. Wie Sie sehen, gibt es bereits eine Fülle von Widgets, die Sie frei in Ihren Dokumenten verwenden können. Tatsächlich können Sie Widgets direkt aus dem Widgets-Menü zu Ihrem Board hinzufügen (Shift+I).
Aber wir sind nicht hier, um zu lernen, wie man Widgets verwendet, denn das ist einfach. Lassen Sie uns das tun, was wir am besten können: Wir werden unser eigenes Figma-Widget erstellen! Dieser wird sich inspirieren lassen Website mit Designzitaten von Chris Coyier. Wir nehmen die API, füttern sie in das Widget und zeigen dann zufällige Designzitate direkt in Figma an.
Hier ist, was wir brauchen
Ich bin nicht gerne der Überbringer schlechter Nachrichten, aber um Widgets zu entwickeln, müssen Sie Windows oder Mac verwenden. Linux-Benutzer, es tut mir leid, aber Sie haben kein Glück. (Du könntest noch eine VM verwenden wenn du mitmachen willst.)
Wir werden Laden Sie den Figma-Desktop herunter Anwendung. Der einfachste Einstieg ist das Generieren einer Widget-Vorlage direkt aus der App heraus.
Lassen Sie uns ein neues Board erstellen, indem Sie das Widgets-Menü öffnen (Shift+ I), Umschalten auf die Entwicklung Registerkarte und Erstellen eines neuen Elements.
Anschließend fordert Figma Sie auf, das neue Widget zu benennen und zu entscheiden, ob es besser darauf zugeschnitten ist Designtafeln oder FigJam-Tafeln zu. Die erstere Option ist für die Zwecke dieses Artikels ausreichend.
Und die Anpassung endet hier nicht; Figma gibt Ihnen auch die Möglichkeit, mit einem vorgefertigten Zähler-Widget oder einer iFrame-fähigen Alternative zu beginnen, die Ihnen auch Zugriff auf die Canvas- und Fetch-APIs (sowie alle anderen Browser-APIs) gibt. Wir verwenden die einfache Option „Empty“, aber wir werden sie schließlich selbst ändern, um die Fetch-API zu verwenden.
Sie werden dann aufgefordert, Ihr neues Widget-Projekt in einem speziellen Verzeichnis in Ihrem System zu speichern. Sobald dies erledigt ist, starten Sie Ihr Terminal und leiten Sie es zu diesem Ordner. Führen Sie noch keine Befehle aus – wir werden das später tun und absichtlich einen Fehler erhalten, mit dem Ziel, mehr über die Widgets-API zu erfahren.
Entwerfen des Widgets
Wir ziehen das Design direkt aus Website mit Designzitaten von Chris Coyier. Gehen wir also dorthin und tauchen ein, indem wir DevTools starten.
Die beiden Tastenkombinationen, die ich hier verwende, sind Ctrl+Shift+C (oder Cmd+Shift+C), um das Werkzeug „Element auswählen“ umzuschalten, und Shift+Click um das Farbformat in HEX-Code zu ändern. Wir tun dies, um mehr über die Farben, Schriftarten, Schriftstärken und Schriftgrößen zu erfahren, die auf der Website von Chris verwendet werden. All diese Informationen sind entscheidend, um ein sehr ähnliches Widget in Figma zu erstellen, was unser nächster Schritt sein wird! Du kannst Nehmen Sie die entworfene Komponente und verwenden Sie es in Ihrer eigenen Leinwand.
Ich werde hier nicht sehr ins Detail gehen, da das Hauptthema dieses Artikels das Erstellen von Widgets durch das Schreiben von Code ist. Aber ich kann nicht genug betonen, wie wichtig es ist, sich gut um ihn zu kümmern Stil der Widgets… CSS-Tricks hat bereits eine Fülle von designorientierte Figma-Tutorials; Sie werden es nicht bereuen, sie Ihrer Leseliste hinzuzufügen.
Erstellung des Layouts für unser Widget
Nachdem das Design aus dem Weg geräumt ist, ist es an der Zeit, unsere Programmierfinger herauszunehmen und mit dem Bau der Zahnräder unseres Widgets zu beginnen.
Es ist sehr interessant, wie Figma seine Designbausteine in React-ähnliche Komponenten übersetzt. Rahmenelemente mit der Auto-Layout-Funktion werden beispielsweise als dargestellt <AutoLayout /> Komponente im Code. Darüber hinaus verwenden wir zwei weitere Komponenten: <Text /> und <SVG />.
Werfen Sie einen Blick auf mein Figma-Board… Ich bitte Sie genau, sich auf den Objektbaum zu konzentrieren. Das brauchen wir, um unser Widget-Design in JSX-Code übersetzen zu können.
Wie Sie sehen können, erfordert unser Design-Quotes-Widget den Import von drei Komponenten. Das ist eine anständige Anzahl von Komponenten, wenn man bedenkt, dass die vollständige API enthält nur acht schichtbasierte Knoten. Aber wie Sie bald sehen werden, sind diese Module mehr als ausreichend, um alle Arten von Layouts zu erstellen.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Und damit haben wir alles, was wir brauchen, um das Skelett unseres Widgets zu bauen, wie wir es in React tun würden:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Dieser Code ist, gelinde gesagt, sehr verwirrend. Im Moment können wir die Designebenen nicht voneinander unterscheiden. Glücklicherweise können wir dieses Problem durch die Verwendung von einfach lösen name Eigentum.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;Und natürlich können wir unsere Anführungszeichen-SVGs immer noch nicht sehen, also lassen Sie uns daran arbeiten, das zu beheben. Das <SVG/> Komponente akzeptieren a src-Eigenschaft, die den Quellcode für ein SVG-Element übernimmt. Dazu gibt es nicht viel zu sagen, also lassen Sie es uns einfach halten und direkt zum Code zurückkehren:
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} />
);
}Ich denke, wir sind uns alle einig, dass jetzt alles viel klarer ist! Wenn wir Dinge benennen, wird ihr Zweck für die Leser unseres Codes plötzlich viel offensichtlicher.
Vorschau unseres Widgets in Echtzeit
Figma bietet eine großartige Entwicklererfahrung beim Erstellen von Widgets, einschließlich (aber nicht beschränkt auf) Hot-Nachladen. Mit dieser Funktion können wir Änderungen an unserem Widget in Echtzeit codieren und in der Vorschau anzeigen.
Beginnen Sie mit dem Öffnen des Widgets-Menüs (Shift+I), wechseln Sie zur Registerkarte Entwicklung und klicken oder ziehen Sie Ihr neues Widget auf das Board. Sie können Ihr Widget nicht finden? Keine Sorge, klicken Sie einfach auf das Dreipunktmenü und importieren Sie Ihre Widgets manifest.json Datei. Ja, mehr braucht es nicht, um es wieder zum Leben zu erwecken!
Warten Sie, haben Sie unten auf dem Bildschirm eine Fehlermeldung erhalten?
Wenn ja, lassen Sie uns nachforschen. Klicke auf "Konsole öffnen“ und lesen Sie, was es zu sagen hat. Wenn die Konsole öffnen weg ist, gibt es eine alternative Möglichkeit, die Debugging-Konsole zu öffnen. Klicken Sie auf das Figma-Logo, springen Sie zur Widget-Kategorie und öffnen Sie das Entwicklungsmenü.
Dieser Fehler ist wahrscheinlich darauf zurückzuführen, dass wir unser TypeScript noch nicht in JavaScript kompiliert haben. Wir können das in der Befehlszeile tun, indem wir ausführen npm install und npm run watch. (oder yarn und yarn watch ). Diesmal keine Fehler!
Ein weiteres Hindernis, auf das Sie stoßen könnten, ist, dass das Widget bei jeder Änderung des Codes nicht erneut gerendert wird. Wir können unser Widget einfach mit dem folgenden Kontextmenübefehl zur Aktualisierung zwingen: Widgets → Widget neu rendern.
Gestalten des Widgets
Nach derzeitigem Stand ist die Aussehen unserer Widgets sind noch ziemlich weit von unserem endgültigen Ziel entfernt.
Wie stylen wir also Figma-Komponenten aus Code? Vielleicht mit CSS, wie wir es in einem React-Projekt machen würden? Negativ. Mit Figma-Widgets alle das Styling geschieht durch eine Reihe von gut dokumentierte Requisiten. Zum Glück für uns sind diese Gegenstände fast benannt identisch zu ihren Gegenstücken in Figma.
Wir beginnen mit der Konfiguration unserer beiden <AutoLayout /> Komponenten. Wie Sie in der obigen Infografik sehen können, beschreiben Prop-Namen ihren Zweck ziemlich gut. Dies macht es uns leicht, direkt in den Code einzusteigen und einige Änderungen vorzunehmen. Ich werde nicht den gesamten Code noch einmal zeigen, verlassen Sie sich also bitte auf die Komponentennamen, die Sie an die Stelle der Snippets führen.
<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>;Wir haben gerade große Fortschritte gemacht! Lassen Sie uns speichern und zurück zu Figma springen, um zu sehen, wie unser Widget aussieht. Erinnern Sie sich, wie Figma Widgets bei neuen Änderungen automatisch neu lädt?
Aber es ist noch nicht ganz so weit. Wir müssen der Root-Komponente auch eine Hintergrundfarbe hinzufügen:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Werfen Sie noch einmal einen Blick auf Ihr Figma-Board und sehen Sie, wie Änderungen fast sofort wieder in das Widget übernommen werden können.
Lassen Sie uns entlang dieser Anleitung gehen und die gestalten <Text> Komponenten.
Nach einem Blick auf die Widgets-API-Dokumentation, wird erneut deutlich, dass die Eigenschaftsnamen fast identisch mit ihren Gegenstücken in der Figma-App sind, wie in der obigen Infografik zu sehen ist. Wir verwenden auch Werte aus dem letzten Abschnitt, in dem wir die Website von Chris inspiziert haben.
<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>Zustand zum Widget hinzufügen
Unser Widget zeigt derzeit das gleiche Angebot an, aber wir möchten nach dem Zufallsprinzip aus dem gesamten Angebotspool ziehen. Wir müssen hinzufügen Zustand zu unserem Widget, das alle React-Entwickler wissen, ist eine Variable, deren Änderung das erneute Rendern unserer Komponente auslöst.
Mit Figma wird Zustand mit erstellt useSyncedState Haken; es ist ziemlich viel Reagieren useState, aber Programmierer müssen einen eindeutigen Schlüssel angeben. Diese Anforderung ergibt sich aus der Tatsache, dass Figma den Status unseres Widgets synchronisieren muss alle Clients, die möglicherweise dieselbe Designtafel anzeigen, jedoch über unterschiedliche Computer.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Das ist die ganze Veränderung, die wir jetzt brauchen. Im nächsten Abschnitt erfahren Sie, wie Sie Daten aus dem Internet abrufen. Spoiler-Alarm: Es ist nicht so einfach, wie es scheint.
Abrufen von Daten aus dem Netzwerk
Erinnern Sie sich, als Figma uns die Wahl gab, mit einem iFrame-fähigen Widget zu beginnen. Obwohl wir uns nicht für diese Option entschieden haben, müssen wir dennoch einige ihrer Funktionen implementieren. Lassen Sie mich erklären, warum wir nicht einfach anrufen können fetch() in unserem Widget-Code.
Wenn Sie ein Widget verwenden, führen Sie JavaScript-Code auf Ihrem eigenen Computer aus, der von jemand anderem geschrieben wurde. Obwohl alle Widgets von Figma-Mitarbeitern gründlich überprüft werden, ist es immer noch eine riesige Sicherheitslücke, wie wir alle wissen, wie groß sie ist Bereits eine Zeile JavaScript kann Schaden anrichten.
Infolgedessen kann Figma nicht einfach eval() jeder Widget-Code, der von anonymen Programmierern geschrieben wurde. Um es kurz zu machen, das Team entschied, dass die beste Lösung darin bestand, Code von Drittanbietern in einer streng bewachten Sandbox-Umgebung auszuführen. Und wie Sie vielleicht schon erraten haben, sind Browser-APIs in einer solchen Umgebung nicht verfügbar.
Aber keine Sorge, Figmas Lösung für dieses zweite Problem ist <iframe>s. Jeder HTML-Code, den wir in eine Datei schreiben, vorzugsweise namens ui.html, hat Zugriff auf alle Browser-APIs. Sie fragen sich vielleicht, wie wir diesen Code vom Widget aus auslösen können, aber wir werden uns später damit befassen. Lassen Sie uns jetzt zurück in den Code springen:
// 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>Das ist die allgemeine Vorlage für Widget-to-iframe Kommunikation. Verwenden wir es, um Daten vom Server abzurufen:
<!-- 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>Wir lassen die Fehlerbehandlung aus, um dies einfach und auf den Punkt zu bringen. Lassen Sie uns zurück in den Widget-Code springen und sehen, wie wir auf Funktionen zugreifen, die in definiert sind <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()
}
})
}Wie Sie sehen können, sagen wir Figma zuerst, dass sie den Zugang zu unserem Versteck freigeben soll <iframe> und ein Ereignis mit dem Namen auszulösen "networkRequest". Wir behandeln dieses Ereignis im ui.html Datei durch Überprüfen event.data.pluginMessage.type === 'networkRequest', und dann Daten zurück an das Widget zu senden.
Aber es passiert noch nichts… Wir haben immer noch nicht angerufen fetchData() Funktion. Rufen wir es direkt in der Komponentenfunktion auf, kommt in der Konsole folgender Fehler:
Cannot use showUI during widget rendering.Figma sagt uns, wir sollen nicht anrufen showUI direkt im Funktionskörper… Also, wo sollen wir es einfügen? Die Antwort darauf ist ein neuer Haken und eine neue Funktion: useEffect und waitForTask. Vielleicht kennen Sie sich schon aus useEffect wenn Sie ein React-Entwickler sind, aber wir werden es hier verwenden, um Daten vom Server abzurufen, wenn die Widget-Komponente bereitgestellt wird.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Dies führt jedoch zu einem weiteren „Fehler“, bei dem unser Widget für immer mit einem neuen Zitat neu gerendert wird. Dies geschieht, weil useEffect, wird per Definition erneut ausgelöst, wenn sich der Status des Widgets ändert, nein, wenn wir aufrufen fetchData. Und während Es gibt eine Technik nur anzurufen useEffect Einmal in React funktioniert es nicht bei der Implementierung von Figma. Aus Figmas Dokumenten:
Aufgrund der Art und Weise, wie Widgets ausgeführt werden,
useEffectsollte mit mehreren Aufrufen mit demselben Status umgehen können.
Zum Glück gibt es eine einfache Problemumgehung, die wir nutzen und anrufen können useEffect nur einmal, wenn die Komponente zum ersten Mal gemountet wird, und zwar durch Überprüfung, ob die Werte des Status noch leer sind oder nicht:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Sie könnten auf einen gruseligen „Speicherzugriff außerhalb der Grenzen“ Error. Es ist ziemlich häufig in der Plugin- und Widget-Entwicklung zu sehen. Starten Sie Figma einfach neu und es wird nicht mehr da sein.
Sie haben vielleicht bemerkt, dass der Zitattext manchmal seltsame Zeichen enthält.
Diese sind Unicode-Zeichen und wir müssen sie im Code richtig formatieren:
<!-- 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>Und voilà, unser Widget hat jedes Mal, wenn es zum Designboard hinzugefügt wird, ein brandneues Designangebot abgerufen.
Hinzufügen eines Eigenschaftsmenüs zu unserem Widget
Während unser Widget bei der Instanziierung ein neues Angebot abruft, wäre es viel praktischer, wenn wir diesen Vorgang wiederholen könnten, aber ohne ihn zu löschen. Dieser Abschnitt wird kurz sein, da die Lösung ziemlich bemerkenswert ist. Mit Eigenschaftsmenüs, können wir unserem Widget mit einem einzigen Aufruf von Interaktivität hinzufügen usePropertyMenu Haken.
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()
);
}Mit einem einfachen Haken können wir eine Schaltfläche erstellen, die neben unserem Widget erscheint, wenn es ausgewählt wird. Das war das letzte Stück, das wir hinzufügen mussten, um dieses Projekt abzuschließen.
Veröffentlichung unseres Widgets für die Öffentlichkeit
Es hat nicht viel Sinn, ein Widget zu erstellen, wenn, nun ja, niemand verwendet es. Und während Figma gewährt Organisationen die Option zum Start privat widgets Für den internen Gebrauch ist es viel üblicher, diese kleinen Programme für die Welt freizugeben.
Figma hat einen heiklen Überprüfungsprozess für Widgets, der 5 bis 10 Werktage dauern kann. Und während das Design-Zitate-Widget, das wir zusammen gebaut haben, ist bereits in der Widget-Bibliothek, ich werde noch demonstrieren, wie es dazu kam. Bitte versuchen Sie nicht, dieses Widget erneut zu veröffentlichen, da dies nur zur Entfernung führt. Aber wenn Sie einige bedeutende Änderungen vorgenommen haben, machen Sie weiter und teilen Sie Ihr eigenes Widget mit der Community!
Klicken Sie zunächst auf das Widgets-Menü (Shift+I) und Umschalten auf die Entwicklung Registerkarte, um unser Widget anzuzeigen. Klicken Sie auf das Drei-Punkte-Menü und drücken Sie Veröffentlichen.
Figma fordert Sie auf, einige Details zu Ihrem Widget einzugeben, z. B. einen Titel, eine Beschreibung und einige Tags. Wir benötigen außerdem ein Symbolbild im Format 128 × 128 und ein Bannerbild im Format 1920 × 960.
Nach dem Import all dieser Assets benötigen wir noch einen Screenshot unseres Widgets. Schließen Sie das Veröffentlichungsmodul (keine Sorge, Sie verlieren Ihre Daten nicht) und klicken Sie mit der rechten Maustaste auf das Widget, um ein interessantes Kontextmenü anzuzeigen. Finden Sie die Kopieren/Einfügen alsKategorie und wählen Sie Als PNG kopieren.
Kehren wir danach zum Veröffentlichungsmodus zurück und fügen den Screenshot des Widgets ein:
Scrollen Sie nach unten und veröffentlichen Sie schließlich Ihr Modal. Zelebrieren! 🎉
Figma wird Sie in ein paar Tagen über den Status Ihrer Modalüberprüfung informieren. Im Falle einer Ablehnung erhalten Sie die Möglichkeit, Änderungen vorzunehmen und erneut einzureichen.
Zusammenfassung
Wir haben gerade ein Figma-Widget von Grund auf neu erstellt! Es gibt viele Dinge, die hier nicht behandelt werden, wie z Klicken Sie auf Ereignisse, Eingabeformulare und viel mehr. Sie können den vollständigen Quellcode für das Widget in einsehen dieses GitHub Repo.
Denjenigen, die danach streben, ihre Figma-Fähigkeiten auf ein höheres Niveau zu bringen, schlage ich vor, die Widgets-Community zu erkunden und sich von dem zu inspirieren, was Ihnen ins Auge fällt. Bauen Sie weitere Widgets, verbessern Sie Ihre React-Fähigkeiten, und bevor Sie es überhaupt merken, werden Sie mir beibringen, wie man das alles macht.
Weitere Ressourcen
Ich musste auf viele Dokumentationen zurückgreifen, während ich dieses Widget erstellte. Ich dachte, ich würde teilen, was ich fand, um am meisten zu helfen.
