Erstellen von Tabellen in Figma

In diesem Tutorial werden wir darüber sprechen, wie Tabellen in Figma mithilfe von Komponenten und der Atomic Design-Methodik erstellt werden können. Wir werfen auch einen Blick auf die Grundelemente des Tabellenlayouts und wie Komponenten in die Komponentenbibliothek aufgenommen werden können, damit sie Teil des von Ihnen verwendeten Konstruktionssystems werden.

Um es Ihnen leicht zu machen, habe ich ein Mockup-Beispiel vorbereitet, das alle Komponenten verwendet, die wir für dieses Tutorial benötigen.

Um mitzumachen, müssen Sie zumindest ein gewisses Verständnis der grundlegenden Figma-Konzepte, seiner Benutzeroberfläche und der Arbeit mit Figma-Komponenten haben. Wenn Sie jedoch neu bei Figma sind und mit Tabellendaten arbeiten, empfehle ich Ihnen, sich das Video „Getting Started“ anzusehen, um Figma durchgängig besser zu verstehen, sowie den Artikel „How To Architect A Complex Web Table“. die vor nicht allzu langer Zeit hier im Smashing Magazine veröffentlicht wurde.

Um den Umfang dieses Lernprogramms zu vereinfachen, gehen wir davon aus, dass die Farben, Schriftarten und Effekte bereits als Stile in dem Figma-Projekt vorhanden sind, mit dem Sie beginnen möchten. Im Atomic Design sind sie Atome . (Um mehr zu erfahren, haben die Leute von littleBits einen großartigen Artikel zu diesem Thema geschrieben.)

Die Zielgruppe für dieses Tutorial sind Designer (UX, UI), die Figma entweder bereits in ihre Arbeitsabläufe übernommen haben oder planen, Figma in ihren nächsten Designprojekten auszuprobieren, sich aber nicht sicher sind, wie sie anfangen sollen.

Also, ohne weitere Umschweife, lassen Sie uns einsteigen!

Kurzer Hinweis : Beim Schreiben dieses Artikels hat Figma Plugins eingeführt. Zum Zeitpunkt der Veröffentlichung gab es keine guten für die Arbeit mit Tabellen, aber die Dinge können sich schnell ändern. Wer weiß, vielleicht hilft dieser Artikel tatsächlich einem aufstrebenden Figma-Plugin-Entwickler, ein wirklich ordentliches Figma-Tables-Plugin zu erstellen, oder zumindest hoffe ich, dass es das wird.

Einführung

Stellen Sie sich den Tisch als Organismus vor. Die Tafelzelle ist dann ein Molekül, das sich aus einzelnen Atomen zusammensetzt. Aus gestalterischer Sicht handelt es sich um Zelleneigenschaften .

Beginnen wir also mit der Zelle. Es hat drei Eigenschaften:

1. Hintergrund
2. Rand
3. Inhalt

Jetzt schauen wir uns jeden von ihnen genauer an.

Hintergrund

Der Hintergrund wird eine separate Komponente in Figma sein. Die Größe spielt eigentlich keine Rolle, da wir die Komponente nach Bedarf strecken können, aber beginnen wir damit, die Größe auf 100 × 36 Pixel einzustellen.

Fügen Sie in dieser Komponente ein Rechteck hinzu, das dieselbe Größe wie die Komponente selbst hat. Es ist das einzige Objekt innerhalb der Komponente. Wir müssen die Ränder des Rechtecks ​​mit den Rändern der Komponente verbinden, indem wir Beschränkungen verwenden (setzen Sie die Beschränkungen auf „Links & Rechts“ und „Oben & Unten“ im rechten Bedienfeld im Abschnitt „ Beschränkungen “), damit sich das Rechteck automatisch auf die Größe der ausdehnt Komponente.

Wenn Sie dies in Aktion sehen möchten, sehen Sie sich dieses Tutorial an, wie die Einschränkungen in Figma funktionieren.

Die Füllfarbe des Rechtecks ​​bestimmt die Hintergrundfarbe der Zelle. Lassen Sie uns die weiße Farbe dafür auswählen. Ich empfehle, diese Farbe aus den Farbstilen auszuwählen, die zu Beginn des Projekts konfiguriert werden.

Rand

Dieser ist etwas kniffliger als der Hintergrund. Sie können nicht nur ein Rechteck mit einem Strich erstellen. Möglicherweise benötigen wir verschiedene Arten von Rahmen: einen für die einzelnen Zellen (mit Rahmen drumherum), einen für die gesamte Reihe von Zellen mit nur oberen und unteren Rahmen oder einen für den Tabellenkopf, den wir vielleicht mit a vom Rest trennen möchten breitere Linie. Es gibt viele Möglichkeiten.

Randeigenschaften:

• Grenzlinie (links, rechts, oben, unten oder Fehlen einer von ihnen)
• Linienbreite
• Linienfarbe
• Linienstil

Jede Linie innerhalb des Zellrahmens kann eine andere Breite, Farbe und einen anderen Stil haben. Beispielsweise könnte die linke eine durchgehende rote Linie sein und die obere eine gepunktete graue Linie.

Lassen Sie uns eine Komponente mit einer Größe von 100 × 36 Pixel erstellen (wie zuvor). Innerhalb der Komponente müssen wir 4 Zeilen für jeden Rahmen hinzufügen. Achten Sie nun darauf, wie wir dies tun werden.

1. Fügen Sie eine Linie für den unteren Rand mit der Länge der Komponentenbreite hinzu;
2. Stellen Sie seine Position auf den unteren Rand und die Beschränkungen ein, um sich horizontal zu strecken und am unteren Rand zu bleiben;
3. Duplizieren Sie für den oberen Rand die Linie für den unteren Rand, drehen Sie sie um 180 Grad und kleben Sie sie an der Oberseite des Bauteils fest. (Vergessen Sie nicht, die Einschränkungen so zu ändern, dass sie oben bleiben und sich horizontal strecken.);
4. Drehen Sie als Nächstes für den linken Rand einfach um -90 Grad und legen Sie seine Position und Einschränkungen so fest, dass sie sich auf der linken Seite befinden, am linken Rand haften und vertikal gestreckt werden.
5. Zu guter Letzt können Sie den rechten Rahmen erstellen, indem Sie ihn um 90 Grad drehen und seine Position und Einschränkungen festlegen. Stellen Sie die Strichfarbe und Strichbreite für jede Linie auf Grau (aus den Farbstilen auswählen) bzw. 1 Pixel ein.

Hinweis : Sie fragen sich vielleicht, warum wir die Linie für den unteren Rand gedreht haben. Nun, wenn Sie die Strichbreite für eine Linie in Figma ändern, wird sie steigen. Also mussten wir diese „Anstiegsrichtung“ auf die Mitte des Bauteils setzen. Das Ändern der Strichbreite der Linie (in unserem Fall ist es die Rahmengröße) wird nicht über die Komponente (Zelle) hinaus erweitert.

Jetzt können wir die Stile für jeden Rahmen in der Zelle separat ausblenden oder anpassen.

Wenn Ihr Projekt mehrere Stile für Tabellenrahmen hat (einige Rahmenbeispiele unten gezeigt), sollten Sie für jeden Stil eine separate Komponente erstellen. Erstellen Sie einfach eine neue Master-Komponente, wie wir es zuvor getan haben, und passen Sie sie so an, wie Sie es benötigen.

Die separate Stroke-Komponente spart viel Zeit und erhöht die Skalierbarkeit . Wenn Sie die Strichfarbe innerhalb der Master-Komponente ändern, wird die gesamte Tabelle angepasst. Wie bei der obigen Hintergrundfarbe kann jede einzelne Zelle ihre eigenen Strichparameter haben.

Inhalt

Dies ist die komplexeste Komponente von allen.

Wir müssen alle möglichen Variationen des Tabelleninhalts im Projekt erstellen: Einfacher Text, ein Text mit einem Symbol (links oder rechts, unterschiedliche Ausrichtung), Kontrollkästchen, Schalter und alle anderen Inhalte, die eine Zelle möglicherweise enthalten kann. Um dieses Tutorial zu vereinfachen, überprüfen Sie bitte die Komponenten in der Mockup-Datei. Wie man Komponenten in Figma erstellt und organisiert, ist ein Thema für einen anderen Artikel.

Es gibt jedoch einige Anforderungen an Inhaltskomponenten:

• Komponenten sollten sich sowohl vertikal als auch horizontal leicht dehnen lassen, um in eine Zelle zu passen;
• Die Mindestgröße der Komponente sollte kleiner sein als die Standardzellengröße (insbesondere die Höhe, denken Sie an mögliche Zellfüllungen);
• Vermeiden Sie Ränder, damit die Komponenten innerhalb einer Zelle richtig ausgerichtet werden können;
• Vermeiden Sie unnötige Hintergründe, da eine Zelle selbst bereits darüber verfügt.

Inhaltskomponenten können schrittweise erstellt werden: Beginnen Sie mit den grundlegenden wie Textkomponenten und fügen Sie neue hinzu, wenn das Projekt an Größe zunimmt.

Der Grund, warum wir den Inhalt in Komponenten haben möchten, ist derselbe wie bei anderen Elementen – es spart Betriebszeit. Um den Inhalt der Zelle zu ändern, müssen wir ihn nur in der Komponente umschalten.

Erstellen einer Zellkomponente

Wir haben alle Atome erstellt, die wir brauchen: Hintergrund, Rand, Inhalt. Es ist Zeit, einen Zellbestandteil zu schaffen, dh das Molekül aus Atomen. Lassen Sie uns alle Komponenten in einer Zelle sammeln.

Legen Sie die Hintergrundkomponente als untere Ebene fest und strecken Sie sie auf die gesamte Zellengröße (setzen Sie die Einschränkungen auf „Links & Rechts“ und „Oben & Unten“).

Fügen Sie die Rahmenkomponente mit den gleichen Einschränkungen wie die Hintergrundkomponente hinzu.

Nun zum kompliziertesten Teil – dem Inhalt Inhalt .

Die Zelle hat Polsterungen, daher müssen Sie einen Rahmen mit dem Inhalt der Komponente erstellen. Dieser Rahmen sollte mit Ausnahme der Polsterungen auf die gesamte Zellengröße gedehnt werden. Die Inhaltskomponente sollte auch auf die gesamte Framegröße gestreckt werden. Dem Inhalt selbst müssen jegliche Ränder entzogen werden, sodass alle Auffüllungen von der Zelle festgelegt werden.

Am Ende des Tages sind Zellpolster die einzige Eigenschaft in einem Bauteil, die wir nur einmal einstellen, ohne die Möglichkeit, sie später zu ändern. Im obigen Beispiel habe ich es für alle Seiten auf 4 Pixel gesetzt.

Hinweis : Als Lösung können Sie Spalten mit leeren Zellen (z. B. ohne Inhalt und mit einer Breite von 16 Pixel) links und rechts von der Spalte erstellen, in der zusätzlicher Rand benötigt wird. Wenn das Design Ihrer Tabelle dies zulässt, können Sie auch horizontale Polsterungen innerhalb der Zellenkomponente hinzufügen. Beispielsweise haben Zellen in Google Material Design standardmäßig 16 Pixel Padding.

Vergessen Sie nicht, die Option „ Inhalt ausschneiden “ für die Zelle und den Rahmen zu entfernen (dies kann auf der rechten Seite im Bereich „Eigenschaften“ erfolgen). Der Inhalt der Zelle kann ihre Grenzen überschreiten; Zum Beispiel, wenn sich ein Dropdown-Menü in Ihrer Zelle befindet und Sie seinen Status mit einem Popup anzeigen möchten.

Hinweis : Wir verwenden diesen Zellenstil als Hauptstil. Machen Sie sich keine Sorgen, wenn Ihre Tabelle über zusätzliche Stile verfügt – wir behandeln das in den Abschnitten Tabellenstatus und Komponenten, nicht Überschreibungen.

Zelloptionen für eine Standardtabelle

Dieser Schritt könnte optional sein, aber wenn Ihre Tabelle Zustände benötigt, können Sie nicht darauf verzichten. Und das umso mehr, wenn es mehr als einen Rahmenstil in der Tabelle gibt.

Lassen Sie uns also zusätzliche Zellkomponenten erstellen, aus denen sich einfacher eine Tabelle aufbauen lässt. Wenn Sie mit einer Tabelle arbeiten, wählen wir die entsprechende Komponente in Abhängigkeit von ihrer Position in der Tabelle aus (z. B. in Abhängigkeit von der Art der Umrandung).

Um das zu tun, nehmen wir unsere Zellkomponente und erstellen daraus acht weitere Master. Wir müssen auch die entsprechenden Ebenen deaktivieren, die für Grenzen verantwortlich sind. Das Ergebnis sollte wie im Bild unten aussehen.

Die obere Reihe ist für die Zellen oben und in der Mitte der Tabelle. Die untere Reihe ist nur für die Zellen ganz unten. Auf diese Weise können wir die Zellen ohne Lücken hintereinander platzieren und die gleiche Strichbreite beibehalten.

Ein paar Beispiele:

Hinweis : Für jeden oben erstellten Rahmenstil wäre es gut, Master-Komponenten wie die zuvor beschriebenen hinzuzufügen.

Daher haben wir die Notwendigkeit ausgeschlossen, die Instanzen von Zellen zu überschreiben (um genau zu sein, die entsprechenden Ebenen zu deaktivieren). Stattdessen verwenden wir verschiedene Komponenten. Wenn nun beispielsweise eine Spalte einen anderen Stil als den Standard verwendet (Füllfarbe oder Rahmen), können Sie diese Spalte auswählen und einfach die relative Komponente ändern. Und alles wird gut. Auf der anderen Seite ist das manuelle Ändern einer Grenze jeder Zelle (Deaktivieren der entsprechenden Grenzen) ein Schmerz, mit dem Sie sich nicht beschäftigen möchten.

Jetzt sind wir bereit, Tabellen (im Sinne von Atomic Design – Organismen) aus den verschiedenen Zellkomponenten (Molekülen) zu erstellen, die wir hergestellt haben.

Anpassen der Tabelle

Das Ändern der Zeilenhöhe in der gesamten Tabelle ist relativ einfach: Markieren Sie die Tabelle, ändern Sie die Elementhöhe (in diesem Fall die Zellenhöhe, H im rechten Bereich im Abschnitt Eigenschaften) und ändern Sie dann den vertikalen Rand von Element auf 0. Das war's: Das Ändern der Zeilenhöhe dauerte zwei Klicks!

Ändern der Spaltenbreite: Markieren Sie die Spalte und ändern Sie die Breitengröße. Nachdem Sie den Rest des Tisches nach oben verschoben haben, wählen Sie den gesamten Tisch aus, indem Sie die Option Tide Up im Ausrichtungsbereich sowie das erste Element in der Dropdown-Liste unter dem Symbol ganz rechts verwenden.

Hinweis: Ich würde nicht empfehlen, Zeilen und Spalten zu gruppieren. Wenn Sie die Spaltengröße ändern, indem Sie die Elemente erweitern, erhalten Sie Bruchwerte für Breite und Höhe. Wenn Sie sie nicht gruppieren und am Pixelraster ausrichten, bleibt die Zellengröße eine Ganzzahl.

Die Hintergrundfarbe, der Strichtyp und die Inhaltsdaten können in der entsprechenden Komponente oder in einer der acht Zellen-Master-Komponenten (Zellen mit unterschiedlichen Strichstilen) geändert werden. Der einzige Parameter, der nicht sofort geändert werden kann, sind die Zellränder, zB Inhaltspaddings . Der Rest ist leicht anpassbar.

Komponenten, keine Überschreibungen

Wenn man sich ansieht, was wir am Ende bekommen haben, mag es wie ein Overkill erscheinen. Und es ist, wenn es in Ihrem Projekt nur eine Tabelle gibt. In diesem Fall können Sie einfach eine Zellkomponente erstellen und die Hintergrund- und Strichkomponenten weglassen. Fügen Sie sie einfach in die Zellenkomponente ein, erstellen Sie die Tabelle und nehmen Sie die erforderlichen Anpassungen für jede einzelne Zelle vor.

Aber wenn Komponenten in einer Bibliothek enthalten sind, die von einer Reihe anderer Dateien verwendet wird, kommt hier das Interessanteste.

Hinweis : *Ich empfehle nicht, die Hintergrundfarbe und den Strich in Komponenteninstanzen zu ändern. Ändern Sie sie nur im Master . Dadurch werden diese Instanzen mit Überschreibungen nicht aktualisiert. Dies bedeutet, dass Sie dies manuell tun müssten, und das versuchen wir zu vermeiden. Bleiben wir also bei den Masterkomponenten.*

Wenn wir einen zusätzlichen Typ von Tabellenzellen erstellen müssen (z. B. den Tabellenkopf), fügen wir den erforderlichen Satz von Masterkomponenten für Zellen mit den entsprechenden Stilen hinzu (genau wie wir es oben mit den acht Zellen mit unterschiedlichen Strichstilen getan haben) und benutze es. Ja, es dauert länger als das Überschreiben von Komponenteninstanzen, aber auf diese Weise vermeiden Sie den Fall, dass beim Ändern der Master diese Änderungen auf alle Layouts angewendet werden.

Tabellenzustände

Lassen Sie uns über die Zustände der Elemente der Tabelle sprechen. Eine Zelle kann drei Zustände haben: Standard, Schweben und Ausgewählt. Gleiches gilt für Spalten und Zeilen.

Wenn Ihr Projekt relativ klein ist, können alle Zustände durch Außerkraftsetzungen innerhalb von Instanzen Ihrer Tabellenkomponenten festgelegt werden. Aber wenn es ein großer ist und Sie in der Lage sein möchten, das Aussehen der Zustände in Zukunft zu ändern, müssen Sie für alles separate Komponenten erstellen.

Sie müssen alle acht Zellen mit unterschiedlichen Strichvarianten für jeden der Zustände hinzufügen (möglicherweise weniger, abhängig vom Strichstil). Und ja, wir brauchen auch separate Komponenten für die Hintergrundfarbe und den Strich für die Zustände.

Am Ende sieht es ungefähr so ​​aus:

Hier kommt ein bisschen Ärger ins Spiel. Wenn wir alles wie oben beschrieben machen (wenn wir den Zustand der Komponente von einem zum anderen ändern), besteht leider die Gefahr, dass der Inhalt der Zelle verloren geht. Wir müssen es aktualisieren, außer wenn der Inhaltstyp derselbe ist wie in der Master-Zelle. An diesem Punkt können wir nichts dagegen tun.

Ich habe Tabellen in der Mockup-Datei hinzugefügt, die auf verschiedene Arten erstellt wurden:

• Verwenden dieses Lernprogramms (separate Komponenten für die Stile der Zellen);
• Verwenden der Zellkomponente (Komponenten für Rahmen, Hintergrund und Inhalt);
• Verwenden der Zellkomponente, die alles vereint (mit nur Inhaltskomponenten zusätzlich).

Versuchen Sie, herumzuspielen und die Stile der Zelle zu ändern.

Fazit

Wenn Sie dieselbe Komponentenbibliothek in mehreren Projekten verwenden und in jedem von ihnen eine angemessene Anzahl von Tabellen haben, können Sie eine lokale Kopie von Komponenten erstellen (Zellenkomponenten mit Strichstilen und, falls erforderlich, Zellenkomponenten mit unterschiedlichen Status), passen Sie sie an und verwenden Sie sie im Projekt. Der Zellinhalt kann basierend auf lokalen Komponenten eingestellt werden.

Auch wenn Sie den Tisch für ein großes Projekt mit verschiedenen Arten von Tischen verwenden, lassen sich alle oben genannten Komponenten problemlos skalieren. Die Tabellenkomponenten können bis ins Unendliche und darüber hinaus verbessert werden, wie das Erstellen der Zellzustände beim Schweben und andere Arten von Interaktionen.

Fragen, Feedback, Gedanken? Hinterlasse unten einen Kommentar und ich werde mein Bestes tun, um dir zu helfen!

Figma Table Mockup herunterladen

Wie versprochen habe ich eine vollständige Version des Figma-Tabellenmodells erstellt, die Sie gerne für Lernzwecke oder für andere Zwecke verwenden können. Genießen!

Verwandte Lektüre

• „Atomdesign“, Brad Frost
• „Wie man einen komplexen Webtisch entwirft“, Slava Shestopalov, Smashing Magazine
• „Erstellen atomarer Komponenten in Figma“, Design- und Engineering-Team, littleBits
• „Figma-Tabellen: Datengitterdesign durch eine einzelne Zellkomponente“, Roman Kamushken, Setproduct

Nützliche Ressourcen

• Figma YouTube-Kanal
  Der offizielle Figma-Kanal auf YouTube – das ist das Erste, was Sie sich ansehen sollten, wenn Sie neu bei Figma sind.
• Google Tabellen synchronisieren
  Ein Figma-Plug-in, mit dem Sie Daten aus Google Sheets in Ihre Figma-Datei übertragen können. Dies sollte mit den Techniken aus diesem Tutorial gut funktionieren, aber Sie müssen etwas Zeit investieren, um alle Textebenen umzubenennen, damit dies richtig funktioniert.