8 Tipps, wie Sie Ihr Figma-Projekt meistern

Eine perfekte Arbeitsweise ist individuell und unterscheidet sich von Person zu Person, von Unternehmen zu Unternehmen. In diesem Artikel behandeln wir, wie wir bei Broworks unsere Projekte in Figma organisieren, strukturieren und für die Entwicklung in Webflow vorbereiten. Also, lass uns darauf eingehen!

‍

Es gibt ein paar Phasen in diesem Prozess, die wir in zehn aufgeteilt haben, um die Dinge etwas leichter verdaulich zu machen, also hier sind sie:

1. Skizzieren und Erkunden
2. Komponenten
3. Stile
4. Seiten
5. Lagen
6. Bilder vorbereiten
7. Elementzustände
8. Rich-Text

‍

1. Skizzieren und Erkunden

In dieser allerersten Phase unseres Prozesses ist es am besten, zunächst auf einer separaten Seite in Figma zu skizzieren und zu erkunden, bis die künstlerische Leitung bestätigt ist. Dies ist wahrscheinlich der beste Weg, um Ihr Projekt sauber oder organisiert zu halten. Wenn Sie am Anfang anfangen, alles zu organisieren, besteht eine hohe Wahrscheinlichkeit, dass sich die Dinge später während des Prozesses ändern, was zeitaufwändig sein kann, selbst wenn Sie Komponenten und alles andere erstellt haben.

Wenn Sie gleich zu Beginn nach dem richtigen Ansatz suchen, können Sie auch besser verstehen, wie die Dinge ablaufen werden, und Sie werden weniger stressig.

‍

2. Komponenten

Sobald wir eine klare künstlerische Richtung festgelegt haben, sollten wir damit beginnen, unsere Inhalte zu präsentieren und Assets zu erstellen, die einfach zu verwenden und zu aktualisieren sind. Wenn wir Komponenten erstellen, erstellen wir sie am besten für Elemente, die wir am häufigsten verwenden, wie Schaltflächen, Kopf- und Fußzeilen, Formulare, Portfolios und alle Bereiche, die wir in unserem Design verwenden werden. Das funktioniert so, dass wir eine Hauptkomponente erstellen, die wir duplizieren können, wo immer wir sie benötigen. Wenn Sie eine duplizierte Version der Komponente bearbeiten, gelten die Effekte nur für diese einzelne Komponente. Wenn Sie jedoch die Hauptkomponente bearbeiten, wird der Effekt auf alle anderen angewendet. Wenn Sie auf den Tab „Assets“ in der oberen linken Ecke klicken, können Sie auf alle Hauptkomponenten gleichzeitig zugreifen.

3. Stile

Wir können das in ein paar verschiedene Stile aufteilen, die wir verwenden:

• Textstile
• Farbstile
• Rasterstile
• Effekt-Stile

Stile verwenden wir ähnlich wie Komponenten, aber der Unterschied besteht darin, dass wir sie nur für die oben genannten spezifischen Dinge erstellen. Sie funktionieren fast wie Ordner, die wir beschriften und sogar Stil in einen Stil einordnen können, um eine noch bessere Organisation zu ermöglichen. Von dort aus können wir sie auf jedes Element anwenden, das zu dieser Gruppe gehört. Wenn wir zu irgendeinem Zeitpunkt etwas davon aktualisieren müssen, wird die Aktualisierung an einem Element auf alle mit demselben Stil angewendet. Alle Stile befinden sich auf der rechten Registerkarte „Design“ und Sie können sie alle auf einmal sehen, wenn nichts ausgewählt ist.

4. Seiten

Seiten werden in der oberen linken Leiste mit dem Titel „Seiten“ gespeichert. Dort können Sie durch Klicken auf das Symbol „+“ so viele Seiten erstellen, wie Sie möchten. Die Verwendung von Seiten ist eine gute Möglichkeit, Ihr Projekt zu organisieren, indem Sie sie für verschiedene Zwecke verwenden und unterschiedlich beschriften. Du kannst sie zum Beispiel verwenden, um Phasen deines Projekts zu organisieren, wie zum Beispiel „Moodboard“, „Wireframe“, „Mobiles Design“ usw. Das hilft uns, uns nur auf einen Teil des Projekts zu konzentrieren, ohne dass uns zu viele andere Dinge von dem ablenken, worauf wir uns konzentrieren müssen.

5. Schichten

Wir alle wissen, dass Designer, die ihre Ebenen in Figma beschriften, fast nicht existieren, aber das kann sowohl Ihnen als auch anderen (insbesondere Entwicklern und Projektmanagern) helfen, schneller zu finden, wonach sie suchen, wenn sie keine „Bearbeiten“ -Rechte in Ihrer Figma-Datei haben. Abgesehen von der Kennzeichnung ist es auch sehr nützlich, zusammengehörende Elemente zu gruppieren, um Projekte einfacher, übersichtlicher und besser zu organisieren.

‍

6. Bilder vorbereiten

Designer bringen Bilder sehr oft mithilfe von „Maske“ in bestimmte Formen und noch häufiger, indem sie eine bestimmte Form verwenden und ein Bild darin platzieren. Obwohl dies für einen Designer sehr praktisch ist, ist es für einen Entwickler sehr schwierig. In unserem Team sind die Designer dafür verantwortlich, Bilder in ihrer Originalgröße vorzubereiten und zu exportieren, indem sie sie so weit wie möglich komprimieren, um die Gesamtqualität beizubehalten und sie in ihrer Originalgröße beizubehalten. Wir tun das, weil der Entwickler auf diese Weise dieses Bild in Webflow bearbeiten kann, aber er möchte den gleichen Effekt wie im Design erzielen. Denken Sie daran, dass jedes Bild im JPG-Format (sofern es keinen transparenten Hintergrund hat) mit einer maximalen Größe von 300 KB vorliegen sollte.

‍

7. Staaten der Elemente

Jedes Projekt hat Elemente, die je nach Verwendung unterschiedliche Status benötigen, wie Buttons, Formulare, Textlink und Linkblock, also so ziemlich alles, was ein Link ist oder etwas tut, wenn Sie mit der Maus darauf zeigen oder darauf klicken. Aber es geht nicht nur darum, den Mauszeiger zu bewegen und zu klicken, hier sind alle Zustände, die interaktive Elemente haben sollten:

• Aktuell (inaktiver Zustand)
• Schweben
• Gepresst
• Konzentriert
• Besucht

Alle interaktiven Elemente sollten alle diese Zustände haben und daher sollte der Designer all das vorbereiten, bevor das Projekt mit der Entwicklung fortfährt.

Für die Formulare sollten Sie mindestens Erfolgs- und Fehlermeldungen erstellen, damit Benutzer nicht mit dem Standarddesign konfrontiert werden, sobald Benutzer auf diese stoßen.

8. Reichhaltiger Text

Nicht jede Website hat das, aber wenn eine Website Vorlagen wie einen Blog und ein Portfolio hat, müssen Sie Rich-Text erstellen. Dazu gehört das Erstellen einer Zeichenflächenseite mit den folgenden Elementen:

• Titelbild (falls erforderlich)
• Titel von H1-H6
• Absatztext
• Geordnete und ungeordnete Liste
• Text zitieren
• Bild-/Video-Platzhalter mit Untertiteltext
• Textlink

Sie müssen dies getrennt halten, da in der Entwicklung, insbesondere in Webflow, Vorlagen separate Klassen haben, die Sie stylen müssen, und manchmal ist es nicht sinnvoll, H-Titel im Vorlagentext dieselbe Größe zu haben, wie Sie sie auf einer Website haben. Es ist also immer besser, dies für jedes Projekt zu erstellen.