Wie viele andere auch, ist Figma ein Design-Tool, das erst kürzlich auf den Markt gebracht wurde und den Großteil des Marktes für Webdesign-Tools erobert. Seit seiner Markteinführung wird es ständig mit den Funktionen anderer führender Tools wie Sketch, Adobe XD usw. verglichen, um zu zeigen, dass es besser ist als diese. In diesem Blog geben wir Ihnen einen kurzen Überblick über die Funktionen von Figma und vergleichen es mit mehreren anderen, damit Sie eine fundierte Entscheidung für Ihr nächstes Projekt treffen können.
Figma ist ein browserbasiertes Tool, daher ist es nicht wie Sketch auf macOS beschränkt, sondern kann auch auf Windows, Linus und Chromebook betrieben werden. Außerdem bietet es eine Web-API, die ebenfalls kostenlos ist. Eine weitere erstaunliche Funktion ist die Möglichkeit, dieselbe Datei in Echtzeit zu teilen. Wenn Sie zum Beispiel eine Offline-Anwendung wie Photoshop verwenden, kann der Designer die Arbeit direkt per E-Mail oder über ein beliebiges Messaging senden, ohne sie in eine Bilddatei zu exportieren.
Um eine Figma-Datei freizugeben, muss man nur einen Link mit einem Kollegen oder Kunden teilen und die Datei wird einfach im Browser geöffnet. Der Hauptvorteil dieser Funktion ist, dass die Kunden Ihre neueste Arbeit innerhalb kürzester Zeit überprüfen können. In diesem Blog werden die folgenden Themen behandelt: -
- Erste Schritte
- Entwerfen mit Figma
- Stile
- Komponenten
Erste Schritte
Der Einstieg in Figma ist ganz einfach: Besuchen Sie die Website www.figma.com und melden Sie sich an oder registrieren Sie sich, indem Sie persönliche Daten wie E-Mail-ID, Name usw. eingeben. Sobald Sie sich angemeldet haben, klicken Sie auf "Neue Datei", um mit Ihrem Projekt zu beginnen. Das Design von Figma ist einfach, aber die Funktionen sind sehr leistungsfähig und rechtfertigen das alte Sprichwort: "Beurteile ein Buch nicht nach seinem Umschlag". Nach dem Anklicken erscheinen folgende Optionen: -
- Menü: Es handelt sich um eine Hamburger-Schaltfläche in der oberen linken Ecke des Bildschirms. Sie können die Optionen erkunden, die es bietet, oder einfach die gewünschte Option suchen.
- Werkzeuge: Werkzeugoptionen wie Formen, Rahmen, Text usw. befinden sich in diesem Bereich.
- Optionen: Er enthält zusätzliche Optionen für das ausgewählte Werkzeug und zeigt den Dateinamen an, wenn nichts ausgewählt ist.
- Ebenen: Hier können Sie Ihre Arbeit überprüfen und fortsetzen, wenn Sie mit allem fertig sind.
- Inspektor: Hier werden die Einstellungen oder Informationen des ausgewählten Objekts angezeigt. Es gibt separate Registerkarten für Prototyp, Design und Code.
Entwerfen mit Figma
2.1 Einrichten neuer Zeichenflächen
Dieser Teil wird Ihnen recht vertraut sein, wenn Sie früher mit Sketch gearbeitet haben. Wenn Sie A oder F drücken, sehen Sie auf der rechten Seite in der Eigenschaftsleiste die Rahmenoptionen. Von hier aus können Sie die gewünschte Größe für Ihre Arbeit auswählen oder einfach einen eigenen Rahmen erstellen.
Der Unterschied ist jedoch, dass Sie in Figma die Rahmen im Gegensatz zu anderen Zeichenflächen ineinander verschachteln können. Dies ermöglicht Ihnen, komplizierte Designs zu zeichnen oder zu erstellen.
2.2 Raster und Layoutspalten
Sie müssen sich darüber im Klaren sein, dass das Raster für Mobil- und Webdesign unterschiedlich ist, daher können Sie für das Web das 12-Spalten-Bootstrap-Raster verwenden, da hier die Abstände weniger wichtig sind, während Sie für Mobilgeräte ein 8-Punkt-Raster verwenden können.
Das Raster kann über das Menü "Rastereigenschaften" auf der rechten Seite eingestellt werden. In Figma können Sie auf einfache Weise mehrere Raster einrichten, die Sie später in Ihren Stilen zur späteren Verwendung speichern können.
2.3 Ebenen und Gruppen
In Figma finden Sie auf der linken Seite des Bildschirms das Ebenen-Panel mit den folgenden Optionen.
- Ebenen → Eine Ebene wird automatisch erstellt, wenn Sie ein neues Element hinzufügen. Mit Hilfe der Drag-and-Drop-Funktion können Sie die Ebenen neu anordnen.
- Ebenen gruppieren → Sie können Ihre Ebenen gruppieren und für einige ist es ein zentraler Punkt, damit die Datei überschaubar und ordentlich ist. Dies erleichtert Ihnen auch das Verschieben und Kopieren der Gruppen über Rahmen hinweg. Ein Element kann einfach durch Klicken auf cmd und das Element ausgewählt werden.
- Seiten → Sie können Seiten erstellen, um Ihre Arbeit zu trennen oder verschiedene Versionen davon zu erstellen, bis Sie die endgültige Version erhalten. Es gibt keine Regeln, Sie können sie nach Belieben verwenden.
- Assets → Dies ist der Ort, an dem Sie Ihre Komponenten speichern können, und auch die Bibliotheksschaltfläche ist hier zu finden.
Darüber hinaus finden Sie hier auch Optionen für Vektorformen, Bilder und Typografie, um Ihre Designanforderungen zu erfüllen. Sie können in Figma erstaunliche Google-Schriftarten finden, da diese bereits vorinstalliert sind.
Formatvorlagen
Stile werden verwendet, um die Farbe, den Effekt und den Text des gegebenen Objekts zusammen mit seinem Aussehen und seiner Form zu definieren. Man kann sie erstellen, um Farbe zu füllen, dem Text seine Schriftart, Größe, Abstand und Höhe zu geben, Effekte wie Innenschatten oder Ebenenunschärfe einzusetzen, die Raster zu layouten und Ihrem Design das gewünschte Aussehen zu geben, damit es für die Betrachter ansprechend ist.
Wenn Sie in Figma die Farbe des Textes ändern, werden automatisch auch alle anderen Elemente angepasst, was Ihnen definitiv Zeit und Energie spart. Dies hilft auch dabei, die Standardisierung des Projekts beizubehalten.
Komponenten
Dies sind die Elemente, die Sie beim Entwerfen ablehnen können. Mit Hilfe dieser Option können Sie die Konsistenz Ihres Projekts in Bezug auf das Design beibehalten. Durch diese Option sparen Sie eine Menge Zeit und Energie.
Sie können aus jeder Ebene oder jedem Objekt, das Sie entworfen haben, erstellt werden und Dinge wie Symbole, Schaltflächen, Layouts usw. enthalten.
Es gibt zwei Aspekte einer Komponente:
- Die Hauptkomponente: Sie definiert die Eigenschaften der Komponente.
- Die Instanz: Sie ist eine Kopie der Komponente, die später in jedem Ihrer Designs wiederverwendet werden kann. Sie sind bereits mit der Hauptkomponente verknüpft.
Zusammenfassend lässt sich sagen, dass Figma ein erstaunliches Werkzeug ist, das aufgrund seiner außergewöhnlichen Funktionen zur Verbesserung Ihrer Entwürfe seit seiner Einführung einen großen Anteil auf dem Markt einnimmt.
