Anleitung zu Figma für Anfänger

In Figma können Sie Oberflächenelemente entwerfen, interaktive Websites und App-Prototypen erstellen, Illustrationen anfertigen und mit Vektorgrafiken arbeiten. Viele Designer verwenden es auch, um Website-Layouts für Tilda zu erstellen.

• Schnittstelle für mobile Anwendungen - FigmaiOS UI Kit.
• Prototyp des Tesla Model 3-Bedienfelds und seiner Schnittstellenelemente.

Projektmanager und Unternehmer können beispielsweise Gantt-Diagramm-Vorlagen für die Planung verwenden oder Social-Media-Anzeigen mithilfe von Voreinstellungen für Facebook und andere Plattformen erstellen.

• Plattformübergreifend

• Cloud-basiert

• Eingebautes Feedback

Jeder, der Zugang hat, kann ein Layout kommentieren und direkt am Entwurf Feedback erhalten. Das beschleunigt den Genehmigungsprozess und sorgt dafür, dass wichtige Notizen nicht in E-Mail-Threads untergehen.

Nachdem Sie sich angemeldet haben, sehen Sie zwei primäre Arbeitsbereiche:

1. Der Dateimanager, in dem Sie Projekte erstellen und Ihre Profileinstellungen anpassen können.
2. Der grafische Editor selbst.

Figma Community ist eine relativ neue Funktion, die wie eine eigene Social-Media-Plattform innerhalb des Haupttools funktioniert. Sie ermöglicht es den Nutzern, Designressourcen wie Vorlagen, UI-Kits und Plugins zu entdecken und zu teilen. Um darauf zuzugreifen, klicken Sie auf das Weltkugel-Symbol.

Plugins sind im Wesentlichen Werkzeuge und Erweiterungen von Drittanbietern, die die Funktionalität von Figma erweitern. Sie helfen dabei, Arbeitsabläufe zu beschleunigen, die Effizienz zu verbessern und bieten zusätzliche Funktionen wie Bildbibliotheken, Icons usw.

Wenn Sie z. B. das Unsplash-Plugin installieren, können Sie Stockbilder einfügen, ohne Figma zu verlassen, während Iconify Ihnen Zugang zu über 40 000 Vektorsymbolen bietet.

Die Benutzer können selbst Plugins entwickeln und hinzufügen, um die Funktionalität von Figma auf ihre speziellen Bedürfnisse zuzuschneiden.

Seit Figma die Figma Community eingeführt hat, sind Plugins Teil dieser Schnittstelle geworden. Sie können dort alle verfügbaren Plugins finden und durchsuchen.

Sobald Sie die gewünschten Plugins verbunden haben, sind sie über die untere Symbolleiste auf der Registerkarte Plugins und Widgets zugänglich.

Ein neuer Dateibildschirm enthält drei Hauptbereiche: Die Leinwand, die Symbolleiste und zwei Seitenleisten. Die linke Seitenleiste enthält das Bedienfeld "Ebenen". Hier finden Sie einige wichtige Elemente der Benutzeroberfläche:

Standardmäßig sind alle neu hinzugefügten Formen grau gefärbt. Um die Farbe zu ändern, wählen Sie "Farbe auswählen" aus dem Dropdown-Menü "Bearbeiten". Dadurch wird der Farbwähler geöffnet, mit dem Sie eine neue Farbe auswählen können, indem Sie eine bereits auf der Leinwand verwendete Farbe identifizieren.

Die Funktion "Alles auswählen mit..." hebt alle Elemente hervor, die dieselben Eigenschaften, Füllungen, Schriftarten oder Effekte aufweisen, was die Stapelverarbeitung erleichtert.

Dieses Menü hilft Ihnen bei der Einrichtung der Leinwand und erleichtert Ihnen die Navigation im Layout. Sie können das Pixelraster aktivieren, Lineale anzeigen, ein- oder auszoomen usw.

Um den Arbeitsbereich zu maximieren, können Sie das Bedienfeld "Ebenen" und die Benutzeroberfläche mit den entsprechenden Optionen ausblenden.

Die auf dem Rahmen platzierten Objekte werden auf der linken Seite als "Ebenen" aufgeführt. Sie können Objekte auch gruppieren (z. B. eine Telefonnummer und eine E-Mail-Adresse in der Fußzeile der Seite platzieren). Richten Sie die Elemente innerhalb des Rahmens mit dem Bedienfeld auf der rechten Seite aus, oder gruppieren Sie sie mit Objekt → Auswahl gruppieren(Strg/Befehl + G).

Legen Sie die Anzahl der Spalten fest, passen Sie deren Farbtransparenz an und passen Sie die Breite des Bundstegs an. Sie können auch die Art des Gitters auswählen und es als Gitter, Spalten oder Zeilen anzeigen lassen.

• Verwenden Sie die Einstellungen oben im Eigenschaftenfenster, um Objekte auf der X- und Y-Achse zu verschieben und zu skalieren.
• Verwenden Sie die Einstellung Eckenradius unter "Aussehen", um die Ecken einer Form abzurunden, z. B. um die oberen Kanten eines Rechtecks wie ein Lesezeichen aussehen zu lassen. Standardmäßig gilt der Radius für alle Ecken. Um nur bestimmte Ecken abzurunden, klicken Sie auf die Einstellung Einzelne Ecken neben den Wertfeldern.

• Um die Strichstärke anzupassen, verwenden Sie die Einstellung "Strich" - geben Sie einen Wert ein oder ziehen Sie den Schieberegler. Um die Füllung auszublenden, klicken Sie auf das Augen- oder Minussymbol unter "Füllung".

• Um das Rechteck wie eine Fahne aussehen zu lassen, verlängern Sie den unteren Rand. Doppelklicken Sie auf die Form, um ihre Punkte zu bearbeiten.

• Mit dem "Biegewerkzeug" können Sie Ecken oder Kurven glätten.
• Der "Farbeimer" ermöglicht das Ausfüllen eines geschlossenen Pfades.

• Ausfüllen: Das Bild wird so skaliert, dass es den Rahmen vollständig abdeckt und kein leerer Raum übrig bleibt. Wenn das Seitenverhältnis des Bildes von dem des Rahmens abweicht, können Teile des Bildes abgeschnitten werden, um eine vollständige Abdeckung zu gewährleisten.

• Einpassen: Zeigt das gesamte Bild innerhalb des Rahmens an, wobei das ursprüngliche Seitenverhältnis beibehalten wird. Wenn Bild und Rahmen unterschiedliche Proportionen haben, kann dies zu leerem Raum (Füllung) führen.

• Zuschneiden: Ermöglicht es Ihnen, manuell einzustellen, welcher Teil des Bildes innerhalb des Rahmens sichtbar ist. Sie können das Bild neu positionieren und die Größe ändern, um sich auf einen bestimmten Bereich zu konzentrieren und den Rest wegzuschneiden. Die beschnittenen Bereiche werden ausgeblendet, aber nicht gelöscht, sodass eine nicht-destruktive Bearbeitung möglich ist.

• Kachel: Wiederholt das Bild als Muster.

Mit den verfügbaren Einstellungen können Sie auch Fotokorrekturen am Bild vornehmen, z. B. Helligkeit, Kontrast, Sättigung usw., oder sogar einen bestimmten Teil des Fotos bearbeiten.

1. Legen Sie eine Formebene unter die Fotoebene.
2. Wählen Sie beide Ebenen aus.
3. Gehen Sie zu Objekt → Als Maske verwenden (Tastenkürzel: Strg + Alt + M unter Windows oder Cmd + Opt + M unter macOS).

Figma unterstützt den Import von SVG-Dateien. Sie können sie von Ihrem Computer ziehen oder direkt aus Illustrator oder Fresco kopieren und einfügen. Diese Dateien werden oft als Rahmen angezeigt. Im Ebenenbedienfeld können Sie Vektorobjekte durch Drücken von Strg + G (Windows) oder Cmd + G (macOS) gruppieren und über die Rahmenebene verschieben.

• Vollton: Der Standardfülltyp, der dem Objekt eine einzige Farbe verleiht.
• Linear: Erzeugt einen Farbverlauf entlang einer geraden Linie zwischen zwei Punkten.
• Radial: Erzeugt einen kreisförmigen Gradienten, der von einem zentralen Punkt ausstrahlt.
• Winklig: Wendet einen Farbverlauf an, der sich um einen zentralen Punkt dreht und einen Tortenscheibeneffekt erzeugt.
• Diamant: Erzeugt einen Farbverlauf in einem rautenförmigen Muster, das von der Mitte ausstrahlt.
• Bild: Füllt das Objekt mit einem Bild (oder Video).

Indem Sie die Positionen der Endpunkte des Farbverlaufs ändern, können Sie die Richtung und Intensität des Farbübergangs steuern.

Für weitere kreative Optionen können Sie Formen übereinanderlegen und mehrere Farbverläufe anwenden. Sie können Mischmodi verwenden, um Formen oder Bilder auf einzigartige Weise zu stapeln.

Wenn die Verbindung zwischen einer übergeordneten und einer untergeordneten Komponente unterbrochen ist, können Sie die Verbindung wiederherstellen, indem Sie die untergeordnete Komponente auswählen und auf das Symbol Zurücksetzen oder Zurückgehen klicken. Diese Aktion macht alle manuell geänderten Parameter rückgängig und stellt die Verbindung zur übergeordneten Komponente wieder her.

Speichern Sie alle Variationen in einem eigenen Rahmen, und wenden Sie sie dann nach Bedarf auf Ihre Textebenen an.

• Trennen Sie die untergeordnete Instanz von der übergeordneten Instanz mit der Option "Instanz abtrennen".
• Automatisches Layout anwenden.

• Festgelegt: Die Breite/Höhe wird entsprechend den manuell eingegebenen Parametern statisch beibehalten.
• Umarmung: Die Größe des Rahmens wird automatisch an den Inhalt angepasst.
• Füllen: Das Element füllt die Breite oder Höhe des übergeordneten Containers aus.

• Umbrechen: Ordnet die Objekte in mehreren Zeilen oder Spalten innerhalb eines Rahmens an. Objekte fließen horizontal und werden in die nächste Zeile umbrochen, wenn der Platz begrenzt ist.
• Min/Max: Legt die Mindest- und Höchstmaße für Rahmen und untergeordnete Elemente fest, um zu verhindern, dass sie zu groß oder zu klein werden.

Mit diesem Plugin können Sie über 40 000 Vektorsymbole von Iconify durchsuchen, darunter Sammlungen wie Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji usw., und sie schnell in Ihr Design einfügen.

• Fenster: Strg + Umschalt + E
• macOS: Cmd + Shift + E

• SVG: Ideal für Vektorobjekte wie Symbole und einfache Grafiken aufgrund seiner Skalierbarkeit und Schärfe bei jeder Größe.
• JPEG: Eignet sich am besten für Fotos und Bilder mit Farbverläufen und bietet eine gute Komprimierung und ausgewogene Qualität.
• PNG: Bevorzugt für Bilder, die Transparenz erfordern, oder Bilder mit Text und scharfen Kanten, da es eine verlustfreie Kompression unterstützt.
• PDF: Nützlich für Dokumente und Layouts, die Vektorelemente enthalten und ohne Qualitätsverlust skalierbar sein müssen.

• Besprechen Sie Projekte: Arbeiten Sie in Echtzeit mit Sprachchats und Kommentaren zusammen, und betten Sie sogar Musik ein. FigJam bietet KI-Funktionen (derzeit in der Beta-Phase) wie "Sortieren", das Haftnotizen automatisch nach Themen sortiert, und "Zusammenfassen", das einen schnellen Überblick über alle Notizen bietet.
• Machen Sie Notizen und analysieren Sie Kundeninterviews: Designer können eine integrierte Vorlage verwenden, um Benutzerinterviews zu protokollieren und dann auf der Grundlage der gesammelten Daten Benutzer-Personas zu erstellen.
• Erstellen Sie Customer Journey Maps: Visualisieren Sie die Benutzerpfade - beschreiben Sie die Aktionen, die sie ausführen, ihre Erwartungen, Emotionen und Schmerzpunkte. Verbessern Sie jede Phase der User Journey mit Tools wie Haftnotizen, Emojis und anderen Widgets.

• Erfordert einen Neustart, um lokale Schriftarten hinzuzufügen: Es reicht nicht aus, eine Schriftart auf Ihrem Computer zu installieren. Sie müssen Figma neu starten, um sie zu laden.
• Mögliche Ungenauigkeiten beim Export: Manchmal fügt Figma beim Export von PNG-, JPG- oder SVG-Dateien zufällig ein paar Pixel Striche hinzu oder verzerrt lineare Abbildungen.
• Kein eingebauter Urheberrechtsschutz: Beim kostenlosen Starter-Tarif gibt es keine Möglichkeit, jemanden daran zu hindern, Ihre Datei zu duplizieren und seine eigene Kopie zu bearbeiten.
• Erfordert eine stabile Internetverbindung: Wie Google Docs oder jeder andere Cloud-basierte Dienst erlaubt Figma keine Offline-Bearbeitung. Wenn Sie Ihre Verbindung unterbrechen, werden die Änderungen erst gespeichert, wenn Sie wieder online sind.
• Keine benutzerdefinierten Tastaturkürzel: Die in Figma verfügbaren Tastenkombinationen sind fest vorgegeben, aber Sie können Tools von Drittanbietern wie AutoHotkey verwenden, um Tasten neu zu belegen.
• Keine mehrsprachigen Versionen: Figma ist derzeit nur auf Englisch und Japanisch verfügbar. Wenn Sie es in einer anderen Sprache benötigen, können Sie nur die Google Translate-Erweiterung für Chrome verwenden. Wenn Sie Erfahrung mit Grafikeditoren wie Photoshop haben oder diesen Leitfaden befolgt haben, wird es einfacher sein, sich in Figma zurechtzufinden.

• Online-Grafikeditor: Ihr gesamtes Team kann gleichzeitig an derselben Datei arbeiten, wobei alle Aktualisierungen in der Cloud gespeichert werden.
• Versionsgeschichte: Figma speichert jede Versionsänderung, so dass Sie bei Bedarf einfach zurückgehen können.
• Keine OS-Einschränkungen: Figma wird direkt in einem Browser ausgeführt, so dass keine komplexe Einrichtung erforderlich ist und es sogar auf einfachen Laptops funktioniert. Wenn Sie möchten, können Sie jedoch auch die Desktop-App installieren.
• Freemium-Modell: Der kostenlose Starter-Plan unterstützt bis zu zwei Redakteure - perfekt für viele Freiberufler oder kleine Teams.
• Ideal für einfache Prototypen: Das Gesamtkonzept und die Schnittstelle sind für die Erstellung von Web- und App-Schnittstellen konzipiert. Für fortgeschrittene Illustrationen oder Fotobearbeitung müssen Sie jedoch möglicherweise ein anderes Tool verwenden.
• Plugin-Ökosystem: Mit Hunderten von verfügbaren Plugins (und der Möglichkeit, eigene zu erstellen) lässt sich Figma an die meisten Arbeitsabläufe anpassen.