Interaktive Figma-Widgets erstellen

Figma hat schon immer die Zusammenarbeit zwischen Entwicklern und Designern gefördert. Es lebt von einem unendlichen Schatz an von der Community erstellten Plugins. Benötigen Sie 3D-Elemente? Dafür gibt es ein Plugin. Benötigen Sie abstrakte SVGs? Dafür gibt es auch ein Plugin.

Das Design von Figma war schon immer relativ statisch – man arbeitete mit unbeweglichen Rechtecken, die durch vordefinierte Benutzerinteraktionen miteinander verbunden waren. Aber was wäre, wenn Ihre Designs plötzlich lebendig würden – animiert, interaktiv und sogar zustandsbehaftet? Was würde dann das Konzept von der Umsetzung trennen?

Figma kündigte im Juni an, dass JavaScript-gestützte Widgets eingeführt werden. Jetzt können Designer logikgesteuerte Komponenten direkt in Figma durchsuchen und implementieren!

Begrüßen Sie die Widgets API! Möchten Sie wissen, was sie ist und wie man sie 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 Gestaltung einer großen Restaurantanwendung. Sie arbeiten bereits gemeinsam an demselben Figma-Board; Sie beide teilen sich dasselbe Dokument, wobei Änderungen im Handumdrehen erfolgen.

Sicherlich wissen Sie bereits, dass Zusammenarbeit mehr als nur den Designprozess umfasst

• Projektmanagement,
• Abstimmungen durchführen, um Stimmen zu sammeln,
• Mock-Daten importieren und visualisieren,
• und vielleicht sogar ein Multiplayer-Spiel spielen, um sich nach vielen Arbeitsstunden abzukühlen.

Wir brauchen nur eine Person, die alles verwaltet und Links an andere Gruppenmitglieder sendet. Aber oh, das ist nicht sehr effizient, oder?

Nun, da kommen Widgets ins Spiel. Wir können all das tun – ja, alles – ohne Figma jemals zu verlassen.

Hier sind nur einige der Möglichkeiten, wie Sie Widgets in Figma verwenden könnten

• Aufgaben für Jira und Asana erstellen
• Probleme in GitHub erstellen
• Dynamische Daten anzeigen
• Sprachnotizen aufnehmen
• Aufgabenlisten erstellen
• Zeit verschwenden Tic-Tac-Toe spielen
• Aktivitäten verfolgen
• Timer erstellen

Die Liste geht weiter und weiter. Wie Sie sehen können, gibt es bereits eine Fülle von Widgets, die Sie frei in Ihren Dokumenten verwenden können. Tatsächlich können Sie Widgets direkt von Ihrem Board aus dem Widgets-Menü (Umschalt+I) hinzufügen.

Aber wir sind nicht hier, um zu lernen, wie man Widgets benutzt, denn das ist einfach. Lassen Sie uns tun, was wir am besten können: Wir erstellen unser eigenes Figma-Widget! Dieses wird von Chris Coyiers Website für Designzitate inspiriert sein. Wir nehmen die API, füttern sie in das Widget und zeigen dann zufällige Designzitate direkt in Figma an.

Was wir brauchen

Ich möchte keine schlechten Nachrichten überbringen, aber um Widgets zu entwickeln, müssen Sie Windows oder Mac verwenden. Linux-Benutzer, es tut mir leid, aber Sie haben Pech. (Sie könnten immer noch eine VM verwenden, wenn Sie mitmachen möchten.)

Wir werden die Figma Desktop-Anwendung herunterladen. Der einfachste Weg, loszulegen, ist die Erstellung einer Widget-Vorlage direkt aus der App.

Erstellen wir ein neues Board, indem wir das Widget-Menü (Umschalt+I) öffnen, zum Tab Entwicklung wechseln und ein neues Element erstellen.

Danach fordert Figma Sie auf, das neue Widget zu benennen und zu entscheiden, ob es besser für Design-Boards oder FigJam-Boards geeignet ist. 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) bietet. Wir wählen die einfache "Leere" Option, werden sie aber später modifizieren, um die Fetch-API zu nutzen.

Sie werden dann aufgefordert, Ihr neues Widget-Projekt in einem speziellen Verzeichnis auf Ihrem System zu speichern. Sobald dies geschehen ist, starten Sie Ihr Terminal und navigieren Sie zu diesem Ordner. Führen Sie noch keine Befehle aus – das werden wir später tun und absichtlich einen Fehler bekommen, um mehr über die Widgets API zu erfahren.

Gestaltung des Widgets

Wir ziehen das Design direkt von Chris Coyiers Website für Designzitate. Gehen wir also dorthin und tauchen wir ein, indem wir DevTools starten.

Die beiden wichtigsten Tastenkombinationen, die ich hier verwende, sind Strg+Umschalt+C (oder Cmd+Umschalt+C), um das Werkzeug "Element auswählen" zu aktivieren, und Umschalt+Klick, um das Farbmodus auf HEX-Code zu ändern. Wir tun dies, um etwas über die Farben, Schriftarten, Schriftstärken und Schriftgrößen zu erfahren, die auf Chris' Website verwendet werden. All diese Informationen sind entscheidend, um ein eng ähnliches Widget in Figma zu erstellen, was unser nächster Schritt sein wird! Sie können die entworfene Komponente herunterladen und sie in Ihrem eigenen Canvas verwenden.

Ich werde hier nicht ins Detail gehen, da das Hauptthema dieses Artikels die Erstellung von Widgets durch Code ist. Aber ich kann nicht genug betonen, wie wichtig es ist, sich gut um den Stil Ihrer Widgets zu kümmern… CSS-Tricks hat bereits eine Fülle von designorientierten Figma-Tutorials; Sie werden es nicht bereuen, sie zu Ihrer Leseliste hinzuzufügen.

Erstellung des Layouts für unser Widget

Nachdem das Design erledigt ist, ist es an der Zeit, unsere Programmierfinger auszustrecken und mit dem Bau der Zahnräder unseres Widgets zu beginnen.

Es ist sehr interessant, wie Figma seine Designbausteine ​​in React-ähnliche Komponenten übersetzt. Frame-Elemente mit der Auto-Layout-Funktion werden beispielsweise als die Komponente <AutoLayout /> im Code dargestellt. Zusätzlich werden wir noch zwei weitere Komponenten verwenden: <Text /> und <SVG />.

Schauen Sie sich mein Figma-Board an… Ich bitte Sie, sich genau auf die Objektstruktur zu konzentrieren. Dies ist, was wir brauchen, um unser Widget-Design in JSX-Code zu übersetzen.

Wie Sie sehen können, erfordert unser Design-Zitat-Widget den Import von drei Komponenten. Das ist eine ordentliche Anzahl von Komponenten, wenn man bedenkt, dass die vollständige API nur acht schichtbasierte Knoten enthält. Aber wie Sie bald sehen werden, reichen diese Module aus, 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 erstellen, so 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 Design-Layer nicht auseinanderhalten. Glücklicherweise können wir dieses Problem leicht durch die Verwendung der name-Eigenschaft lösen.

<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 arbeiten wir daran, das zu beheben. Die Komponente <SVG/> akzeptiert eine src-Eigenschaft, die den Quellcode für ein SVG-Element aufnimmt. Dazu gibt es nicht viel zu sagen, also halten wir es einfach und springen direkt zurück zum Code

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 können uns alle einig sein, dass alles jetzt viel klarer ist! Wenn wir Dingen Namen geben, wird ihr Zweck für die Leser unseres Codes plötzlich viel offensichtlicher.

Vorschau unseres Widgets in Echtzeit

Figma bietet eine hervorragende Entwicklererfahrung beim Erstellen von Widgets, einschließlich (aber nicht beschränkt auf) Hot-Reloading. Mit dieser Funktion können wir Änderungen an unserem Widget in Echtzeit codieren und in der Vorschau anzeigen.

Öffnen Sie das Widget-Menü (Umschalt+I), wechseln Sie zum Entwicklungs-Tab 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 Drei-Punkte-Menü und importieren Sie die manifest.json-Datei Ihres Widgets. Ja, das ist alles, was nötig ist, um es wieder zum Leben zu erwecken!

Moment, haben Sie eine Fehlermeldung am unteren Bildschirmrand erhalten?

Wenn ja, untersuchen wir das. Klicken Sie auf "Konsole öffnen" und lesen Sie, was dort steht. Wenn die Schaltfläche Konsole öffnen verschwunden ist, gibt es eine alternative Möglichkeit, die Debugging-Konsole zu öffnen. Klicken Sie auf das Figma-Logo, gehen Sie zur Kategorie Widgets und öffnen Sie das Entwicklermenü.

Dieser Fehler ist wahrscheinlich darauf zurückzuführen, dass wir unser TypeScript noch nicht zu JavaScript kompiliert haben. Das können wir in der Befehlszeile tun, indem wir npm install und npm run watch ausführen. (oder yarn und yarn watch). Keine Fehler diesmal!

Ein weiteres Hindernis, auf das Sie stoßen könnten, ist, dass das Widget bei jeder Codeänderung nicht neu gerendert wird. Wir können unser Widget mit dem folgenden Kontextmenübefehl erzwingen: Widgets → Widget neu rendern.

Styling des Widgets

Wie es derzeit aussieht, sind die Looks unserer Widgets noch weit von unserem Endziel entfernt.

Wie stylen wir also Figma-Komponenten aus Code? Vielleicht mit CSS, wie wir es in einem React-Projekt tun würden? Nein. Bei Figma-Widgets findet das gesamte Styling über einen Satz gut dokumentierter Props statt. Glücklicherweise sind diese Elemente fast identisch benannt wie ihre Gegenstücke in Figma.

Wir beginnen mit der Konfiguration unserer beiden <AutoLayout />-Komponenten. Wie Sie in der obigen Infografik sehen können, sind die Prop-Namen ziemlich beschreibend für ihren Zweck. Das macht es uns leicht, direkt in den Code einzusteigen und einige Änderungen vorzunehmen. Ich werde nicht den gesamten Code noch einmal zeigen, also verlassen Sie sich bitte auf die Komponentennamen, um Sie zu führen, wo die Snippets hingehören.

<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! Speichern wir und springen wir zurück zu Figma, um zu sehen, wie unser Widget aussieht. Erinnern Sie sich, wie Figma Widgets nach neuen Änderungen automatisch neu lädt?

Aber es ist noch nicht ganz perfekt. Wir müssen dem Root-Element auch eine Hintergrundfarbe hinzufügen

<AutoLayout name={"Quote"} fill={"#ffffff"}>

Schauen Sie wieder auf Ihr Figma-Board und bemerken Sie, wie sich Änderungen fast sofort im Widget widerspiegeln können.

Lassen Sie uns diese Anleitung weiterverfolgen und die <Text>-Komponenten stylen.

Nachdem wir uns die Widget-API-Dokumentation angesehen haben, ist wieder klar, dass die Eigenschaftsnamen fast identisch mit denen in der Figma-App sind, wie in der obigen Infografik zu sehen ist. Wir werden auch Werte aus dem letzten Abschnitt verwenden, in dem wir Chris' Website 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>

Hinzufügen von Zustand zum Widget

Unser Widget zeigt derzeit dasselbe Zitat an, aber wir möchten aus dem gesamten Pool von Zitaten zufällig auswählen. Wir müssen unserem Widget State hinzufügen, was allen React-Entwicklern bekannt ist, dass es sich um eine Variable handelt, deren Änderung das erneute Rendern unserer Komponente auslöst.

Mit Figma wird der Zustand mit dem Hook useSyncedState erstellt; er ist so ziemlich Reacts useState, erfordert aber, dass Programmierer einen eindeutigen Schlüssel angeben. Diese Anforderung ergibt sich aus der Tatsache, dass Figma den Zustand unseres Widgets über alle Clients synchronisieren muss, die dasselbe Design-Board über verschiedene Computer hinweg betrachten könnten.

const { useSyncedState } = widget;

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

Das ist alles, was wir vorerst ändern müssen. Im nächsten Abschnitt werden wir herausfinden, wie man Daten aus dem Internet abruft. Spoiler-Alarm: Es ist nicht so einfach, wie es scheint.

Daten aus dem Netzwerk abrufen

Erinnern Sie sich, als Figma uns die Wahl gab, mit einem iFrame-fähigen Widget zu beginnen? Obwohl wir diese Option nicht gewählt haben, müssen wir immer noch einige ihrer Funktionen implementieren. Lassen Sie mich erklären, warum wir fetch() nicht einfach in unserem Widget-Code aufrufen können.

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 den Figma-Mitarbeitern gründlich geprüft werden, ist dies immer noch ein großes Sicherheitsrisiko, da wir alle wissen, wie viel Schaden selbst eine Zeile JavaScript anrichten kann.

Daher kann Figma nicht einfach beliebigen Widget-Code von anonymen Programmierern eval(). Lang gesagt, das Team entschied, dass die beste Lösung darin bestand, Code von Drittanbietern in einer eng bewachten Sandbox-Umgebung auszuführen. Und wie Sie vielleicht erraten haben, sind Browser-APIs in einer solchen Umgebung nicht verfügbar.

Aber verzweifeln Sie nicht, Figmas Lösung für dieses zweite Problem sind <iframe>s. Jeder HTML-Code, den wir in einer Datei schreiben, die vorzugsweise ui.html genannt wird, hat Zugriff auf alle Browser-APIs. Sie fragen sich vielleicht, wie wir diesen Code vom Widget aus auslösen können, aber das sehen wir uns später an. Jetzt springen wir zurück zum Code

// 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 die Widget-zu-iframe-Kommunikation. Lassen Sie uns sie verwenden, 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 weg, um dies einfach und auf den Punkt zu halten. Lassen Sie uns zurück zum Widget-Code springen und sehen, wie wir auf in <iframe> definierten Funktionen zugreifen

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, weisen wir Figma zuerst an, den Zugriff auf unser verstecktes <iframe> offenzulegen und ein Ereignis mit dem Namen "networkRequest" auszulösen. Wir verarbeiten dieses Ereignis in der ui.html-Datei, indem wir überprüfen, ob event.data.pluginMessage.type === 'networkRequest', und senden dann Daten zurück an das Widget.

Aber es passiert noch nichts… Wir haben die fetchData()-Funktion noch nicht aufgerufen. Wenn wir sie direkt in der Komponentfunktion aufrufen, tritt der folgende Fehler in der Konsole auf

Cannot use showUI during widget rendering.

Figma sagt uns, wir sollen showUI nicht direkt im Funktionskörper aufrufen… Wo sollen wir es also platzieren? Die Antwort darauf sind ein neuer Hook und eine neue Funktion: useEffect und waitForTask. Sie sind möglicherweise bereits mit useEffect vertraut, wenn Sie React-Entwickler sind, aber wir werden es hier verwenden, um Daten vom Server abzurufen, wenn die Widget-Komponente gemountet wird.

const { useEffect, waitForTask } = widget;

function QuotesWidget() {
  useEffect(() => {
    waitForTask(fetchData());
  });
}

Dies führt jedoch zu einem weiteren "Fehler", bei dem unser Widget mit einem neuen Zitat endlos neu gerendert wird. Dies geschieht, weil useEffect per Definition erneut ausgelöst wird, wenn sich der Zustand des Widgets ändert, geschweige denn, wenn wir fetchData aufrufen. Und während es eine Technik gibt, useEffect nur einmal in React aufzurufen, funktioniert sie nicht mit Figmas Implementierung. Laut Figma-Dokumentation

Aufgrund der Funktionsweise von Widgets sollte useEffect mehrmals mit demselben Zustand aufgerufen werden.

Glücklicherweise gibt es einen einfachen Workaround, den wir nutzen können, um useEffect nur einmal beim ersten Mounten der Komponente aufzurufen, und das, indem wir prüfen, ob die Zustandswerte noch leer sind.

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

Sie könnten auf einen beängstigenden Fehler "Speicherzugriffsverletzung" stoßen. Es ist ziemlich üblich, dies in der Plugin- und Widget-Entwicklung zu sehen. Starten Sie einfach Figma neu und der Fehler wird nicht mehr vorhanden sein.

Sie haben vielleicht bemerkt, dass der Zitattext manchmal seltsame Zeichen enthält.

Das 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[^>]*>([\\\\S\\\\s]*?)<\\\\/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 Design-Board hinzugefügt wird, ein brandneues Design-Zitat abgerufen.

Hinzufügen eines Eigenschaftsmenüs zu unserem Widget

Obwohl unser Widget beim Instanziieren ein frisches Zitat abruft, wäre es viel praktischer, wenn wir diesen Vorgang erneut durchführen könnten, aber ohne es zu löschen. Dieser Abschnitt wird kurz sein, da die Lösung recht bemerkenswert ist. Mit Eigenschaftsmenüs können wir unserem Widget Interaktivität mit einem einzigen Aufruf des Hooks usePropertyMenu hinzufügen.

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 Hook können wir einen Button erstellen, der in der Nähe unseres Widgets erscheint, wenn es ausgewählt ist. Das war der letzte Schritt, den wir hinzufügen mussten, um dieses Projekt abzuschließen.

Veröffentlichung unseres Widgets für die Öffentlichkeit

Es ist nicht viel Sinn, ein Widget zu bauen, wenn es niemand benutzt. Und während Figma Organisationen die Option gibt, private Widgets für den internen Gebrauch zu veröffentlichen, ist es viel üblicher, diese kleinen Programme in die Welt zu entlassen.

Figma hat einen sorgfältigen Widget-Überprüfungsprozess, der 5 bis 10 Werktage dauern kann. Und obwohl das Design-Zitat-Widget, das wir gemeinsam gebaut haben, bereits in der Widget-Bibliothek vorhanden ist, werde ich immer noch demonstrieren, wie es dorthin gelangt ist. Bitte versuchen Sie nicht, dieses Widget erneut zu veröffentlichen, da dies nur zur Entfernung führt. Aber wenn Sie es signifikant verändert haben, teilen Sie Ihr eigenes Widget mit der Community!

Klicken Sie im Widget-Menü (Umschalt+I) auf den Tab Entwicklung, um unser Widget anzuzeigen. Klicken Sie auf das Drei-Punkte-Menü und drücken Sie auf Veröffentlichen.

Figma wird Sie auffordern, einige Details zu Ihrem Widget einzugeben, wie Titel, Beschreibung und einige Tags. Wir benötigen auch ein 128x128 Pixel großes Symbolbild und ein 1920x960 Pixel großes Bannerbild.

Nachdem wir all diese Assets importiert haben, benötigen wir immer noch einen Screenshot unseres Widgets. Schließen Sie das Veröffentlichungsmodal (keine Sorge, Sie verlieren Ihre Daten nicht) und klicken Sie mit der rechten Maustaste auf das Widget, um ein interessantes Kontextmenü zu öffnen. Suchen Sie die Kategorie Kopieren/Einfügen als und wählen Sie Als PNG kopieren.

Nachdem dies geschehen ist, kehren wir zum Veröffentlichungsmodal zurück und fügen den Screenshot des Widgets ein.

Scrollen Sie nach unten und veröffentlichen Sie schließlich Ihr Modal. Feiern Sie! 🎉

Figma wird sich in ein paar Tagen bei Ihnen melden, um Sie über den Status der Überprüfung Ihres Modals zu informieren. Im Falle einer Ablehnung erhalten Sie die Gelegenheit, Änderungen vorzunehmen und erneut einzureichen.

Fazit

Wir haben gerade ein Figma-Widget von Grund auf neu erstellt! Es gibt viele Dinge, die hier nicht behandelt werden, wie z. B. Klick-Ereignisse, Eingabeformulare und vieles mehr. Den vollständigen Quellcode des Widgets finden Sie in diesem GitHub-Repo.

An diejenigen, die ihre Figma-Kenntnisse auf ein höheres Niveau bringen wollen, empfehle ich, die Widget-Community zu erkunden und sich von dem inspirieren zu lassen, was Ihnen ins Auge fällt. Bauen Sie weiterhin Widgets, schärfen Sie Ihre React-Kenntnisse, und bevor Sie es wissen, werden Sie mir beibringen, wie man all das macht.

Weitere Ressourcen

Ich musste viele Dokumentationen konsultieren, als ich dieses Widget erstellte. Ich dachte, ich würde Ihnen mitteilen, was mir am meisten geholfen hat.

Mehr Widgets bauen

• Best Practices für die Entwicklung von Widgets
• Offizielle Figma Widget-Beispiele mit Code

Widgets im Detail lernen

• Alle Widget-Hooks
• Alle Widget-Komponenten
• Wie Widgets hinter den Kulissen laufen

Widgets vs. Plugins

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