Figma Design-Grundlagen

Die Leinwand erkunden

Entdecken

• KI-Tools in Figma Design verwenden
• Designdateien entdecken
• Anleitung UI3: Figmas neue UI
• Designen, Prototypen erstellen und Ebeneneigenschaften erkunden in der rechten Seitenleiste

Dateiprogramme

• Das Bedienmenü in Figma Design verwenden
• Tastenkombinationen in Figma

Erstelle Designs

Ebenen erstellen und bearbeiten

• Rahmen (Frames) in Figma Design
• Formen-Tools
• Masken

Arbeit mit Ebenen

• Mehrere Objekte auf der Arbeitsfläche gleichzeitig bearbeiten
• Übereinstimmende Objekte erkennen
• Übergeordnete, untergeordnete und gleichgestellte Beziehungen
• Ausrichtung, Drehung und Position anpassen
• Nutze Abschnitte, um deine Arbeitsfläche zu organisieren
• Alle 7 Beiträge anzeigen

Schriftarten

• Dem Figma Design eine Schriftart hinzufügen
• Schriftarten durchsuchen und anwenden
• Links in Text einfügen
• Text in chinesischer, japanischer und koreanischer Sprache hinzufügen

Farben, Farbverläufe und Bilder

• Bilder zu Designdateien hinzufügen

Weitere Eigenschaften

• Kontureigenschaften anwenden und anpassen
• Eckenradius und Glättung anpassen

Auto-Layout verwenden

• Verwendung von Auto-Layout-Flüssen im Raster
• Leitfaden zum Auto-Layout
• Auto-Layout zu einem Entwurf hinzufügen

Designsysteme erstellen

Komponenten

• Einführung in Figma-Komponenten
• Interaktive Komponenten mit Varianten erstellen
• Eigenschaften von Komponenten entdecken

Variablen

• Übersicht über Variablen, Collections und Modes
• Variablen erstellen und verwalten
• Variablen auf Designs anwenden

Bibliotheken erstellen und teilen

• Leitfaden zu Figma-Bibliotheken
• Eine Bibliothek veröffentlichen

Bibliotheken verwenden

• Komponenteninstanzen erstellen und einfügen

Dev Mode

Die Leinwand erkunden

• Leitfaden zum Dev Mode
• In Dev Mode in Designs navigieren
• Dev Mode für Admins

Designs prüfen

• Leitfaden für die Inspektion
• In Dev Mode Änderungen vergleichen
• In Dev Mode Maße hinzufügen und Designs mit Anmerkungen versehen
• Variablen im Dev Mode

Designs in Programmcode umwandeln

• Code Connect
• Codeauszüge in Dev Mode nutzen
• Entwicklungsressourcen im Dev Mode mit Ebenen verknüpfen
• Figma for VS Code

Dev Mode in deinem ganzen Unternehmen

• Status und Benachrichtigungen im Dev Mode
• Dev Mode-Fokusansicht
• Ansicht „Entwicklungsfertig" im Dev Mode
• Dev Mode-Einstellungen für eine Organisation verwalten

Prototypen erstellen

Anleitungen

• Einführung in Prototyping in Figma
• Statusmanagement für Prototypen
• Videos in Prototypen verwenden
• Prototypen-Auslöser
• Prototyp-Aktionen

Prototypen erstellen

• Interaktionen erstellen
• Prototyp-Flows erstellen und verwalten
• Scroll- und Overflow-Verhalten bei Prototypen

Erweitertes Prototyping

• Mit Smart-Animation erweiterte Animationen erstellen
• Modi für Variablen in Prototypen
• Mehrere Aktionen und Bedingungen
• Ausdrücke in Prototypen verwenden
• Variablen in Prototypen verwenden

Prototypen ansehen

• Gerät- und Hintergrundeinstellungen für Prototypen festlegen
• Prototypen abspielen

Importieren und Exportieren

• Dateien in den Datei-Browser importieren
• Sketch-Dateien importieren
• Aus Figma exportieren
• Exportformate und -einstellungen

In Dateien zusammenarbeiten

Kommentare

• Kommentare zu Dateien hinzufügen
• E-Mail-Benachrichtigungen für Kommentare zu Dateien verwalten

Kollaborationswerkzeuge

• Verlauf der Betrachtungen für Ihre Dateien ansehen

Verzweigung und Zusammenführung

• Leitfaden zum Branching
• Einen Zweig freigeben
• Änderungen am Zweig überprüfen
• Zweige in einer Hauptdatei zusammenführen
• Unvollständige Zusammenführungen oder Aktualisierungen