Figma ist ein kollaboratives Interface-Design-Tool, das dazu beiträgt, die Kommunikationsbarriere zwischen Designern und Entwicklern zu überwinden.
Dieser Leitfaden erklärt, wie Sie mit Figma zusammenarbeiten können.
Zugriff
- Access the shared link: You can access the project’s Figma file here.
- Anmelden: Wenn Sie nicht bereits angemeldet sind, werden Sie von Figma dazu aufgefordert.
Schlüsselfunktionen sind nur für angemeldete Benutzer verfügbar, wie der Entwicklermodus und die Möglichkeit, einen dedizierten Rahmen auszuwählen.
Ohne ein Konto können Sie nicht effektiv zusammenarbeiten.
Figma-Struktur
On the left sidebar, you can access the different pages of Twenty’s Figma. So sind sie organisiert:
- Komponentenseite: Dies ist die erste Seite. Der Designer verwendet sie zur Erstellung und Organisation der wiederverwendbaren Designelemente, die in der gesamten Designdatei verwendet werden. For example, buttons, icons, symbols, or any other reusable components. Sie dient dazu, die Konsistenz im gesamten Design beizubehalten.
- Hauptseite: Die zweite Seite ist die Hauptseite, die die vollständige Benutzeroberfläche des Projekts zeigt. Sie können Play drücken, um den vollständigen App-Prototypen zu verwenden.
- Funktionsseiten: Die anderen Seiten sind normalerweise den in Arbeit befindlichen Funktionen gewidmet. Sie enthalten das Design spezifischer Funktionen oder Module der Anwendung oder Website. Normalerweise sind sie noch in Arbeit.
Nützliche Tipps
Mit Lesezugriff können Sie das Design nicht bearbeiten, aber Sie können alle Funktionen nutzen, die nützlich sind, um die Designs in Code zu konvertieren.
Verwenden Sie den Dev-Modus
Der Dev-Modus von Figma verbessert die Produktivität von Entwicklern, indem er eine einfache Navigation im Design, effektive Ressourcenverwaltung, effiziente Kommunikationstools, Toolbox-Integrationen, schnelle Codeschnipsel und wichtige Ebeneninformationen bereitstellt, die die Lücke zwischen Design und Entwicklung schließen. Weitere Informationen über den Dev-Modus finden Sie hier.
Wechseln Sie in der rechten Teil der Toolbar in den “Entwickler”-Modus, um Designspezifikationen anzuzeigen, CSS zu kopieren und auf Ressourcen zuzugreifen.
Den Prototyp verwenden
Klicken Sie auf ein beliebiges Element auf der Leinwand und drücken Sie die Schaltfläche “Play” oben rechts in der Oberfläche, um die Prototyp-Ansicht zu öffnen. Der Prototypenmodus ermöglicht es Ihnen, mit dem Design zu interagieren, als wäre es das endgültige Produkt. Er zeigt den Fluss zwischen Bildschirmen und wie sich Interface-Elemente wie Schaltflächen, Links oder Menüs bei Interaktionen verhalten.
- Übergänge und Animationen verstehen: Im Prototypenmodus können Sie Übergänge oder Animationen sehen, die ein Designer zwischen Bildschirmen oder UI-Elementen hinzugefügt hat, um Entwicklern klare visuelle Anweisungen zu beabsichtigtem Verhalten und Stil zu bieten.
- Implementierungsklarheit: Ein Prototyp kann auch helfen, Unklarheiten zu reduzieren. Entwickler können damit interagieren, um ein besseres Verständnis der Funktionalität oder des Aussehens bestimmter Elemente zu erlangen.
Für umfassendere Details und Anleitungen zum Erlernen der Figma-Plattform können Sie die offizielle Figma-Dokumentation besuchen.
Abstände messen
Wählen Sie ein Element aus, halten Sie die Option-Taste (Mac) oder Alt-Taste (Windows) gedrückt und fahren Sie dann mit der Maus über ein anderes Element, um den Abstand zwischen ihnen anzuzeigen.
Figma-Erweiterung für VSCode (Empfohlen)
Figma für VS Code ermöglicht es Ihnen, durch Design-Dateien zu navigieren und diese zu inspizieren, mit Designern zusammenzuarbeiten, Änderungen zu verfolgen und die Implementierung zu beschleunigen - alles, ohne Ihren Texteditor zu verlassen.
Es ist Teil unserer empfohlenen Erweiterungen.
Zusammenarbeit
- Kommentare verwenden: Sie sind eingeladen, die Kommentarfunktion zu nutzen, indem Sie auf das Blasensymbol im linken Teil der Toolbar klicken.
- Cursor-Chat: Eine nette Funktion von Figma ist der Cursor-Chat. Drücken Sie einfach
; auf Mac und / unter Windows, um eine Nachricht zu senden, wenn Sie sehen, dass jemand anderes Figma zur gleichen Zeit wie Sie verwendet.
