11 nützliche Figma-Shortcuts für einen schnelleren Arbeitsablauf

Figma ist ein leistungsstarkes Designtool und die erste Wahl der meisten UX/UI-Designer als Designprogramm. Sie können in Figma so viel erstellen, und es ist ein einfach zu erlernendes Programm.

Als Designer möchten wir oft Zeit sparen, also verbringen wir unsere kostbaren Stunden damit, gute Arbeit zu leisten, anstatt Menüs zu durchsuchen. Wir haben eine Liste nützlicher Figma-Shortcuts zusammengestellt, die Ihren Arbeitsablauf optimieren.

1. Wählen Sie das Skalierungswerkzeug aus

Mit diesem einfachen Tastenkürzel können Sie Ihre Elemente schnell skalieren. Drücken Sie die K -Taste und wählen Sie dann das Objekt aus, dessen Größe Sie ändern möchten. Alles, was Sie tun müssen, ist, einen Ankerpunkt anzuklicken und zu ziehen, und Ihr Objekt bleibt skaliert, während es sich an die gewünschte Größe anpasst.

2. Wählen Sie das Rahmenwerkzeug aus

Das Rahmenwerkzeug ist ein häufig verwendetes Werkzeug in Figma, wenn mehrere Rahmenplatinen für Prototypendesigns erstellt werden. Wenn Sie F auf Ihrer Tastatur drücken, wird das Werkzeug mit einem Fingertipp aufgerufen, sodass Sie Ihren Rahmen schnell zeichnen oder seine Größe ändern können.

Sie können den Rahmen direkt zeichnen, indem Sie mit dem Mauszeiger klicken und ziehen, oder Sie können nach Auswahl des Rahmenwerkzeugs die gewünschten Größen in die Maßfelder im Rahmenmenü rechts eingeben.

3. Wechseln Sie zwischen Design- und Prototyp-Modus

Mit der Tastenkombination Umschalt + E können Sie zwischen dem Designmodus und dem Prototypmodus wechseln. Die gleiche Verknüpfung funktioniert unabhängig davon, in welchem ​​Modus Sie starten und in welchen Modus Sie wechseln. Sehen Sie sich unseren Leitfaden für Anfänger zu Figma an, um die Unterschiede zwischen diesen Modi zu erfahren.

Alternativ gibt es spezifischere Shortcuts für diesen Zweck. Alt (Windows) / Option (Mac) + 8 kann verwendet werden, um vom Prototyp-Modus in den Design-Modus zu wechseln, während Alt (Windows) / Option (Mac) + 9 vom Design-Modus zurück in den Prototyp-Modus wechselt. Offensichtlich ist Shift + E einfacher, aber es ist schön, Optionen zu haben.

4. Wählen Sie das innerste Element mit einem Klick (Deep Select)

Beim Entwerfen in mehreren Ebenen oder mit eingebetteten Bildern kann es schwierig sein, schnell ein Element auszuwählen. Verwenden Sie stattdessen diese Verknüpfung, um Zeit zu sparen, indem Sie gefühlt ein Dutzend Mal klicken, um Ihre unterste Ebene auszuwählen.

Halten Sie auf einem Mac Cmd gedrückt und klicken Sie auf das Element, und unter Windows Strg + Klicken Sie auf . Eine einfache Taste erspart minutenlanges sinnloses Klicken zur Auswahl eines Elements auf der untersten Ebene.

5. Bewegen Sie sich eine Ebene nach außen, nachdem Sie das innerste Element ausgewählt haben

Sobald Sie das innerste Element Ihres Designs ausgewählt haben, stellen Sie möglicherweise fest, dass Sie ein Element eine Ebene näher auswählen wollten – ganz einfach. Sobald Sie das innerste Element gefunden haben, drücken Sie Shift + Enter , um eine Ebene zurück zu gehen. Sie können dies für alle Ebenen tun.

6. Alle Ebenen reduzieren

Beim Entwerfen in Figma beginnt sich Ihr Ebenenbedienfeld zu erweitern und sieht möglicherweise etwas chaotisch aus, insbesondere wenn Sie HTML in ein Figma-Design konvertieren. Um Ihre Ebenen zu reduzieren, drücken Sie einfach Alt + L (Windows) oder Option + L (Mac).

Wenn Sie ein Element ausgewählt haben, während Sie diese Tastenkombination verwenden, bleibt die Ebene mit diesem Element geöffnet. Wählen Sie eine beliebige Stelle außerhalb der Zeichenfläche aus, um die Auswahl aller Elemente aufzuheben, und verwenden Sie die Verknüpfung, um alle Ebenen zu reduzieren.

7. Layoutraster ein- oder ausblenden

Die Verwendung von Layoutrastern ist der beste Weg, um sicherzustellen, dass Ihr Design bestimmte Proportionen erreicht und für verschiedene Geräte korrekt skaliert werden kann. Obwohl sie hilfreich sind, möchten Sie nicht, dass die Raster immer angezeigt werden.

Das Ein- und Ausschalten von Layout-Rastern ist auf einem Mac anders als auf Windows. Drücken Sie auf einem Mac Strg + G , um es ein- oder auszuschalten. Wenn Sie Windows verwenden, handelt es sich um eine Tastenkombination mit drei Tasten. Strg + Umschalt + 4 . Sie sind unterschiedlich, aber sie tun dasselbe.

8. Platzieren Sie mehrere Fotos gleichzeitig

Wenn Sie ein Layout mit Platzhalterformen für Ihre Bilder entworfen haben, kann es frustrierend sein, die Bilder einzeln einzufügen. Mit dieser Verknüpfung können Sie mehrere Fotos platzieren und einfach den Platzhalter – oder eine beliebige Stelle auf Ihrer Zeichenfläche – auswählen, um jedes einzelne Foto zu platzieren.

Drücken Sie für Mac-Benutzer Cmd + Shift + K , um das Dialogfenster zum Suchen Ihrer Bilder aufzurufen. Unter Windows können Sie mit Strg + Umschalt + K mehrere Fotos finden und in Ihrem Figma-Design platzieren. Wenn Sie in Figma eine Master-Vorlage erstellen, ist dies eine großartige Abkürzung.

9. Kopieren Sie ein beliebiges Bild als PNG

Wenn Sie Bilder in Ihrem Figma-Design verwenden, haben Sie möglicherweise eine Auswahl an Dateiformaten, aber vielleicht benötigt Ihr Kunde PNGs. Sie können jedes Bild als PNG kopieren, unabhängig von seinem Ursprungsformat.

Wählen Sie Ihr ausgewähltes Bild aus und drücken Sie Cmd + Shift + C auf dem Mac und Strg + Shift + C auf Windows, um es als PNG zu kopieren. Sie können diese Verknüpfung ganz einfach verwenden, um ein hochwertiges Bildformat sicherzustellen, insbesondere wenn Sie Präsentationen mit Figma erstellen.

10. Eyedrop eine Farbe von überall

Das Eyedropping einer Farbe ist eine praktische Funktion, wenn Sie eine Farbe von einem Teil Ihres Designs in einen anderen übernehmen. Mit dieser schnellen Tastenkombination können Sie die Pipette in Sekundenschnelle hochziehen und eine Farbe von einer beliebigen Stelle auf Ihrer Zeichenfläche aus stanzen.

Drücken Sie auf dem Mac Strg + C und unter Windows die Buchstabentaste I . Sobald Sie die Tastenkombinationen gedrückt haben, bewegen Sie das Pipettenziel über die Farbe, die Sie verwenden möchten, und klicken Sie einmal, um die Farbe zu swatchen.

11. Öffnen Sie die Registerkarte Ressourcen

Auf der Registerkarte „Ressourcen“ befinden sich die Menüs „Komponenten“, „Plugins“ und „Widgets“. Es gibt zwar keine Verknüpfungen, um diese Menüs einzeln zu öffnen, aber die Ressourcenverknüpfung spart dennoch etwas Zeit: Umschalt + I . Sie können Plugins verwenden, um Mockups zu erstellen und zu Ihren Figma-Designs hinzuzufügen.

Sparen Sie Zeit mit Figma-Shortcuts

Designer verwenden in der Regel Abkürzungen bei ihrer Arbeit, um Zeit und Energie zu sparen, und die Arbeit in Figma ist nicht anders. Diese Figma-Shortcuts kratzen nur an der Oberfläche der Shortcuts, die Sie im Programm verwenden können.

Diese Abkürzungen sind nicht offensichtlich oder leicht zu finden, also bringen Sie Ihre neuen Erkenntnisse zu Figma und genießen Sie die Informationen, die viele Designer Monate oder Jahre brauchen, um sie herauszufinden.