Die Idee eines neuen Werkzeugs in Figma.

Ein interaktiver Prototyp und eine illustrierte Beschreibung des Breakpoints-Tools, das in Figma implementiert werden könnte.

Hallo zusammen! In diesem Artikel erzähle ich Ihnen von der Funktionalität, die in Figma fehlt.

Einführung

Bei einem großen Projekt habe ich über mögliche Funktionen und Werkzeuge nachgedacht, die zu Figma hinzugefügt werden könnten. Einer davon ist Breakpoints.

Sie sollten zustimmen, dass es schön wäre, wenn Sie nicht nur ein flüssiges, sondern ein anpassungsfähiges Design erstellen könnten! Durch das Ändern der Seitenbreite passt sich das Design an die neuen Abmessungen an.

So konnten wir alle Anpassungen in der Entwurfsphase gründlicher testen. Für Webentwickler wäre es auch bequemer, zu sehen, wie sich ein bestimmtes Designelement in Echtzeit ändert, je nach Breite der Site. Außerdem können Kunden sofort sehen, wie ihre Site aussehen wird, unabhängig davon, welches Gerät sie verwendet haben Dein Link.

Was sind Haltepunkte?

Wenn wir vom Haltepunkt zum Haltepunkt springen, ändert sich das Design der Website und passt sich an die neuen Bedingungen an.

Haltepunkte arbeiten.

Wir haben drei Gestaltungsmöglichkeiten für eine Website-Seite: Design №1 - angezeigt auf Bildschirmen mit einer Breite von 400px bis 500px.Design №2 - wird auf Bildschirmen mit einer Breite von 500px bis 800px angezeigt.Design №3 - wird auf Bildschirmen mit einer Breite von 800px bis 1000px angezeigt.

Der Übergang von einem Bereich zu einem anderen ist ein Wechsel von einem Haltepunkt zu einem anderen.

Haltepunkte in anderen Programmen

Als es mir in den Sinn kam, dachte ich, es wäre schön, über die Prinzipien des Tools nachzudenken und es allen zu erzählen. Nachdem ich ein paar Minuten gegangen bin, wurde mir klar, dass ich nicht der erste war, der diese Idee hatte. Diese Funktionalität wurde bereits in Adobe Muse und WebFlow implementiert, sodass sie auch in Figma implementiert werden kann.

Wie wird es aussehen?

Bevor ich ein Werkzeug im Detail beschreibe, möchte ich zeigen, wie es als Ergebnis aussehen könnte. Stellen wir uns vor, wir haben bereits ein Design erstellt, alles angepasst, Haltepunkte gesetzt und in den Präsentationsmodus gewechselt.

Wenn Sie die Breite der Site ändern, passt sich das Seitendesign an die neuen Dimensionen an. Des Weiteren werde ich über die Funktionsweise des Tools und seiner Benutzeroberfläche berichten.

Wichtig!

Unabhängig von der tatsächlichen Bedeutung des Wortes „Haltepunkt“ werde ich in diesem Artikel eine etwas andere Bedeutung angeben. Hier nenne ich Haltepunkt eine Menge von Frames unterschiedlicher Größe. Es wäre jedoch richtig, jeden einzelnen Frame als Haltepunkte aufzurufen.

Das Funktionsprinzip des Tools und seiner Schnittstelle:

In der Abbildung unten sehen Sie ein Projekt mit einem erstellten Haltepunkt "Homepage", in dem wir drei Frames hinzugefügt haben: "Homepage 960", "Homepage 740" und "Homepage 480". Links befindet sich ein Fenster mit den Haltepunkten Liste der Haltepunkte und Frames, die sie enthalten. In der Mitte der Leinwand werden einem oder einem anderen Haltepunkt Frames hinzugefügt.

Schauen wir uns den Prototypen genauer an, in dem wir einen Haltepunkt erstellen und festlegen, um besser zu verstehen, was weiter besprochen wird. Stellen Sie sich vor, dass wir das Design der Homepage bereits in drei Größen von 960px, 740px, 480px erstellt haben und jede Größe einzeln angeben Seite im Bereich „Ebenen“ zur Vereinfachung. Beginnen wir mit dem Start:

Prototyp

In der Praxis müssen wir den Parameter „Haltepunktbreite“ nicht für jeden Frame separat konfigurieren. Es genügt, einmal einen Einstellungsstil zu erstellen, alle Frames auszuwählen, denen dieser Stil hinzugefügt werden soll, und ihn anzuwenden.

Detaillierte Beschreibung der Oberflächenelemente

1 Registerkarte „Haltepunkte“ Eine neue Registerkarte öffnet ein Fenster mit Haltepunkten, wenn Sie darauf klicken. Ähnliches gilt für das Bedienfeld „Ebenen“.

2 „Neuer Haltepunkt“ Wenn Sie auf „+“ klicken, erstellen Sie einen Haltepunkt (im Beispiel „Homepage“), in dem Sie Rahmen unterschiedlicher Größe hinzufügen können. Die Struktur des Haltepunkts ähnelt dem Bereich „Ebenen“. Zuerst erstellen wir Seiten / Haltepunkte, und dann wählen wir die erforderliche Seite / Haltepunkt aus und erstellen darin Rahmen. Im Fall der Registerkarte „Haltepunkte“ erstellen wir keinen Rahmen, sondern fügen den zuvor erstellten Rahmen im Bereich „Ebenen“ hinzu .

3 „Haltepunkte reduzieren“ Wenn Sie auf das Kennzeichen klicken, wird die Haltepunktliste ausgeblendet. Die Liste der Haltepunkte wird links erweitert und rechts reduziert.

4 „Haltepunkt“ Hier finden Sie eine Liste der Haltepunkte, die wir erstellt haben. In diesem Fall haben wir nur einen Haltepunkt „Homepage“.

5 „Hinzufügen eines Rahmens“ Wenn Sie auf „+“ klicken, wird das Fenster „Ebenen“ geöffnet, um einen oder mehrere Bilder auszuwählen, die zum Haltepunkt hinzugefügt werden müssen.

6 „Frames“ Dies sind Frames, die wir zum Haltepunkt „Homepage“ hinzugefügt haben. Im Bereich „Haltepunkte“ sowie im Bereich „Layer“ können Sie den Frame erweitern, um den Inhalt der Layer anzuzeigen und zu arbeiten Damit kann der Designer zum Bereich „Haltepunkte“ wechseln und mit einer separaten Webseite in allen Größen auf einer Leinwand arbeiten, ohne von anderen Webseiten abgelenkt zu werden und außerdem die Rahmenlayoutstruktur in der Ebenen ”Panel.

7 „Frame-Symbol“ Mit diesem Symbol können Sie schnell nach einem Frame mit der gewünschten Größe unter anderen Frames suchen. Das Symbol kann in den Frame-Einstellungen geändert werden. Derzeit stehen 7 Symbole zur Verfügung: ein Smartphone und ein Tablet in Hoch- und Querformat, ein Laptop, ein Desktop-Computer und ein Fernsehgerät. Es wird weiter im Detail beschrieben.

8 “Haltepunktname” Beim Erstellen eines Haltepunkts wird automatisch ein Name zugewiesen: „Haltepunkt 1“, „Haltepunkt 2“ usw. Der Haltepunkt kann umbenannt werden, indem Sie zweimal auf seinen Namen klicken.

9 „Rahmen aus Haltepunkt entfernen“ Um einen Rahmen aus dem Haltepunkt zu entfernen, klicken Sie mit der rechten Maustaste auf den Rahmen und wählen Sie „Rahmen entfernen“.

Haltepunkte der Symbolleiste

Oben in der Symbolleiste befindet sich ein Symbol. Wenn Sie darauf klicken, werden eine Liste der erstellten Haltepunkte und eine Schaltfläche zum Erstellen von Haltepunkten erweitert.

10 „Neuer Haltepunkt“ Sie können einen Haltepunkt erstellen, ohne zum Fenster „Haltepunkte“ zu wechseln. Durch Klicken auf „Neuer Haltepunkt“ wird ein neuer Haltepunkt mit einem Standardnamen erstellt.

11 Umbenennen Um einen Haltepunkt umzubenennen, müssen Sie auf das Symbol klicken, das angezeigt wird, wenn Sie auf den Haltepunkt zeigen.

12 „Hinzufügen von Frames zum Haltepunkt“ Es ist auch möglich, dem Haltepunkt Frames hinzuzufügen, ohne zum Fenster „Haltepunkte“ zu wechseln. Im „Layer“ -Feld können Sie das gewünschte Frame auswählen, dieses Popup-Fenster in der Symbolleiste öffnen und Wählen Sie den Haltepunkt aus, an dem Sie einen Rahmen hinzufügen möchten. Auf der linken Seite befindet sich ein Haltepunkt für die Startseite, an dem wir einen Rahmen hinzufügen möchten, und rechts ist bereits ein Rahmen zum Haltepunkt hinzugefügt worden.

Mehr zu den Rahmeneinstellungen

Sehen wir uns an, wie die Frames konfiguriert werden, die wir zum Haltepunkt hinzufügen. Durch Auswahl des gewünschten Frames können Sie im Bereich „Design“ den neuen Parameter „Haltepunktbreite“ hinzufügen.

13 “Create Parameter” Durch Klicken auf “+” wird ein Rahmenparameter erstellt.

14 „Minimum Width“ Dies ist die Mindestbreite, um die der Rahmen verkleinert wird.

15 „Maximale Breite“ Dies ist die maximale Breite, bis zu der sich der Rahmen erstrecken kann.

16 “Symbol” Dies ist ein Symbol, das neben dem Bildnamen im Bedienfeld „Haltepunkte“ angezeigt wird.

17 „Width Styles“ Durch Klicken auf „Width Styles“ wird ein Fenster geöffnet, in dem Sie den zuvor erstellten Einstellungsstil auswählen können.

18 „Stil bearbeiten“ Wenn Sie auf das Symbol klicken, wird ein Standard-Bearbeitungsfenster geöffnet, in dem Sie alle Stileinstellungen ändern, den Namen ändern und eine Beschreibung hinzufügen können.

Wie wirken sich Rahmeneinstellungen aus?

Lassen Sie uns die Beispiele analysieren, um zu verstehen, wofür jede Einstellung des Parameters „Haltepunktbreite“ verantwortlich ist. Das Bild besteht aus zwei Teilen: Auf der linken Seite - Rahmeneinstellungen. Auf der rechten Seite - wofür die Einstellungen im Präsentationsmodus verantwortlich sind. Orange zeigt die Arbeitsbreite des Rahmens an. Dies ist die Breite, die wir beim Erstellen eines Rahmens festlegen.

Rahmen Rahmen Rahmen

Präsentationsmodus und detaillierte Beschreibung der Benutzeroberfläche

Dies ist der aktuelle Modus. Sie haben es bereits am Anfang des Artikels im Video gesehen. Im neuen aktuellen Modus wurde unten eine Maßskala angezeigt, in der Rahmenumrandungen und andere Steuerelemente vermerkt sind, die wir später besprechen werden. Schaltfläche und Schieberegler an den Ecken.

Schauen wir uns genauer an:

MagnetDie Magnetfunktion funktioniert fast nach dem gleichen Prinzip wie die Hilfslinien in Figma oder Photoshop. Wenn wir den Schieberegler nahe genug an das Minimum, Maximum oder die Arbeitsbreite der Rahmen bewegen, wird er magnetisiert.

Die Funktion hat drei Modi: 1) Aus - Sie können die Breite des Designs beliebig reduzieren und vergrößern; Der Schieberegler wird nicht magnetisiert.2) Ein - Sie können die Breite des Designs beliebig verkleinern und vergrößern. Wenn Sie sich jedoch der Mindest-, Höchst- und Arbeitsbreite der Rahmen nähern, wird der Schieberegler magnetisiert.3) Hart - Verringern und Vergrößern der Breite der Schieber bewegt sich nur entlang der Punkte von Minimum, Maximum und Arbeitsbreite von Frames ohne Zwischengrößen.

Diese Funktion wird benötigt, um problemlos zwischen den minimalen, maximalen und Arbeitsrahmenbreiten zu wechseln.

4) EingabefeldEs ist ein Feld für das genaue Design der Eingabebreite. Wenn Sie den Entwurf in einer bestimmten Breite sehen möchten, ist es viel einfacher, einen Wert in das Feld einzugeben, als den Schieberegler manuell entlang der Skala zu verschieben.

5) SliderIt dient als Indikator für die aktuelle Breite des Designs sowie als Schieberegler, mit dem Sie die Breite des Designs verringern oder vergrößern können.

6) Skalieren verkleinernDie Skalierung der Breite wird reduziert, wenn nicht alle Haltepunkte auf dem Bildschirm angezeigt werden.

7) Scale upEs vergrößert die Größenskala, wenn Sie einen einzelnen Haltepunkt genau testen müssen.

8) MarkerA Marker zum Ändern der Breite des Designs.

Nachdem Sie den Artikel gelesen und verstanden haben, wie das Tool funktioniert, können Sie sich eine weitere Demonstration des Tools ansehen:

Das Ende

Natürlich ist dies nur ein Prototyp des Tools. Es gibt keine Garantie dafür, dass es jemals in Figma erscheinen wird, aber ich habe mich trotzdem entschlossen, die Idee mitzuteilen.