Brook and a co-host walk through a new Figma plugin that lets you build HubSpot UI extensions using HubSpot's design components. The plugin turns Figma designs into working UI cards without needing to code.
Hallo zusammen, hier ist Brook von HubSpot. Heute zeige ich euch, wie ihr mit unserem neuen Figma Plugin im Handumdrehen UI Erweiterungen erstellen könnt. Dieses Plugin verwendet die Komponenten aus dem Figma Design Kit. Ihr müsst also sicherstellen, dass ihr eine Kopie davon habt und dann könnt ihr es ausführen. Lasst uns gleich mal sehen, wie dieses Plugin funktioniert. In Figma klickt ihr unten auf diese Schaltfläche, die Aktionsschaltfläche.
Dann klickt ihr auf die Plugins und Widgets und sucht nach dem HubSpot Developers Plugin. Wenn ihr darauf klickt, wird es so angezeigt.
Es werden einige Informationen zur Verwendung angezeigt. Am besten verwendet ihr es, indem ihr einen Frame auswählt, der sich bereits auf eurer Seite befindet.
Ich habe hier also etwas, das wie eine Seite in HubSpot aussieht.
Und hier in den Ebenen wähle ich diesen Frame aus. Und jetzt wird meine Karte in diesem Frame erstellt.
Geben wir dieser Karte nun einen Namen. Ich sage meine App Karte. Anschließend können Sie aus unserer Liste verfügbarer Komponenten auswählen.
Hier können Sie angeben, wie oft Sie diese Komponente benötigen. Fügen wir nun ein Balkendiagramm hinzu, kein gestapeltes Diagramm. Wir fügen eine Trennlinie hinzu.
Falls mehr Platz nötig ist.
Fügen wir eine Überschrift und einen Link hinzu. In diesen ausgewählten Komponenten können Sie Ihre Komponenten nun per Drag Drop verschieben, sodass sie in der gewünschten Reihenfolge auf Ihrer Karte angezeigt werden. Sie werden immer von oben nach unten angezeigt. Oben haben wir also die Überschrift und dann das Balkendiagramm. Wir haben die Trennlinie und unten den Link. Falls Sie eine Komponente löschen möchten, klicken.
Sie einfach auf die Schaltfläche X, um sie zu löschen.
Jetzt müssen Sie nur noch auf UIE Karte erstellen klicken und schon haben Sie eine UI Karte. Nun gibt es ein paar Dinge, die noch etwas verfeinert werden müssen.
Ihr könnt mit diesen Elementen also einfach.
So herumspielen, als würdet ihr das Ganze von Grund auf in Figma erstellen. Dies verschafft euch jedoch einen guten Ausgangspunkt, so dass ihr das Ganze nicht von Grund auf neu erstellen müsst. Lasst mich wissen, was ihr davon haltet und wir sehen uns alle in einem anderen Video. Tschüss zusammen. Tschüss.
