In den letzten Jahren hat Figma schnell an Popularität gewonnen, und das ist kein Wunder. Die kostenlose Cloud-basierte Software ist auf allen Geräten leicht zugänglich und erfordert keine Ratenzahlungen oder Downloads. Von der Gestaltung mobiler App-Oberflächen bis hin zur Erstellung von Social-Media-Beiträgen können Sie mit Figma mit allen möglichen Grafikdesignfunktionen experimentieren und Ihre Fähigkeiten erweitern.
Für noch mehr Konsistenz in Ihren Entwürfen sollten Sie die Verwendung von Komponenten in Ihrer Arbeit in Betracht ziehen. Komponenten sind Elemente der Benutzeroberfläche (UI), die in Figma über mehrere Dateien hinweg verwendet werden können. Diese können oft eine starke Ergänzung zu Ihren Designs sein und deren Gesamtqualität verbessern.
Egal, ob Sie neu bei Figma sind oder es schon eine Weile verwenden und sich nicht sicher sind, wie Sie Komponenten erfolgreich verwenden, wir sind hier, um Ihnen zu helfen.
In diesem Artikel werden wir untersuchen, wie Sie Figma-Komponenten verwenden und wie dies Ihnen helfen kann, Ihre Arbeit zu verbessern.
Wenn Sie daran interessiert sind, mehr zu erfahren, dann lesen Sie weiter.
So verwenden Sie Komponenten in Figma
Die Beherrschung der Verwendung von Komponenten kann Ihnen bei der Organisation und Konsistenz beim Betrieb von Figma helfen. Diese UI-Elemente können in verschiedenen Designprojekten, an denen Sie möglicherweise arbeiten, immer wieder verwendet werden. Eine Komponente kann je nach Projekt in einem Symbol, einer Schaltfläche und mehr erstellt werden.
Das Tolle an der Einführung von Komponenten in Ihr Figma-Erlebnis ist, dass Sie viel Zeit sparen. Alle Änderungen, die Sie an einer Komponente vornehmen, werden automatisch für die anderen aktualisiert. Dies kann besonders nützlich sein, wenn Sie einen engen Zeitrahmen haben oder mit anderen Designern zusammenarbeiten und Ihren Arbeitsablauf beschleunigen möchten.
Zu Beginn werden Sie feststellen, dass sich auf jeder Seite der Hauptleinwand, die Sie verwenden, zwei Seitenleisten befinden. Sie können Werkzeuge aus jeder dieser Seitenleisten verwenden, um Änderungen an Ihrem Projekt vorzunehmen.
Über die Seitenleiste auf der rechten Seite haben Sie Zugriff auf alle Prototypeinstellungen und können beliebige Eigenschaften Ihrer Komponenten anpassen oder bearbeiten. Die Seitenleiste auf der linken Seite zeigt Ihnen jedoch die Ebenen, Assets und Seiten, die in Ihrem Projekt verwendet werden. Dies wird als Ebenenbedienfeld bezeichnet.
Komponenten sollten relativ früh in Ihre Arbeit eingeführt werden. Sie helfen Ihnen, die Konsistenz in Ihren Entwürfen zu wahren, und ermöglichen es Ihnen, die Geschwindigkeit zu beschleunigen, mit der Sie Änderungen in Ihren Projekten vornehmen. Es gibt zwei Schlüsselelemente einer Komponente:
- Die Master- (oder Haupt-) Komponente (Vierfachrauten-Symbol)
- Eine Instanzkomponente (einfaches Rautensymbol)
Master-Komponenten
Vor allem anderen müssen Sie zuerst die Master-Komponente erstellen. Führen Sie dazu die folgenden Schritte aus:
- Klicken Sie mit der rechten Maustaste auf Ihre Ebene, Gruppe oder Ihren Rahmen.
- Wählen Sie Komponente erstellen aus.
- Auf der linken Seite des Bildschirms sehen Sie ein Dropdown-Menü mit der Aufschrift Komponente. Klicken Sie darauf.
- Von hier aus sehen Sie ein Menü, in dem Sie Änderungen an Ihren Komponenten vornehmen und Stile projektübergreifend neu gestalten können.
Eine andere Möglichkeit, eine Master-Komponente zu erstellen, ist die Verwendung der Tastenkombinationen:
- Optionen + Befehl + K für Mac
- Strg + Alt + K für Windows
Diese Methode funktioniert natürlich nur, wenn Sie Figma auf einem PC verwenden.
Instant-Komponenten
Eine Instant-Komponente ist eine Kopie Ihrer Master-Komponente. Wenn die Master-Komponente auf irgendeine Weise bearbeitet wird, wird die Instanz automatisch aktualisiert, um mit allen vorgenommenen Änderungen übereinzustimmen. Wenn Sie eine Website erstellen, kann dieses Tool besonders nützlich sein und Ihnen viel Zeit sparen. Zum Beispiel wären die Zeiten vorbei, in denen Sie manuell in alle Ihre Komponenten gegangen sind, um dieselben Bearbeitungen zu wiederholen. Stattdessen ändert Figma sie alle für Sie.
Es kann vorkommen, dass Sie mehrere Instanzen erstellt haben und zu Ihrer Master-Komponente zurückkehren möchten, damit Sie alle Ihre Komponenten schnell ändern können. Gehen Sie wie folgt vor, um auf Ihre Hauptkomponente zuzugreifen:
- Klicken Sie mit der rechten Maustaste auf eine beliebige Instanz.
- Klicken Sie auf Gehe zu Master-Komponente.
- Die Master-Komponente wird in der Seitenleiste auf der linken Seite angezeigt.
Während es relativ einfach ist, Komponenten einzeln herzustellen; Sie können die Dinge beschleunigen, indem Sie sie in großen Mengen erstellen. Gehen Sie dazu folgendermaßen vor:
Kann man Xbox-Spiele unter Windows 10 ohne Xbox spielen?
- Wählen Sie in Ihrem Ebenenbedienfeld die Ebenen aus, auf denen Sie Komponenten erstellen möchten.
- Klicken Sie im Ebenenbedienfeld auf das nach unten zeigende Pfeilsymbol neben dem Symbol der Master-Komponente.
- Wählen Sie aus den verfügbaren Optionen die Option Mehrere Komponenten erstellen aus.
- Von dort aus erstellt Figma eine Komponente für jede Rahmenschicht.
Weitere häufig gestellte Fragen
Wie überschreibe oder trenne ich eine Instanz?
Es kann vorkommen, dass Sie Änderungen an den Eigenschaften einer bestimmten Instanz vornehmen möchten, ohne alle anderen zu ändern. Sie können verschiedene Komponenten variieren. In Figma wird dies als Überschreiben bezeichnet.
Nachdem Sie eine Instanz überschrieben haben, wirken sich Änderungen an der Master-Komponente nicht darauf aus. Sehen Sie sich dazu die folgenden Schritte an:
1. Klicken Sie auf Ihre Instanzkomponente.
2. Wählen Sie im Bereich „Eigenschaften“ auf der rechten Seite Ihres Bildschirms „Komponente“ aus.
3. Wählen Sie im angezeigten Dropdown-Menü die Option Instanz trennen.
Wenn Sie eine Überschreibung löschen möchten, wählen Sie die Komponente aus und wählen Sie dann in der oberen mittleren Leiste auf Ihrem Bildschirm „Instanz zurücksetzen“.
Was mache ich, wenn ich versehentlich meine Master-Komponente lösche?
Wenn Sie den ganzen Tag damit verbringen, Inhalte zu bearbeiten, kann es vorkommen, dass Sie versehentlich etwas Wichtiges wie Ihre Master-Komponente löschen. Keine Angst, denn die Wiederherstellung ist so einfach wie 1-2-3. Befolgen Sie einfach diese grundlegenden Schritte, um die fehlende Master-Komponente wiederherzustellen:
1. Gehen Sie zu einer der Instanzen der Komponente.
2. Wählen Sie im Bereich „Eigenschaften“ auf der rechten Seite des Bildschirms „Master-Komponente wiederherstellen“.
3. Die Master-Komponente wird sofort angezeigt.
Wie füge ich eine Beschreibung für meine Komponenten hinzu?
Wenn Sie Ihre Komponenten erstellen, können Sie jeder Komponente eine Beschreibung und einen Dokumentationslink hinzufügen, um sich besser in Ihrem Projekt zurechtzufinden. Es ist auch praktisch für alle Mitarbeiter, mit denen Sie möglicherweise zusammenarbeiten, um Zugriff auf zusätzliche Notizen zu haben. Um eine Beschreibung hinzuzufügen, gehen Sie zum Bereich Eigenschaften auf der rechten Seite der Seite und wählen Sie Beschreibung hinzufügen aus.
Sobald Sie dies getan haben, können alle externen Betrachter auf diese Informationen zugreifen, indem sie zum Inspect Panel in der rechten Seitenleiste gehen.
Wie importiere ich Komponenten in Figma?
Sie können alle Arten von Dateien in eine Figma-Komponente importieren. Der einfachste Weg, dies zu tun, ist von Ihrem Desktop aus. Folgen Sie einfach diesen Schritten:
1. Öffnen Sie in Figma die Seite, auf der Sie eine Datei importieren möchten.
2. Wählen Sie aus Ihren Dateien die spezifische Datei aus, die Sie verwenden möchten.
3. Ziehen Sie die ausgewählte Datei per Drag & Drop auf Ihre Figma-Seite.
4. Wenn Sie damit fertig sind, klicken Sie auf Fertig.
Der Weg zum Erfolg
Figma ist ein großartiges Werkzeug, das Sie verwenden können, egal ob Sie neu im Design sind oder schon seit Jahren im Spiel sind. Die Software bietet ein anfängerfreundliches Bearbeitungssystem, mit dem Designer Inhalte von Grund auf neu erstellen oder bei Bedarf die Hilfe einer Vorlage verwenden können.
Wenn Sie verstehen, wie Sie Komponenten erfolgreich auf Figma verwenden, können Sie bei der Durchführung eines Designprojekts viel Zeit sparen. Indem Sie lernen, wie man ein hochwertiges Komponentensystem erstellt, können Sie als Designer wachsen. Nicht nur das, es kann Ihnen auch dabei helfen, während Ihrer gesamten kreativen Reise einen konsistenten Arbeitsablauf aufrechtzuerhalten und es allen zukünftigen Mitarbeitern zu ermöglichen, Ihre Arbeit leicht zu finden.
Haben Sie versucht, Figma für Ihre kreativen Projekte zu verwenden? Wie fanden Sie die Verwendung von Komponenten? Teilen Sie uns im Kommentarbereich unten mehr über Ihre Erfahrungen mit.
