Vor dem Start
Wer kann diese Funktion verwenden?
Figma Make ist für Full-Lizenzen in kostenpflichtigen Abos verfügbar.
Du kannst Figma Make mit anderen Lizenzen und Abos ausprobieren.
Um funktionale Prototypen und Web-Apps zu erstellen, die konsistent aussehen und sich auch so anfühlen, kannst du Stilkontext aus einer vorhandenen Figma-Bibliothek in Figma Make importieren. Wenn du das machst, extrahiert Figma Make das CSS für das Styling aus dieser Bibliothek.
Es gibt zwei Schritte, um den Stilkontext aus einer Bibliothek in Figma Make zu übertragen:
- Eine Bibliothek aus Figma Design exportieren.
- Wähle die Bibliothek in einer Datei von Figma Make aus. Du kannst deine Datei von Figma Make dann weiter anpassen, indem du die exportierten Stile bearbeitest und Richtlinien hinzufügst, um die Verwendung der extrahierten Stile in Figma Make zu fokussieren.
Schritt 1: Exportiere eine Figma-Designbibliothek, die du als Stilkontext in Figma Make verwenden möchtest
Vor dem Start
Wer kann diese Funktion verwenden?
Verfügbar für alle kostenpflichtigen Abos
Erfordert eine Full-Lizenz mit Bearbeitungszugriff auf die Quelldatei der Bibliothek
Wähle in Figma Design eine Bibliothek aus, die als Stilkontext für deine Dateien von Figma Make verwendet werden soll. Nur Personen mit Zugriff bearbeiten auf die Bibliothek können sie nach Figma Make exportieren. Dieser Schritt muss nur einmal ausgeführt werden, bevor du und andere es in Figma Make verwenden könnt.
- In der Figma Design-Datei, die die Bibliothek enthält, die du für Figma Make exportieren möchtest, wähle den Tab „Assets“ in der linken Seitenleiste aus.
- Klicke auf Bibliotheken.
- Im Abschnitt „Diese Datei“ findest du deine aktuelle Datei und klickst auf „veröffentlichen“, um das Veröffentlichungsmodal der Bibliothek zu öffnen.
- Falls du die Bibliotheken noch nicht für ein Team, einen Workspace oder eine Organisation veröffentlicht hast, klicke unten im Modal auf „veröffentlichen“. Nur veröffentlichte Bibliotheken können nach Figma Make exportiert werden. Dieser Vorgang kann einige Minuten dauern.
-
Klicke auf exportieren für Make.
Der Exportieren-Vorgang kann ein paar Minuten dauern, bis er abgeschlossen ist. Während dieses Prozesses stellt Figma eine CSS-Datei zusammen und exportiert sie, um sie als Referenz in Figma Make zu verwenden.
- Sobald der Exportvorgang abgeschlossen ist, klicke auf Gehe zu Figma Make.
Nachdem du deine Bibliotheken extrahiert und in deiner Datei von Figma Make ausgewählt hast, gehst du zur Codeansicht. Öffne von dort aus den Ordner Stil und klicke auf globals.css, um die generierten Stile zu erkunden. Normalerweise werden Stile in vier Kategorien eingeteilt:
- Farbpaletten
- Typografie (Schriftart und Hierarchie)
- Variablen
- Ränder und Eckenradius
Beachte, dass das extrahierte CSS eine vereinfachte Version deiner vollständigen Bibliothek ist. Es wird nicht jedes Designdetail erfassen. Um Konsistenz und Klarheit zu gewährleisten, empfehlen wir, mehr Kontext und Regeln in deiner guidelines.md -Datei hinzuzufügen.
Figma Make unterstützt derzeit nicht die vollständige Extraktion von Design-Tokens. Stattdessen zieht es eine Teilmenge deiner Variablen und verwendet sie, um eine globale CSS-Datei mit Rohwerten zu generieren. Dies bedeutet, dass die Variablensyntax nicht genau wie definiert beibehalten wird. Statt einer 1:1-Zuordnung erhältst du eine vereinfachte Ansicht deiner Variablen, die in einer einzigen .css -Datei angezeigt werden. speichern. Dies hilft sicherzustellen, dass der generierte Code mit deinen grundlegenden Stilen übereinstimmt.
Wenn du zusätzliche Regeln oder Parameter für Variablen hast – insbesondere solche, die sich auf Zustände beziehen – empfehlen wir, diese in deiner guidelines.md -Datei zu dokumentieren, um die Konsistenz in deinem System zu wahren.
Du kannst jeweils nur eine Bibliothek verwenden. Wenn eure Organization ihr Designsystem über mehrere Bibliotheken hinweg verwaltet, empfiehlt es sich, die Bibliothek auszuwählen, die eure Kernkomponenten und die grundlegendsten Stile enthält. Obwohl beim Exportieren nach Figma Make keine Komponenten selbst extrahiert werden, verweist diese Bibliothek wahrscheinlich auf Farben und Typografie, die als Kontext in ihren Eigenschaften verwendet werden.
Nein, du musst die Bibliothek nur einmal nach Figma Make exportieren. Jeder in deiner Organisation, der Lesezugriff auf diese Bibliothek hat, kann sie auch in seinen Dateien von Figma Make nutzen.
Ja. Wenn jemand eine Designbibliothek bearbeitet und die aktualisierte Version in Figma Make verwenden möchte, musst du die Bibliothek erneut exportieren. Die re-exportierte Bibliothek wird in Figma Make nur für zukünftige Dateien von Figma Make aktualisiert und aktualisiert keine Dateien von Figma Make, die vor dem Update generiert wurden, rückwirkend.
Schritt 2: Eine Bibliothek in einer Figma Make-Datei referenzieren
Mit dem Stilkontext deiner Bibliotheken, der zu Figma Make hinzugefügt wurde, kannst du und andere Personen in deinem Team oder deiner Organisation ihn verwenden, um gestaltete funktionale Prototypen und Web-Apps zu erstellen. Jeder im Team oder in der Organisation mit can view Lesezugriff auf die Bibliotheken kann diese Bibliothek in seiner Datei von Figma Make sehen und nutzen.
- Klicke in einer Datei von Figma Make auf Wähle eine Bibliothek aus.
- Wähle aus, welche Bibliothek du verwenden möchtest.
Beginne sofort mit der Eingabe oder passe an, wie Figma Make die Stile deiner Bibliothek verwendet, indem du die Stile der Bibliothek bearbeitest oder Richtlinien hinzufügst. Sobald du eine Bibliothek auswählst und mit der Eingabe beginnst, wird der gesamte generierte Inhalt in dieser Datei auf diese Stile verweisen.
**Tipp:** Wenn du auf eine Figma-Designbibliothek verweist, erhältst du in Figma Make einen Stilkontext, den du beim Ausprobieren von Ideen und beim Erstellen von funktionalen Prototypen und Web-Apps nutzen kannst. Um noch spezifischer zu werden, versuche es mit:
Stile einer Bibliothek bearbeiten
Wenn eine Figma Design-Bibliothek nach Figma Make exportiert wird, wird automatisch eine CSS-Datei mit den Eigenschaften der Bibliothek erstellt. Du kannst das CSS anpassen, um dein Figma Make nach Bedarf zu formen. Änderungen am CSS wirken sich nur auf diese Datei von Figma Make aus.
- Klicke auf .
- Wähle „Stile bearbeiten“, um die CSS-Eigenschaften dieser Bibliothek zu aktualisieren.
Richtlinien zum Generieren hinzufügen
Richtlinien ermöglichen es dir, Figma Make Regeln oder Anweisungen für die Verwendung des Stilkontextes zu geben. Die Richtlinien gelten nur für Sachen, die du in dieser Datei machst, und haben keinen Einfluss auf andere Dateien, die auf diese Bibliothek oder die Bibliothek selbst verweisen.
- Klicke auf .
- Wähle „Richtlinien bearbeiten“, um Richtlinien für diese Datei von Figma Make hinzuzufügen.
Die Datei guidelines.md ist eine Textdatei, in die du alle Richtlinien schreiben kannst, die Figma Make beachten soll.
Tipp: Die Datei guidelines.md kann mit oder ohne ausgewählte Bibliotheken verwendet werden, sodass du beliebige Dateien von Figma Make nach Bedarf gestalten kannst.
Wenn jemand zuvor Lesezugriff auf eine Bibliothek hatte, der Zugriff aber widerrufen wurde, kann er diese Bibliothek in Figma Make nicht mehr sehen oder verwenden. Alle früheren Dateien von Figma Make, die ihr möglicherweise mit dieser Bibliothek erstellt habt, stehen euch jedoch weiterhin zur Verfügung, und der Name der Bibliothek wird als „Unbekannt“ erscheinen.
Nein. Aktualisierungen der CSS-Stile oder -Richtlinien wirken sich nur auf diese Datei von Figma Make aus.
Häufig gestellte Fragen
Nein, eine Figma Design-Bibliothek kann derzeit nicht entfernt werden, nachdem sie für Prompts in Figma Make verwendet wurde.
Sobald du mit dem Generieren unter Verwendung einer Bibliothek begonnen hast, kann diese nicht mehr entfernt werden. Um eine andere Bibliothek zu verwenden oder eine bestimmte Bibliothek nicht mehr zu verwenden, erstelle eine neue Datei von Figma Make und beginne mit der Generierung.