.png)
Wie sich viele von Ihnen vielleicht erinnern, hatten wir in den Anfängen des UI-Designs nicht die hervorragenden Tools, die wir jetzt haben. Wir haben uns mit Photoshop-Dateien mit Tausenden von Ebenen oder riesigen Illustrator-Dateien befasst, bis Sketch auf den Markt kam, viele unserer Probleme löste und zu einem unverzichtbaren Tool bei UXDivers wurde. InVision spielte damals eine wichtige Rolle, wenn es um die Präsentation, das Prototyping und die Interaktion mit dem Kunden ging. Dann kam Figma, das Potenzial zu haben schien, aber zu der Zeit noch sehr jung war. Nachdem wir es jedoch eine kurze Zeit lang genutzt und die Unterstützung der Community dahinter gesehen hatten, wurde der gesamte Prozess schnell durch ein einziges Tool ersetzt, und wir haben den Wechsel ohne zu zögern vollzogen.
Aufgrund unserer Erfahrung in der Zusammenarbeit mit Figma seit den Anfängen sind wir der Meinung, dass es sehr hilfreich ist, einige bewährte Methoden zu kennen. Diese Praktiken helfen dabei, Designprozesse und Entwicklung zu rationalisieren, sowohl in unserer Test-UI-Kit Produkt und in den zahlreichen Dienstleistungen, die wir anbieten.
Obwohl dies eine relativ neue Ergänzung ist, hat sie in vielen Aspekten wie Farben, Typografie, Eigenschaften, Prototyping und vielem mehr ein enormes Potenzial. Aber die Grundlagen wären, Bibliotheken zumindest für die Dinge zu haben, die wir am häufigsten verwenden, zum Beispiel:
Auf diese Weise wird der Designprozess erheblich beschleunigt und wir vermeiden Inkonsistenzen in der Benutzeroberfläche.
Die Verwendung von Komponenten und Varianten in unseren Designs ist entscheidend, um die Konsistenz aufrechtzuerhalten und zu vermeiden, dass Änderungen an demselben Element an mehreren Stellen wiederholt werden müssen.
Dies ist ein weiteres leistungsstarkes Tool, das anfangs etwas knifflig sein kann, aber zweifellos einer unserer besten Freunde ist, wenn es darum geht, Elemente zu entwerfen, sei es für eine Komponente, Elemente auf einem Bildschirm zu organisieren, unsere Designs responsiv zu gestalten und vieles mehr.
Hand in Hand mit dem Autolayout geht die Verwendung von Einschränkungen, die für das Verständnis des Verhaltens von Elementen bei der Änderung ihres Containers von grundlegender Bedeutung sind. Der Hauptnutzen wäre, wenn wir sicherstellen müssen, dass sich unser Design auf verschiedenen Bildschirmgrößen gut verhält.
In diesem Zusammenhang könnten wir es auch mit der Verwendung von Variablen und Min/Max-Größen verknüpfen.
Zum Beispiel können wir zwei Tastengrößen haben: Mobil und Desktop. Wenn unser Design von einem Modus in einen anderen wechselt, wird dies auch für unsere Schaltfläche der Fall sein.
Fordere dich heraus, nur Rahmen zu verwenden, keine Gruppen oder Rechtecke. Rahmen haben viele Funktionen und vereinfachen und verbessern im Allgemeinen Ihre Designs. Vermeiden Sie es, Rechtecke als Hintergrund hinzuzufügen, dasselbe gilt für Bilder. Rahmen ermöglichen einen Eckenradius und als ob das nicht genug wäre, ermöglichen sie neben vielen anderen Vorteilen das automatische Layout.
Denken Sie daran, dass normalerweise ein Team arbeitet und Sie nicht allein sind. Daher muss alles zugänglich und leicht verständlich sein, egal ob für einen anderen Designer oder für den Entwickler, der Ihr Design später implementiert.
Dies ist zwar keine einzigartige Funktion von Figma, aber es gibt einige Tools, die uns dabei helfen:
Tipp: Vor Kurzem wurde die Option hinzugefügt, ein Trennzeichen zu erstellen, wenn eine Seite mit drei „---“ benannt wird. Verabschieden Sie sich von den „________“ -Seiten, die wir alle erstellt haben, um die Dinge zu organisieren.
In Bezug auf die Organisation hat sich die Verwendung von Branches bewährt. Obwohl es in der Entwicklung üblich ist, ist es im Design nicht so üblich, aber es ist sehr nützlich. Wir können einen bestimmten Branch erstellen, den wir mit einem Kunden teilen, während wir an etwas anderem arbeiten, ohne dass es zu Überschneidungen kommt. Eine weitere häufige Anwendung ist, wenn wir bereit sind, an einer neuen Funktion zu arbeiten. Erstellen Sie einen Branch und führen Sie alle erforderlichen Tests oder Änderungen durch, ohne die Master-Datei zu ändern.
Vorsicht: Zumindest vorerst werden Kommentare, die in jedem Branch gemacht wurden, nicht mit dem Master zusammengeführt; sie bleiben nur in diesem Branch sichtbar.
Branching ist in den Plänen Organization und Enterprise verfügbar.
Nicht zuletzt der Einsatz eines Designsystems. Vieles von dem, was wir uns zuvor angesehen haben, könnte Teil davon sein und als Bibliothek in beliebig vielen Dateien verwendet werden.
Ein Designsystem zu haben, ist etwas, das sich ständig weiterentwickelt. Für Testkit, es ist wichtig, eine Bibliothek mit allen notwendigen Teilen zu haben, um jede beliebige Benutzeroberfläche zu erstellen oder neue Elemente hinzuzufügen und gleichzeitig die Essenz unseres Kits beizubehalten.
Wir könnten einen ganzen Blog über jede dieser Optionen verfassen, aber im Moment ist dies eine Möglichkeit, sich mit den Konzepten vertraut zu machen und zu verstehen, wie man sie implementiert. Es ist wichtig, einige der Funktionen von Figma zu kennen, die Ihre Produktivität erheblich verbessern und Ihnen viel Zeit sparen werden.
Kennen Sie eine dieser Praktiken in Figma oder wenden Sie sie an? Bitte teile sie mit Leuten, die sie hilfreich finden könnten.
