...

-zeigen: Basic layout in figma, inspector

Styles

...

Komponenten

Komponenten

...

sind wiederverwendbare Elemente im eigenen Design. Sie können alles Mögliche sein, von einem simplen Button bis hin zu einer kompletten Navigationsleiste. Ein paar der geläufigsten Kandidaten für Komponenten sind:

• UI Elemente (Button, Toggle, Slider etc,)
• Icons
• Firmenlogos oder andere Markenzeichen
• Platform Komponenten (für Android, iOS)

[Beispiel]

Sobald man eine Komponente erstellt hat, kann man Kopien von dieser im Projekt verwenden. Die Kopien der sog. Master-Komponente sind mit ihr verbunden, das heißt wenn sich die Master-Komponente ändert, werden sich auch alle Kopien entsprechend verändern. Die Kopien selbst können aber immer noch lokal geändert werden - so kann ein und derselbe Button an verschiedenen Stellen in unterschiedlicher Farbe erscheinen, vielleicht auch nur um rumzuprobieren. Man kann dann später die lokalen Änderungen auf die Master-Komponente anwenden, wenn man sie für alle Kopien übernehmen will.

Ein weiterer Vorteil ist, dass man Komponenten auch schachteln kann.

[Beispiel]

Im Grunde genommen kann man sich so eine eigene Bibliothek an UI-Elementen aufbauen, die dann in vielen Designs verwendet werden.

Mit Komponenten kann man sich viel Arbeit sparen, indem man Designs und strukturieren wiederverwendbar macht, während Änderungen am gesamten Design mit wenig Aufwand möglich sind.

Styles

Mit Styles legt man Eigenschaften des Aussehens von Elementen fest. Dazu gehören Dinge wie Farben, Textgröße, Schlagschatten oder gar Einstellungen von Layout-Grids.

[Beispiel]

Der Vorteil ist dann, dass man durch Änderungen am Style alle Elemente verändert, die diesen Style verwenden. So könnte man beispielsweise den im Projekt verwendeten Font für Seitentitel austauschen.

[Beispiel]

Neben der erhöhten Iterationsgeschwindigkeit kann man so auch bestimmte Teile des eigenen Designs benennen, um z.B. die Verwendung einer Farbe deutlich zu machen, kann man einen Style mit dem Namen "Highlight Color" erstellen. Jedes neue Teammitglied, dass am UI-Design arbeitet kann dann über die Bibliothek auf diesen Style zugreifen und seine Verwendung verstehen

Ein großartiges Feature sind die sog. Komponenten. Kurz gesagt kann man mit ihnen UI-Elementen wie z.B. einen Button fertig designen und diesen Button dann in vielen verschiedenen Designs oder Projekten wiederverwenden. Der ursprüngliche Button ist dann die Hauptkomponente und alle weiteren sind Kopien, die mit der Hauptkomponente verknüpft sind.

Der Clou an der Sache ist, das man Kopien nach belieben lokal abändern kann, ohne die Hauptkomponente zu beeinflussen. Beispielsweise könnte der Button immer gleich groß sein, aber in manchen Panels ist er rot und in anderen Blau.

[Beispiel]

Spannend wird es, wenn sich das grundlegende Design des Buttons ändert. Nehmen wir mal an, dass er nun größer sein soll als vorher - vielleicht haben Tests ergeben, dass er tatsächlich zu klein war. In diesem Fall wird einfach die Hauptkomponente angepasst, worauf alle Kopien ebenfalls verändert werden.

[Beispiel]

Fazit: Komponenten sind ein mächtiges Werkzeug, das zu Anfang kompliziert erscheinen mag, aber dafür sehr viel Iterationsgeschwindigkeit bietet.

Prefabs

Die Safe Zone

Spätestens mit der Ankündigung des iPhone X wurden sogenannte "edge-to-edge" oder randlose Displays zu einem weitverbreiteten Design auf der Mobile-Plattform. Damit die UI nicht von Notches oder Flächen für Gesten (z.B. iPhone Home-Geste) überlagert wird, gibt es die Safe Zone. Innerhalb der Safe Zone ist garantiert, dass Elemente bedienbar und vollständig sichtbar sind.

...