Figma Design Tool beherrschen: Nützliche Tipps und Anleitungen

Jeder, der schon einmal mit Google Docs gearbeitet hat, weiß, wie praktisch es ist – ganz einfach, Ihre Dateien im Web zu bearbeiten, zusammenzuarbeiten und zu speichern. Was wäre, wenn Webdesigner dasselbe Tool für ihre Projekte hätten? Nun, sie haben tatsächlich einen und es ist Figma. In diesem Figma-Test führen wir Sie durch die herausragendsten Funktionen der Plattform, die sie zum bevorzugten Werkzeug von Designern machen.

Was ist Figma

Figma ist ein cloudbasiertes Designtool, das im Gegensatz zu anderen gängigen Designtools, die ausschließlich unter Mac OS oder Windows funktionieren, auch unter Linux ausgeführt werden kann. Somit ermöglicht diese Plattform die Zusammenarbeit von Designern, die unterschiedliche Betriebssysteme verwenden und für ihre Arbeit SVG-Code, CSS und iOS- oder Android-Code generieren müssen.

Die Plattform ermöglicht es ihren Benutzern, Designs zu erstellen, Prototypen zu erstellen und Feedback über eine Plattform zu sammeln.

Warum Figma verwenden?

Bevor wir in die Schönheiten des Figma-Designtools eintauchen, schauen wir uns an, was diese Plattform für Designer so attraktiv macht.

1. Es ist webbasiert. Figma läuft in Ihrem Browser und Sie können an Ihren Projekten arbeiten, ohne sie als separate Dateien auf Ihrem Computer speichern zu müssen – alle Bearbeitungen werden automatisch in Ihrer Cloud gespeichert. Denken Sie jedoch daran, dass Sie eine aktive Internetverbindung benötigen, um alle Änderungen zu speichern.
2. Es ermöglicht Teamarbeit . Mit Figma können Sie ein Team von zwei bis zu einer unbegrenzten Anzahl von Redakteuren haben, abhängig von Ihrem Preisplan. Sie können immer sehen, wie viele Teammitglieder an einem einzelnen Projekt arbeiten und welche Änderungen sie vornehmen.
3. Es ist kostenlos für Solo-Designer. Alle Funktionen sind ohne Testzeiträume absolut kostenlos nutzbar.

Insgesamt hat Figma drei Preispläne. Lassen Sie uns herausfinden, welche Funktionen die Plattform für jeden von ihnen bietet.

Figma-Preispläne

Erste Schritte mit Figma

Bei der Anmeldung erhält der Benutzer eine Willkommens-E-Mail mit den für das Onboarding erforderlichen Links: Hilfecenter, Video-Tutorials, Forum und nützliche Ressourcen.

Wenn Benutzer mit der Arbeit mit dem Tool beginnen, wird ihnen außerdem eine schnelle Plattform-Komplettlösung angeboten. Sie können sowohl online arbeiten als auch die Desktop-Version von Figma herunterladen, um Ihren Workflow offline einzustellen. Tatsächlich ist die Benutzeroberfläche ziemlich intuitiv, mit dem Ebenenbedienfeld, das die Elemente Ihres Projekts enthält, einer Symbolleiste mit Werkzeugen und verfügbaren Optionen und dem Eigenschaftenbedienfeld auf der rechten Seite.

Lassen Sie uns nun die herausragendsten Funktionen und Optionen von Figma skizzieren und sehen, wie Sie sie anwenden können.

Figma-Funktionen und nützliche Optionen

Prototyp entwickeln

Mit Figma können Sie eine anklickbare Version einer Website oder einer App erstellen, indem Sie so viele Bildschirme erstellen, wie Sie benötigen. Auf diese Weise können Sie alle Funktionen testen, bearbeiten oder anpassen ― Schaltflächenfunktionalität, Element-Rollover, modale Fensteranimation ―, ohne zwischen den Registerkarten wechseln zu müssen. Sie können Verbindungen und Hotspots für Ihr Design erstellen, um zu simulieren, wie es in einer realen Umgebung aussehen wird.

Wechseln Sie einfach im Eigenschaftenfenster zu Prototyp und beginnen Sie mit der Erstellung von Pfaden und Interaktionen.

Komponenten

Dies sind UI-Elemente, die in Ihren Projekten wiederverwendet werden können. Mit dieser Funktion können Sie symmetrische Komponenten erstellen, indem Sie sie spiegeln, oder Muster wiederholen, indem Sie die Komponenten kacheln. Sie können Komponenten aus Schaltflächen, Feldern oder Menüs erstellen. Um eine Master-Komponente zu erstellen, klicken Sie im Optionsmenü auf die Schaltfläche Komponente erstellen oder klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie die Option Komponente erstellen.

Sie können Masterkomponenten wiederverwenden, indem Sie Instanzen erstellen. Sie können diese Komponenten auch aus UI-Elementen wie Farben, Blöcken, Schaltflächen, Formen und Zielseiten als separate Komponenten erstellen.

Um Instanzkomponenten zu erstellen, wählen Sie die Masterkomponente, halten Sie den Hotkey (Alt oder D für Windows bzw. Mac OS) gedrückt, ziehen Sie die Instanz aus der Komponente und kopieren Sie sie bei Bedarf an eine andere Stelle.

Denken Sie daran, dass die von Ihnen erstellten Instanzen mit den Master-Komponenten verknüpft sind, was bedeutet, dass alle Änderungen, die Sie an letzteren vornehmen, für alle ersteren gelten. Wenn Sie beispielsweise die Form oder Farbe der Schaltfläche in der Master-Komponente aktualisieren, aktualisieren Sie ihre untergeordneten Komponenten in Ihrem Website-Design.

Vektornetzwerke

Mit dieser Figma-Funktion können Sie komplexe Vektorformen erstellen, da Sie nicht mehr nur auf zwei Linien beschränkt sind, die von zwei Punkten ausgehen. Sie können das Stiftwerkzeug verwenden, um zusätzliche Linien von jedem Punkt der von Ihnen erstellten Form zu zeichnen.

Darüber hinaus kann Vector Networks Ihre HTML-Routine vereinfachen, da Sie den SVG-Code aus einer externen Quelle kopieren und als Vektorebene direkt in Figma einfügen können. Sie können Figma-Vektoren auch als SVG-Codes kopieren. Klicken Sie dazu einfach mit der rechten Maustaste auf das Element, wählen Sie Als SVG kopieren und fügen Sie den Code in den HTML-Code oder ein beliebiges Webprojekt ein, das Sie erstellen.

Integriertes Kommentieren, Bearbeiten und Teilen

Mit Figma können Sie ein Team erstellen und auswählen, was jedes Teammitglied mit Ihren Projekten tun darf: entweder anzeigen oder auch anzeigen und bearbeiten. Sie können auch sehen, wie Teammitglieder das Design in Echtzeit aktualisieren oder ändern.

Ihr Team kann direkt im Arbeitsbereich Feedback hinterlassen oder jedes Element des Projekts diskutieren und es an einer beliebigen Stelle auf der Leinwand anheften, genau wie in Google Docs. Um Ihre Kommentare zu hinterlassen, wählen Sie die Sprechblase im oberen Menü, klicken Sie auf das Element, das Sie kommentieren möchten, und schreiben Sie Ihr Feedback.

Versionskontrolle

Mit Figma können Sie den Verlauf jedes Mitarbeiters verfolgen und sogar zur vorherigen Version zurückkehren. Der Dienst speichert die Versionen automatisch, wenn Benutzer die Registerkarte mit dem Projekt schließen oder wenn innerhalb von 30 Minuten keine Änderungen vorgenommen wurden. Um schnellen Zugriff auf diese Option zu erhalten, wählen Sie das Dropdown-Symbol links neben dem Projektnamen in der Symbolleiste aus. Auf der rechten Seite sehen Sie den Versionsverlauf mit der Option, eine bestimmte Version zu benennen, wiederherzustellen oder zu duplizieren.

Figma Design-Tool in Aktion

Nachdem wir uns mit der Plattform und ihren Funktionen vertraut gemacht hatten, entschieden wir uns, die Designoptionen von Figma auszuprobieren und eine einfache Seite für ein eBook zu erstellen. Zuerst haben wir im oberen Menü auf das „+“-Zeichen geklickt. Anschließend haben wir in der Symbolleiste auf das Symbol „Rahmen“ geklickt, um einen Rahmen zu erstellen und unser Design auf der Leinwand zu organisieren. Als nächstes füllten wir unser Projekt mit den notwendigen Ebenen – Textblöcke, Rechtecke und Bilder – und konfigurierten alle Abstände zwischen den Elementen.

Folgendes ist uns gelungen:

Denken Sie daran, dass Sie keinen Qualitätsdruck erstellen können, da der Plattform die primäre Palette zum Malen – die CMYK-Palette – oder der Größenwechsel zwischen Millimetern und Zentimetern fehlt.

Letzte Aufnahme

Figma fühlt sich an wie ein Werkzeug, das von Designern für Designer sorgfältig durchdacht wurde. Die Plattform ermöglicht es Ihnen,

• arbeiten Sie online und speichern Sie Ihre Designs in einer Cloud, ohne auf den Speicher Ihres Computers angewiesen zu sein;
• Erstellen von Designs auf verschiedenen Betriebssystemen;
• Arbeiten Sie in Echtzeit mit dem Team zusammen, kommentieren, bearbeiten und teilen Sie die Dateien;
• Genießen Sie nützliche Funktionen wie Prototyping, Vektornetzwerke, Erstellen von Komponenten und deren Instanzen, um Ihr Design zu bearbeiten, zu testen, anzupassen und seine Möglichkeiten zu erweitern.

Wir hoffen, dass unser Figma-Test die Insider-Tricks der Plattform aufgeklärt hat und Sie genug inspiriert wurden, um es auszuprobieren. Erstellen Sie Ihre Designs mit Figma und Marketingprojekte mit SendPulse. Mach's gut!