Anleitung UI3: Figmas neue UI
Wer diese Funktion nutzen kann
- Verfügbar in der eingeschränkten Beta-Phase bei allen Abos
- Falls du noch keinen Zugriff auf das neu gestaltete Figma hast, gedulde dich bitte noch etwas. Die Updates werden in den kommenden Monaten nach und nach freigeschaltet. Und falls du neu bei Figma bist und automatisch die neu gestaltete Version verwendest, empfehlen wir dir unseren Leitfaden zum Erkunden von Design-Dateien..
Auf der Config 2024 haben wir das neu gestaltete Figma namens UI3 vorgestellt. Dieser Leitfaden richtet sich an Personen, die zum neuen Design von Figma wechseln und erfahren möchten, was sich verändert hat.
Darum haben wir Figma neu gestaltet
Figma ist im Laufe der Zeit immer komplexer geworden und UI3 ist ein Versuch, die Benutzerfreundlichkeit beim Designen zu verbessern. Unser Ziel ist es, Figma Design für Designer*innen zielgerichteter und für ein breites Publikum zugänglicher zu machen. Außerdem schaffen wir eine einheitliche Grundlage für unsere bestehenden und zukünftigen Produkte.
Dieses neue Design:
- Gibt dir mehr Kontrolle über die Benutzeroberfläche mit skalierbaren Bedienfeldern und minimierbaren Bereichen
- Legt den Fokus verstärkt auf deine Arbeit auf der Arbeitsfläche
- Bietet intuitivere Funktionen durch bessere Platzierung, Gruppierung und Anpassung an unterschiedliche Kontexte
- Sorgt für eine konsistentere Produkterfahrung und erleichtert den Wechsel zwischen Figma Design, FigJam, Dev Mode und Figma Slides
Tipp: Du möchtest mehr über die Neugestaltung erfahren? Dann wirf einen Blick auf unseren Blogbeitrag: Im neu gestalteten Figma steht deine Arbeit im Mittelpunkt
Das hat sich geändert
Navigations-Bedienfeld
Das Navigations-Bedienfeld befindet sich nun auf der linken Seite der Arbeitsfläche. So findest du alle Informationen zu deiner Datei gebündelt an einer Stelle, was die Nutzung benutzerfreundlicher macht.
Die Benutzeroberfläche zuklappen
Solltest du mehr Platz auf der Arbeitsfläche brauchen, kannst du die Benutzeroberfläche über das Navigations-Bedienfeld zuklappen. Klicke auf Minimize UI (Benutzeroberfläche zuklappen), um das Navigations-Bedienfeld und das Eigenschaften-Bedienfeld einzuklappen.
Wählst du bei zugeklappter Benutzeroberfläche etwas auf der Arbeitsfläche aus, öffnet sich das Eigenschaften-Bedienfeld vorübergehend, um dir Zugriff auf die jeweiligen Steuerelemente zu ermöglichen.
Dateiname und -speicherort
Klicke auf das Dropdown-Symbol neben dem Dateinamen, um Aktionen an einer Datei durchzuführen, z. B. das Verschieben, das Veröffentlichen einer Bibliothek, das Erstellen einer Verzweigung oder das Anzeigen des Versionsverlaufs.
Objekt-Registerkarte
Wir haben die Suche, das Durchsuchen und das Einfügen von Komponenten in der Objekt-Registerkarte vereinfacht.
Symbolleiste
Die neue Symbolleiste verschiebt die Design-Tools an den unteren Rand des Editors. Das schafft mehr Platz auf der Arbeitsfläche und führt neue KI-Funktionen über das Bedienmenü ein.
Hinweis: Die KI-Funktionen in Figma Design werden in den kommenden Monaten schrittweise eingeführt. Mehr erfahren →
Aktionen
Actions (Aktionen) ist ein komplett neues Element in der Symbolleiste und soll dir helfen, deine Ideen schneller in die Realität umzusetzen. Hierüber kannst du auf alle KI-Tools von Figma, gängige Produktivitätsaktionen, Plug-ins und Widgets, Komponenten usw. zugreifen.
Dev Mode aufrufen
Du kannst ab jetzt Dev Mode über die Symbolleiste aufrufen. Das macht den Wechsel zwischen den Modi in Figma Design einfacher.
Eigenschaften-Bedienfeld
Die Design-Ansicht des Eigenschaften-Bedienfelds ist benutzerfreundlicher und die Eigenschaften sind nun so gruppiert, dass sie besser zu modernen Workflows passen.
Du kannst auch dei Grüße des Eigenschaften-Bedienfelds verändern, was praktisch ist, wenn du Komponenten mit langen Namen verwendest.
Eigenschaftsbeschriftungen
Neu bei UI3: Du kannst jetzt Eigenschaftsbeschriftungen aktivieren, um besser zu erkennen, welche Funktion jede Eigenschaft hat.
Um Eigenschaftsbeschriftungen zu aktivieren, klicke im Eigenschaften-Bedienfeld auf das Dropdown-Menü neben dem 100 %-Zoom und wähle Eigenschaftsbeschriftungen aus.
Auswahlaktionen
Das Eigenschaften-Bedienfeld zeigt nun eine Kopfzeile mit Aktionen an, die du auf ein ausgewähltes Objekt anwenden kannst.
Dort findest du beispielsweise Schaltflächen zum Anwenden einer Maske, zum Erstellen einer Komponente oder zum Ausführen einer booleschen Operation – möglicherweise sind sie auch im Menü unter More (Mehr) verborgen.
Layout
Layout umfasst alle Eigenschaften, die das Layout eines Objekts betreffen, wie Breite und Höhe.
Wenn du auf Use auto layout (Auto-Layout verwenden) in einem Frame klickst, ändert sich die Layout-Beschriftung zu Auto-Layout und alle Auto-Layout-Eigenschaften stehen zur Verfügung.
Position
Du kannst jetzt unter Position auf alle Eigenschaften zugreifen, die sich auf die Position eines Objekts auf der Arbeitsfläche beziehen, einschließlich Einschränkungen.
Tipp: Du kannst dich nun über das Eigenschaften-Bedienfeld selbst ins Rampenlicht rücken. Wenn Personen den Spotlight-Modus aktivieren, werden die linken und rechten Bedienfelder sowie die Symbolleiste zugeklappt. So bekommst du mehr Platz, um deine Arbeit zu zeigen.
Wohin wurden die Funktionen verschoben?
Sieh dir die Liste unten an, um herauszufinden, was verschoben wurde und wo du es finden kannst.
Altes Design | Neues Design | |
Bearbeitungszugriff anfragenWenn du nur |
||
Absolute PositionAbsolute Position wurde umbenannt in Ignore auto layout (Automatisches Layout ignorieren). Durch das Ignorieren des Auto-Layouts kannst du ein Objekt innerhalb eines Auto-Layout-Rahmens frei positionieren, ohne der Auto-Layout-Struktur folgen zu müssen. Um Auto-Layout zu ignorieren, wähle ein untergeordnetes Element eines Auto-Layout-Rahmens aus und klicke dann auf im Eigenschaften-Bedienfeld. |
||
Objekte ausrichtenDie Steuerungen der Ausrichtung helfen dir, ein Objekt an seiner übergeordneten Ebene auszurichten oder mehrere Objekte zueinander auszurichten. Wähle mehr als ein Objekt aus und klicke dann im Eigenschaften-Bedienfeld unter Position auf eines der Ausrichtungstools. |
||
Auto-LayoutWenn du Auto-Layout auf einen Rahmen anwendest, passt er sich automatisch an Veränderungen des Inhalts und an verschiedene Bildschirmgrößen an. Um Auto-Layout auf einen Rahmen anzuwenden, klicke auf im Abschnitt Layout des Eigenschaften-Bedienfelds. |
||
Werte für Breite und Höhe im Auto-LayoutBei den Auto-Layout-Rahmen sind Breiten- und Höhenwerte jetzt mit dem Größenänderungsverhalten verknüpft. Die Werte findest du:
|
||
MischmodiMischmodi legen fest, wie zwei Ebenen miteinander kombiniert werden sollen. Um einen Mischmodus anzuwenden, wähle ein Objekt aus, klicke auf neben Darstellung und wähle dann einen Modus aus. |
||
Inhalte abschneidenDurch Inhalte abschneiden kannst du Bereiche einer Ebene ausblenden, die über die Begrenzungen des übergeordneten Rahmens hinausgehen. Aktiviere das Kontrollkästchen Clip content (Inhalte abschneiden) unter Layout, um festzulegen, ob der Inhalt abgeschnitten oder angezeigt werden soll. |
||
KomponenteneigenschaftenKomponenteneigenschaften sind die anpassbaren Merkmale einer Komponente. Du kannst festlegen, welche Teile einer Komponente von anderen geändert werden dürfen, indem du sie an bestimmte Eigenschaften koppelst. Wenn eine Komponente verfügbare Komponenteneigenschaften hat, findest du sie unter dem Namen des Rahmens im Eigenschaften-Bedienfeld. |
||
EinschränkungenEinschränkungen geben Figma vor, wie sich Ebenen verhalten sollen, wenn du ihre übergeordneten Rahmen in der Größe veränderst. Wenn eine untergeordnete Ebene ausgewählt ist, erscheint das Symbol Constraints (Einschränkungen) neben den X- und Y-Positionswerten im Abschnitt Position des Eigenschaften-Bedienfelds. |
||
EckradiusEckradius ist eine Eigenschaft, mit der du die Ecken eines Objekts abrunden kannst. Wenn ein Objekt ausgewählt ist, klicke auf das Feld Eckradius unter Appearance (Darstellung) und ändere den Wert. Du kannst auch auf klicken, um jede Ecke einzeln zu bearbeiten. |
||
Dateiname, Projektname und DateiaktionenDer Dateiname, das zugehörige Projekt und das Dropdown-Menü für Dateiaktionen wurden in das Navigations-Bedienfeld verschoben. |
||
MaskenMit einer Maske kannst du bestimmte Teile eines Objekts zeigen und den übrigen Bereich verdecken. Klicke bei einem ausgewählten Objekt auf Use as mask (Als Maske verwenden), um eine Maskengruppe zu erstellen, wobei das Objekt als Maske dient. Use as mask (Als Maske verwenden) kann je nach Anzahl der verfügbaren Aktionen im Menü More (Mehr) sein. |
||
Multi-BearbeitungMulti-Bearbeitung heißt, du kannst mehrere Ebenen über Rahmen, Gruppen und Abschnitte hinweg auswählen und dieselben Bearbeitungen gleichzeitig auf alle anwenden. Klicke auf im Eigenschaften-Bedienfeld, um die Multi-Bearbeitung zu aktivieren. |
||
Plugins und WidgetsUm auf Plugins und Widgets zuzugreifen, öffne Actions (Aktionen) in der Symbolleiste und klicke dann auf die Registerkarte Plugins & Widgets. |
||
Breite oder Höhe eines Objekts ändern oder Größe anpassenÄndere die Breite und Höhe eines Objekts unter Layout. Du kannst auch die Größe eines Rahmens ändern, um ihn an seine untergeordneten Ebenen anzupassen, indem du auf das Symbol klickst. |
||
DrehenDurch Drehen oder Spiegeln kannst du die Ausrichtung von Objekte ändern. Wenn du ein Objekt ausgewählt hast, wähle eine Position und:
|
||
Ein Objekt anzeigen oder ausblendenUm ein Objekt auf der Arbeitsfläche auszublenden, klicke auf neben Appearance (Darstellung). Um es wieder einzublenden, klicke auf . |
||
TextText heißt jetzt Schriftarten.
|
||
Modi für VariablenModi für Variablen stellen die verschiedenen Kontexte eines Designs dar. Ein Modus enthält eine Liste von Werten für eine Variable innerhalb einer Sammlung. Wenn eine Variablen-Sammlung mehrere Modi hat, kannst du die Modi für Ebenen und Elemente umschalten, um das Design für verschiedene Kontexte schnell zu ändern. Solange ein Objekt an eine Variable mit mehreren Modi gebunden ist, kannst du auf neben Appearance (Darstellung) klicken, um den Variablenmodus zu wechseln. |
||
Variante hinzufügenVarianten ermöglichen das Gruppieren und Organisieren ähnlicher Komponenten in einem einzigen Container. Beim Einfügen einer Komponenteninstanz kannst du zwischen den Varianten der Komponentengruppe wechseln. Um eine Variante hinzuzufügen, wähle eine Hauptkomponente aus und klicke auf Add a variant (Variante hinzufügen) neben dem Komponentennamen im Eigenschaften-Bedienfeld. |
||
Einen Vektorpfad bearbeitenUm einen Vektorpfad zu bearbeiten, klicke auf Edit object (Objekt bearbeiten) neben Vector (Vektor). Wenn du mehrere Vektorpfade auswählst, erscheint das Menü boolean operations (Boolesche Operationen). Von hier aus kannst du die folgenden Barbeitungen durchführen:
|
||
Zoom-/AnzeigeoptionenIm Menü Zoom / view options (Zoom-/Anzeigeoptionen) kannst du deine Zoomeinstellungen anpassen oder Anzeigeoptionen, wie Layoutraster oder Multiplayer-Cursor, konfigurieren. |
Kann ich zum alten Design zurückkehren?
Wenn du nicht weiterkommst, kannst du ganz einfach zum vorherigen Design zurückkehren. Öffne in einer Designdatei das help menu (Hilfemenü) und klicke auf Go back to previous UI3 (Zurück zur bisherigen Benutzeroberfläche).
Solltest du dich später entscheiden, doch aufs neue Design umzusteigen, kannst du dieses Menü erneut aufrufen und das neue Design jederzeit ausprobieren.