Figma

Unsere Software für UX und Produktentwickung.

Figma ist ein Gestaltungstool welches hauptsächlich der Erstellung und Gestaltung von Userinterface Prototypen dient. Es bietet die Möglichkeit einfach und schnell einheitliche Wireframes mithilfe von Objekt-Bibliotheken und Stylesheets zu erstellen.

In unserem Fall wird Figma aber auch als Illustrationstool genutzt. Aufgrund der unterschiedlichen Nutzung gibt es ein Ablagesystem das wie folgt aussieht: 

Arbeiten mit Figma

Eingang- Aufräumkiste

Ziel: Wir wollen einen Ort in Figma schaffen, in dem alle kuratierten Grafiken zu finden sind.

Vorgehen: Wir sammeln aus G-Drive und anderen Orten die Grafiken in Figma. Um eine Systematik beizubehalten und aktuelle Grafiken von veralteten gesondert aufzubewahren, gibt es den Eingangsbereich. Alle gefundenen Dateien werden hier als .svg abgelegt. Hier werden die Grafiken sortiert, geprüft und dann in den aktuellen Seiten des passenden Projekts abgelegt.

Components

hierüber können einzelne Components der Bibliotheken gesucht und ausgewählt werden → wir bauen uns mit diesen eine Vorlagen-Library auf. Wir haben dann ein Original, was den aktuellen Stand abbildet und auf dieses kann über die Components überall in Figma zugegriffen werden

Archiv - Arbeiten mit Figma

• Topbar / Werkzeuge linke Seite : Hier befinden sich die verschiedenen Werkzeuge, welche zum Bearbeiten den Objekt gebraucht werden.

  • F : Figma Datei Menu - hier gibt es verschiedene Objekt- und Dateieinstellungen 

  • Move (Shortcut V): das ist das Hauptwerkzeug. Damit können Objekte bewegt und bearbeitet werden

  • Skale (Shortcut K): das ist das Skalierungswerkzeug. Damit können Objekte in ihrer Proportion vergrößert und/oder verkleinert werden. Alternativ dazu kann auch “Move” + Shift zum vergrößern verwendet werden, hierbei kann es allerdings zu ungewollten verschiebungen kommen. Zusammengemorvte Objekte werden z.T. nicht vollständig in ihrer Proportion skalliert. Besser Skale Werkzeug nutzen.

  • Frame (Shortcut F): mit dem Frame können Zeichenflächen geschaffen werden. Alle Objekte innerhalb eines Frames werden automatisch gruppiert und können über den Frame als ganzes exportiert werden.

  • Section (Shortcut Shift + S): mit der Section können Begrenzungsrahmen bzw. Sektionen die zusammen gehören gebündelt werden. Es wird eine Art Container erstellt. Alles was sich auf dieser Fläche befindet wird ohne Gruppierung immer zusammen gehalten. Praktisches Tool um Dateien übersichtlich zu halten 🙂
    Bitte KEINE Rahmen oder Frames für diese Art der Organisation von Frames etc. verwenden. Du findest das Tool unterhalb von Frames beim Dropdown Menü.

  • Shape Tools: hier verbergen sich alle Formwerkzeuge wie Rechteck, Kreis, etc.

  • Pfadwerkzeug : Mit diesem Werkzeug können freie Pfadformen gezeichnet und einzelne Ankerpunkte bearbeitet werden

  • Text (Shortcut T): Textwerkzeug

  • Ressources (Shortcut Shift + I): Hier können Components, Plugins und weitere Widgets aufgerufen werden

  • Hand (Shortcut H) : Mit ausgewählter Hand kann man sich ohne das Verschieben von Objekten in dem Dokument bewegen. Dies funktioniert ebenfalls über die gedrückt gehaltene Leertaste.

  • Kommentar: Über die Kommentarfunktion können sich Teammitglieder gegenseitig verlinken und diskutieren 

• Topbar / Werkzeuge rechte Seite : Hier befinden sich die verschiedenen Werkzeuge, welche zum Teilen und Prototyp abspielen benötigt werden. Ebenso findest du hier die Libaries und dein Profil.

  • Profil: von hier aus kannst du ein Spotlight auf dich setzen und dafür sorgen das dir alle folgen. Außerdem kannst du auch eine Konversation starten.

  • Share Button: öffnet Popupdialog von dem aus du deine Datei teilen kannst

  • Libaries: hier kannst du für dich relevante Komponentenbibliotheken importieren und Änderungen aktualisieren. Wenn du einen blauen benachrichtigungspunkt auf dem Icon siehst solltest du unbedingt deine Libaries updaten/aktualisieren. Es haben sich Dinge in den Libaries verändert, die Änderungen erhälst du nur nach dem Update.

  • Prototype View: Hier kannst du deinen Prototyp abspielen und Präsentieren. Wenn du unter dem Modus Prototype kein Device ausgewählt hast öffnet sich der Präsentationsmodus Vollflächig. Du kannst ihn aber eben auch in einem Device abspielen lassen. Klar: dieser muss für eine optimale Darstellung entsprechend deiner Framegröße ausgewählt sein.

  • Zoom Optionen: Hier kannst du deine Arbeitsfläche zoomen. Alternativ dazu geht das auch mit + - Stufenweise auf der Tastatur oder Strg + Mausscrollrad.

• Linke Spalte : Wird aufgeteilt in Layers und Assets

  • Layers/Ebenen Übersicht: ist die Auflistung und Reihenfolge der einzelnen Objekte innerhalb der Datei. Oberstes Objekt = Oberste Position. In diesem Fall Dreieck über Kreis über Quadrat. Mit Mousehover über die Ebene in der Linkenspalte werden ein Schloss und ein Auge sichtbar. Mit dem Schloss können Objekte gesperrt werden, diese können solange das schloss zu ist nicht bearbeitet werden. Über das Auge können Objekte ein und ausgeblendet werden.

  • Assets: hier kannst du dir alle Libaries anzeigen lassen und eine gewünschte Komponente in deine Datei importieren

• Rechte Spalte : Hier befinden sich die Objekteinstellungen unterteilt in Design und Prototype

  • Design : Bearbeitungsoptionen  

    • Anordnung 

    • Größe / Position / Drehung 

    • Deckkraft

    • Farbe 

    • Kontur 

    • Effekte 

    • Export

  • Prototype : Bearbeitung von Verbindungen von einzelnen UI Objekten (wichtig für UX)

  • Inspect : Objektbeschreibung auf technischer Basis für Programmierung