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 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 : Hier befinden sich die verschiedenen Werkzeuge, welche zum Bearbeiten den Objekt gebraucht werden.

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

  • Mouse / Move : das ist das Hauptwerkzeug. Damit können Objekte bewegt und bearbeitet werden

  • Frame : mit dem Frame können Begrenzungsrahmen / Zeichenflächen geschaffen werden. Alle Objekte innerhalb eines Frames werden automatisch gruppiert und können über das Frame als ganzes exportiert werden.

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

  • Text : Textwerkzeug

  • Hand : Mit ausgewählter Hand kann man sich ohne das Verschieben von Objekten in dem Dokument bewegen

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

• Linke Spalte : 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.

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

  • 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