Figma

Größen und Abstände

Übersicht

Abstände und Größen müssen einfach und zugänglich definiert sein, um die richtige Anwendung zu gewährleisten. Deshalb gibt es bei KERN nur wenige Token, die untereinander kombiniert werden können. Damit lassen sich alle benötigten Abstände und Größen abbilden. KERN bietet vier Gruppen mit jeweils einer Default-Größe. Von der Default-Größe leiten sich jeweils zwei (maximal drei) Abstufungsgrößen nach oben und unten an. Große Weißräume ergeben sich durch die Kombination mehrerer Spaces durch Frames (Container) und deren Padding.

Border-Token

Border-Radius

Dimension (feste Container Größen)

Space (Padding / Gap / Margin)

Anwendung der Abstands-Token

Umgang mit Weißraum

Weißraum ist ein hilfreiches Mittel, die Zusammengehörigkeit von Elementen zu vermitteln: Je näher, desto höher der Bezug. Je weiter, desto deutlicher lassen sich Gruppen und Muster auf einem Screen erkennen (siehe auch Gesetz der Nähe der Gestaltgesetze). Bei KERN ist das Ziel, die Komplexität des Systems gering zu halten. Es gibt also wenige Space-Token. Von einem Default-Wert gibt es zwei, maximal drei Abstufungen nach oben oder unten. Was also, wenn mehr als das Maximum von 32px als Abstand benötigt wird? Ganz einfach: durch Kombination. Im Folgenden werden einige anschauliche Beispiele für den Umgang mit Abständen gezeigt.

Stacking

Texte können durch „Body”- und „Heading”- Komponenten direkt aufeinandergestapelt werden:

Folgen weitere Elemente wie ein Button oder eine Card, ist es in der Regel ratsam die Elemente mit Weißraum zu gruppieren.

Im Regelfall empfiehlt es sich, Elemente abhängig von der Textgröße zu „stacken”, also zu „stapeln”. „Heading-Large” wird also mit einem --kern-metric-space-large kombiniert. Da der Abstand zum Button zu groß ausfallen und das Gesetz der Nähe brechen würde, wird zwischen Text und Button ein --kern-metric-space-default gesetzt, um die Objekte wieder zusammenzubringen.

Space Kombination beim Stacking

Layout-Gestaltung ist nicht immer leicht. Entsprechend möchte KERN eine Hilfestellung bieten, wenn mehrere Elemente übereinandergestapelt werden.

Bei KERN 2 lässt sich alles vom Text ausgehend gestalten: Ein „Title-Default“ kann gut mit einem --kern-metric-space-default kombiniert werden. Ein „Title-Small” passt wunderbar zu einem --kern-metric-space-small. In der Horizontalen wird in der Regel mehr Raum gegeben: Werden Elemente gemeinsam strukturiert (z. B. in einem „Div” oder in Figma einem „Frame”), werden sie in der Vertikalen mit einem kleineren Abstand getrennt als in der Horizontalen.

Ein „--kern-metric-space-default” wird z. B. mit einem --kern-metric-space-large zusammen verwendet. Der --kern-metric-space-default ist der Abstand zwischen den Elementen in der Vertikalen und der --kern-metric-space-large der Abstand in der Horizontalen.

Am Beispiel der Card lässt sich das Schema gut demonstrieren. Dieser Umgang mit Weißraum ist weniger eine Regel, sondern eine reine Hilfestellung.