Design-Tools sind ein wesentlicher Bestandteil der Gestaltung von Webprodukten. Die meisten dieser Tools sind jedoch so ressourcenintensiv, dass sie leistungsstarke Geräte voraussetzen und einen Großteil des Arbeitsspeichers belegen. Zudem sind die vollen Funktionen dieser Tools oft nur nach dem Kauf teurer Premium-Pakete nutzbar. Entwickler benötigen daher kostengünstige und ressourcenschonende Software, die auch auf Geräten mit durchschnittlicher Leistung lauffähig ist.
Einführung
Figma ist eine äußerst komfortable Option, die alle Anforderungen von Entwicklern erfüllt. Es handelt sich um ein kostenloses, browserbasiertes Designtool, das sich aktuell großer Beliebtheit erfreut. Dank seiner benutzerfreundlichen und gleichzeitig intuitiven Funktionen bietet es seinen Nutzern ein reibungsloses Erlebnis.
Hier besprechen wir eine vollständige Anleitung zur Nutzung von Figma mit all seinen Funktionen.
Früher mussten Designer und Entwickler ausschließlich per E-Mail kommunizieren. Das führte zu einem umständlichen Prozess mit zahlreichen Anhängen und einer mühsamen Handhabung. Dann kamen viele moderne Tools auf den Markt. Sie vereinfachten die Arbeitsabläufe für Designer und Entwickler. Ein weiteres großes Problem blieb jedoch die Synchronisierung der Projektdateien in den verschiedenen Tools. Daher bestand weiterhin ein großer Bedarf an einem effizienteren Prozess.
Dann kam Figma mit seinem reibungslosen Arbeitsablauf. Da es ein browserbasiertes Tool ist, kann es jeder problemlos mit jedem Betriebssystem nutzen. Anwender müssen keine unnötigen Programme installieren, um das Designtool zu unterstützen. Da Figma zudem cloudbasiert ist, bietet es jedem Nutzer stets die aktuellste Version des Designs. Auch die Zusammenarbeit und Kommunikation sind mit diesem Tool so einfach wie nie zuvor.
Figma bietet seine Dienste auch als Desktop-Anwendung für Windows und macOS an. Die Desktop-Anwendung ist plattformübergreifend, ähnlich wie Slack und Visual Studio Code. Obwohl die Desktop-Anwendung und die Browserversion nahezu identische Funktionen bieten, unterstützt die Desktop-Anwendung nativ lokale Schriftarten, während für die Browserversion der Figma Font Helper installiert werden muss.
Um einen übersichtlichen Arbeitsbereich zu bieten, ist die Benutzeroberfläche von Figma in drei Hauptbereiche unterteilt: eine große Arbeitsfläche in der Mitte, eine Seitenleiste links und eine Werkzeugleiste rechts. Auf der Arbeitsfläche lassen sich alle Designs platzieren. Die linke Seitenleiste enthält die Assets, Ebenen und Seiten einer Datei. Die rechte Werkzeugleiste bietet Zugriff auf alle Informationen zu den Elementen in der Datei.
Eine Datei besteht üblicherweise aus mehreren Seiten mit jeweils einer Arbeitsfläche. Designer nutzen diese Seiten, um verschiedene Teile der Datei übersichtlich zu organisieren. Daher sollten sich neue Figma-Nutzer zunächst mit den verschiedenen Seiten vertraut machen, um strukturiert damit arbeiten zu können.
Navigation innerhalb von Figma
- Durch Gedrückthalten der Strg-/Cmd-Taste und gleichzeitiges Scrollen nach oben/unten oder Drücken der + und – Tasten können Sie hinein- oder herauszoomen.
- Durch Gedrückthalten der Leertaste und Ziehen mit der Maus können Sie horizontal auf der Leinwand scrollen.
Es gibt viele weitere praktische Tastenkombinationen, mit denen Sie in Figma effizienter arbeiten können. Sie müssen sich diese aber nicht alle merken. Sie können sie jederzeit anzeigen lassen, indem Sie Strg/Cmd + Umschalt + ? drücken
Projektstile auswählen
In der rechten Seitenleiste können Sie alle Farben, Schriftarten, Raster und andere Stile für das Design auswählen. Um Ihre Auswahl aufzuheben, klicken Sie einfach irgendwo in die Arbeitsfläche oder drücken Sie die Esc-Taste. Alle Informationen zum Stil eines Elements erhalten Sie, indem Sie auf das Bearbeitungssymbol neben dem jeweiligen Element klicken.
Lesen Sie: So migrieren Sie von Drupal zu WordPress: Vollständiger Leitfaden
Stilelemente auswählen
Sie können eine bestimmte Ebene auswählen, indem Sie die Befehlstaste gedrückt halten und klicken oder indem Sie mit der rechten Maustaste auf das Element klicken, um das Menü aller verschachtelten Ebenen zu öffnen und die gewünschte Ebene auszuwählen.
Nach Auswahl eines Elements können dessen CSS-Informationen über den Tab „Code“ in der rechten Seitenleiste abgerufen werden. Dieser CSS-Code wird jedoch automatisch generiert und sollte nicht in Ihr Hauptprojekt kopiert werden.
Weitere wichtige Schritte
- Wenn Sie die Alt-Taste gedrückt halten und mit der Maus über ein Element fahren, können Sie die Abstände zwischen Elementen messen und diese korrekt positionieren.
- Um ein Asset zu exportieren, müssen Sie es als exportierbar markieren. Anschließend können Sie mit der Tastenkombination Umschalt + Befehl / Strg + E alle markierten Assets exportieren.
- Über die Registerkarte „Prototyp“ in der rechten Seitenleiste können Sie Informationen zu jeder Animation anzeigen.
- Durch Klicken auf das Chatblasen-Symbol in der oberen Symbolleiste oder durch Drücken der Taste „C“ gelangen Sie zur Kommentarfunktion und können durch Klicken an beliebiger Stelle im Design einen Kommentar zu jedem beliebigen Element verfassen.
Dies ist eine kurze Übersicht wichtiger Schritte, die Ihnen helfen, Figma optimal zu nutzen. Wir von Seahawk Media geben stets unser Bestes, um Ihnen die besten Informationen zu bieten und die Nutzung so einfach wie möglich zu gestalten. Um unsere verschiedenen Dienstleistungen kontaktieren Sie uns gerne . Besuchen Sie auch unseren Blog für weitere Informationen zu unseren Webprodukten.
