Figma Adaptive Templates: Wie Sie eine flexible Designkomponente der mobilen iOS-Navigation erstellen



    Bei der Erstellung eines neuen Produkts möchte ich es besser machen als das vorherige, um eine elegante Lösung zu finden, mit der komfortable und flexible Komponenten des Design-Systems in Figma erstellt werden können .

    Beim Erstellen eines Satzes von Komponenten-iOS-Vorlagen für Figma entschied ich mich, mit der Registerkartenkomponente zu experimentieren. Ich möchte Sie daran erinnern, dass dies in den iOS-Richtlinien die untere Navigation ist. Ich wollte, dass der Inhalt bei der Größenänderung logisch und optimal ist. Ich wollte es für alle iOS-Geräte so anpassbar machen, wie es Figma und die Einschränkungen erlauben.

    Wenn Sie Figma verwenden , empfehle ich übrigens , unsere vorgefertigten Konstruktionssysteme zu beachten . Sie helfen Freiberuflern dabei, mehr Aufträge pro Monat abzuwickeln, Programmierer können selbst wunderschöne Anwendungen erstellen, und die Timlids durchlaufen schnellere Sprints, indem sie fertige Design-Systeme für Teamwork verwenden.

    Und wenn Sie ein ernstes Projekt haben, ist unser Team bereit, ein Konstruktionssystem auf der Grundlage unserer Entwicklungen innerhalb der Organisation einzusetzen und es mithilfe von Figma an spezifische Aufgaben anzupassen. Web / Desktop und jedes Handy. Wir sind auch mit React / React Native vertraut. Schreiben Sie an T: @kamushken


    Woraus besteht die Tab-Leiste?


    Die Registerkartenleiste ist eine Reihe von Symbolen mit oder ohne Signaturen, indem Sie auf den entsprechenden Bereich der Anwendung klicken. Der aktive Bereich wird immer farbig hervorgehoben. Richtlinien empfehlen die Verwendung von drei bis fünf Abschnitten in Anwendungen, die die Tab-Leiste als Hauptnavigationssteuerung verwenden.

    Adaptive Komponente


    Bisher bietet kein Interface-Design-Tool volle Anpassungsfähigkeit. Figma ist keine Ausnahme, es verwendet bereits den klassischen Constraints-Ansatz, aber selbst damit kann viel unternommen werden. In der folgenden Animation sehen Sie beispielsweise das ideale und in der Tat adaptive Verhalten der Registerkartenleiste auf allen Geräten:



    Elemente werden proportional zu den Einzügen zwischen ihnen verschoben. Im Folgenden werde ich auf einfache Weise darüber sprechen, wie man dieses Verhalten erreichen kann.

    Das Problem liegt in den Icons


    Ein gutes Entwurfssystem in Figma enthält notwendigerweise eine Bibliothek mit Symbolen. Zumindest das Hauptsystem. Dadurch müssen sie nicht jedes Mal manuell aus SVG-Dateien importiert werden.

    Für immer, für jedes Komponentensymbol, aus dem Sie sich mit der Zeit eine praktische Bibliothek zusammenstellen, sollte sich der Scale-Modus befinden. Sie erhalten dann ein flexibles Symbol, das in allen Dimensionen verwendet werden kann: 16x16, 44x44 usw.

    Am wahrscheinlichsten ist es dieses Symbol im linken Bereich von Figma, das Sie in die Tab-Leiste ziehen und eine Beschriftung hinzufügen, wenn Sie mit dem Erstellen der Komponente beginnen. Das Problem ist, dass bei solchen Konstruktionen das Symbol beim Ändern der Größe immer in der Tab-Leiste abgeflacht wird, wenn Sie eine adaptive Komponente erhalten möchten:



    Es gibt mehrere Möglichkeiten, das Problem zu lösen

    Methode 1 - Trennen Sie die Symbole sofort


    Ich habe oben vorgeschlagen, dass in Ihrem Entwurfssystem alle Komponenten der Symbole im Skalenmodus bedeutet, dass Sie beim Erstellen der Registerkartenleiste sofort die Verbindung damit trennen und jedes Symbol einzelnen Center-Codes zuordnen können. Sie bleibt in dem Rahmen, in dem der Skalierungsmodus eingestellt werden muss.

    • Plus : Geschwindigkeit.
    • Minus : Trennen der Komponente vom System.



    Verwenden Sie die Funktion Instanz trennen im Kontextmenü für die Symbolkomponente.

    Die zweite Methode besteht darin, zwei Arten von Symbolen im System zu speichern


    Diese Methode kann geeignet sein, wenn im Projekt nicht so viele Symbole vorhanden sind. Duplizieren Sie einfach die gesamte Scale-Sammlung, lösen Sie auf, ändern Sie das Framework in Center, erstellen Sie die Komponenten neu und senden Sie sie an eine neue Seite mit einem anderen Namen. Vor kurzem scheint es mir eine vernünftige Idee zu sein, dass mehrere hundert Icons in jedem System für Figma als skalierbar oder zentriert gespeichert werden können.

    • Plus : Flexibilität.
    • Minus : Wenn es viele Icons gibt, ist es schwieriger, sie zu organisieren.




    Das linke Symbol wird proportional gestreckt, während nur der Rahmen um das Symbol rechts gestreckt ist.

    Methode 3 - Zwischenkomponente hinzufügen


    Gemäß dem Konzept des Atomdesigns wird eine solche Komponente als Molekül betrachtet. Sie packen ein Symbol und eine Signatur und können dann das Zentrum und die beiden Zentren festlegen. Für das Molekül selbst legen Sie den Skalierungsmodus fest, wenn Sie sie in Ihre Tab-Leiste setzen. Daher werden die Icons selbst ignoriert.

    Außerdem ist ein Beschriftungssymbol ein effektives Navigationsmuster. Warum sollte man diese Komponente nicht an anderer Stelle im Projekt wiederverwenden?

    • Plus : Effizienz.
    • Minus : eine zusätzliche Komponente des Systems.




    Ich persönlich benutze die dritte Methode. Ich finde, er ist eleganter und professioneller. Vielleicht hast du deine eigenen Wege? Schreiben Sie in die Kommentare.

    In letzter Zeit habe ich während meiner Designrecherche meine Gedanken live in meinem nützlichen Telegram Channel Designer veröffentlicht .

    PS: Ja, und es war der Querpfeiler meines eigenen Artikels , der zuvor auf einer anderen Ressource veröffentlicht wurde

    Jetzt auch beliebt: