Probiere diese 10 Skills aus – und präsentiere deine eigenen

Für alle, die es noch nicht wussten: Skills sind einfache Markdown-Dateien, die die Arbeit mit einem Agenten vereinfachen. Da es sich um geordnete Anweisungen oder geführte Prompts handelt, kommt mitunter der Eindruck auf, das sie eher für Entwickler*innen als für Designer*innen gedacht sind. Sie sind jedoch tatsächlich perfekt geeignet, um die Vorstellungen und Entscheidungen von Designer*innen festzuhalten.

Manchmal ist nur ein Skill nötig, um einen neuen Workflow zu ermöglichen. Ich hatte meinen Aha-Moment, als ich ein Bewegungstutorial erstellte: Ich schrieb einen Skill für den Figma-Agenten, um meine bevorzugten Easing-Kurven auf die Keyframes anzuwenden, an denen ich arbeitete. Ich nannte diesen Skill /ease-like-miggi. Als mein Team diesen Skill bei den eigenen Workflows einsetzte, sahen die Bewegungsdesigns genauso aus wie meine. Das hat mich überzeugt.

Ab heute kannst du mit dem Agenten in Figma Skills erstellen. So geht es:

• Bitte den Agenten, einen Skill zu erstellen, der als Referenz einen Design-Frame verwendet, oder einen Skill, der konkreten Schritten oder Richtlinien folgt, die du bereitstellst.
• Erstelle eine Vorschau des Skills, sobald der Agent ihn entworfen hat, und füge ihn dann in deinem Chat ein.
• Iteriere beim Testen weiter. Passe deine Schritte an, ändere das Format, bitte um Empfehlungen oder öffne den Markdown-Editor, um manuell Änderungen vorzunehmen.

Ich wollte wissen, wie andere Designer*innen beim Arbeiten mit dem Figma-Agenten Skills verwenden, und habe mich in Figma Community umgesehen. Dies sind 10 meiner Favoriten aus verschiedenen Bereichen, von der Vereinheitlichung der Ästhetik bis zur Anwendung von Designsystem-Prinzipien.

1. Anwenden eines Röntgeneffekts auf deine Bilder

Erstellt von: Adele Ix, Freelancerin

Skill:/xray-scan

Effekt: Wandelt ein Foto oder eine Textbeschreibung in ein realistisch aussehendes Röntgenbild um, das die internen Details eines Objekts visualisiert. Es erzeugt sofort zwei Ausführungen – leuchtendes Weiß auf Schwarz und weiche dunkle Töne auf Weiß.

Das sagt Adele: „Ich liebe es, Collagen zu erstellen, und das zeigt sich wirklich in dem Skill. Ich platziere besonders gern mehrere Röntgenbilder übereinander. Sie sind monochrom mit leuchtenden Kanten, sodass sie sich zu wirklich coolen Collagen stapeln lassen. Die Ergebnisse sehen nicht nur alleine cool aus – sie verschmelzen auch wunderschön miteinander.“

2. Suche nach einer fehlenden Bewegung

Erstellt von: Emil Kowalski, Linear

Skill: /find-animation-opportunities

Effekt: Scannt Designs, um Bereiche zu identifizieren, die nicht animiert sind, aber animiert werden sollten, und umgekehrt. Der Skill beantwortet Fragen wie „Was könnte hier animiert werden?“ oder „Wie kann ich das lebendiger wirken lassen?“ Du erhältst Vorschläge dazu, welche Bewegung wo hinzugefügt werden sollte und mit genau welchen Werten. Du kannst diese Änderungen selbst in Figma Motion umsetzen oder den Agenten bitten, sie für dich anzuwenden.

Das sagt Emil: „Dieser Skill funktioniert am besten, wenn du ihn auf einen Frame verweist und zusätzlichen Kontext hinzufügst, z. B. die Zielperson für die Seite. Du kannst damit aber auch übermäßige Animationen vermeiden. Frage dazu: ‚Gibt es Elemente, die überhaupt nicht animiert sein sollten?‘”

3. Hinzufügen zu Bewegung zu einer statischen Komposition

Erstellt von: Mallory Dean, Figma

Skill:/camera-pan-and-zoom

Effekt: Erstellt ein Kamera-Rig – ein verschachteltes Ebenen-Setup, das echte Kamerabewegungen nachahmt – um ausgewählten Inhalt herum, und animiert dann das Schwenken, Zoomen oder Rollen. Regisseur*innen gehen beim Einrahmen einer Szene ähnlich vor. Damit kannst du zum Beispiel eine Rastertour durch ein Kartenset machen und anschließend wieder zur Gesamtansicht zurückzoomen.

Das sagt Mallory: „Es ist ein sehr spezieller Skill, mit dem du Zoom- und Schwenkbewegungen der Kamera erzeugen kannst, ohne Frames im Design anfassen zu müssen.“

4. Erkennen von Details, die auf deiner Benutzeroberfläche fehlen

Erstellt von: Jakub Krehel, Interfere

Skill: /better-interface

Effekt: Gibt dem Agenten das von Jakub erstellte Handbuch für die Gestaltung der Benutzeroberfläche – spezifische Standards für Typografie, Layout, Barrierefreiheit, Bewegung und Produkttext.

Das sagt Jakub: „Wenn man von einem guten Produkt zu einem hervorragenden wechselt, merkt man den Unterschied. Es ist meist nichts Großes, sondern viele kleine Dinge, die sich summieren. Dieser Skill erfasst diese Details und Best Practices, die oft übersehen werden oder nicht sofort offensichtlich sind.“

5. Erstellen einer automatischen Dokumentation für Komponenten

Erstellt von: Mauro Berteri, Itti Digital

Skill: /component-handoff

Effekt: Wandelt eine einzelne Komponente oder eine Komponentengruppe in einen Dokumentations-Frame auf der Arbeitsfläche um, den du sofort teilen kannst. Wähle dazu eine Komponente oder eine Komponentengruppe aus, um Folgendes zu erhalten:

• Eine Kopfzeile mit Name, Version, Eigentümer*in und Beschreibung
• Eine Live-Vorschau
• Ein Variantenraster
• Ein Abschnitt mit Geboten und Verboten
• Eine Auflistung der Interaktionen/Zustände
• Die vollständige Anatomie der Komponente

Das sagt Mauro: „Mein Grundsatz ist einfach: Ich automatisiere die repetitiven Aufgaben, die bisher Stunden gedauert haben, damit ich mich auf die tatsächliche kreative Arbeit konzentrieren kann.“ Für diesen Skill habe ich die genaue Übergabestruktur verwendet, die sich bei meiner jahrelangen Erfahrung als die beste erwiesen hat. Mir war dabei wichtig, dass Designer*innen sie mit einem Klick in ihr eigenes Designsystem übertragen können. Der Skill ist darauf ausgelegt, skalierbar, vorhersehbar und zu 100 % direkt auf der Figma-Arbeitsfläche editierbar zu sein.

6. Zuordnen von Farben zu Token

Erstellt von: Ian Guisard, Uber

Skill: /create-color

Effekt: Wandelt eine ausgewählte Figma-Komponente in eine vollständige Farbspezifikation um. Dabei werden alle sichtbaren Füllungen, Konturen und Schatten ihrem Design-Token oder Stil zugeordnet. Zudem werden hartkodierte Farben hervorgehoben und die Ergebnisse über Varianten und Zustände hinweg dokumentiert.

Das sagt Ian: „Eines meiner Lieblingsbeispiele ist eine Schaltfläche mit verschiedenen Typen, Zuständen und Farbmodi.“ Wenn eine Komponente mehrschichtige Füllungen oder Farbverläufe verwendet, wird jede Füllung in der Stack-Reihenfolge und jeder Farbverlaufstopp mit seiner Position, Farbe und zugehörigen Variable aufgelistet. Entwickler*innen können die Behandlung direkt aus der Annotation reproduzieren, ohne jede Ebene manuell untersuchen zu müssen.“

7. Überprüfen deiner Komponenten in einem Durchgang

Erstellt von: Amy Ha, Walmart

Skill: /analyze-components

Effekt: Durchsucht eine Seite und bereinigt gefundene Probleme. Katalogisiert dann jede Komponente mit einer Live-Vorschau und:

• Hebt verwaiste Komponenten, Duplikate und Benennungsfehler hervor
• Behebt Probleme automatisch, indem verwaiste Komponenten geklont und jede zu behebende Instanz ausgetauscht wird
• Schreibt die vollständigen Ergebnisse in ein gestaltetes Prüfdokument auf der Arbeitsfläche

Das sagt Amy: „Das spart wirklich Zeit. Bisher musste ich mit der rechten Maustaste klicken, zur Hauptdatei gehen und die Komponenten manuell kopieren oder mich mit Geister-Token abfinden und alles von Hand neu gestalten. Jetzt kann ich diese Massenbearbeitung in einem Schritt erledigen.“

8. Designen für jeden Zustand

Erstellt von: Linda Ojo, Paystack

Skill:/ui-state-expander

Effekt: Erfasst jeden Bildschirm, jede Komponente bzw. jeden Flow und erweitert ihn zu einem vollständigen Satz von Zuständen. Dieser Skill stellt sicher, dass jeder Zustand designt ist, bevor er an das Entwicklungsteam weitergegeben wird. Dabei werden folgende Zustände berücksichtigt:

• Ladezustände
• Leere Zustände
• Fehlerzustände
• Deaktivierte Zustände
• Zustände mit unvollständigen Daten
• Edge cases

Der Skill gibt Trigger, Text, Übergänge und Hinweise zur Implementierung zurück, sodass Entwickler*innen mühelos ein ansprechendes Mockup erstellen können.

Das sagt Linda: „Bei jeder Übergabe gab es die gleichen Review-Kommentare: ‚Was passiert, wenn das fehlschlägt?‘ und ‚Wie sieht das mit leerem Zustand aus?‘ Schließlich erkannte ich, dass die Checkliste in meinem Kopf ein Skill sein sollte, den jeder Mensch und Agent ausführen kann.“

9. Feedback zu deinem Design

Erstellt von: Joey Primiani, Superfuture

Skill: /superfuture-design-review

Effekt: Bewertet eine Datei anhand von UX-Heuristiken, Barrierefreiheit-Standards, visueller Hierarchie, Interaktionsdesign und Produktidee und sortiert jede Notiz nach einem Ampelsystem:

• Rot für Blockaden
• Gelb für empfohlene Korrekturen
• Grün für das, was bereits funktioniert

Das sagt Joey: „Dieser Skill spiegelt meinen persönlichen Review-Prozess wider, der Benutzerfreundlichkeit, Barrierefreiheit, Produktstrategie, visuelles Design und Geschäftsziele in Balance hält, während das Feedback nach Auswirkung auf die Benutzer*innen priorisiert wird.“

10. Erstellen eines Diskussionsleitfadens für die Usability-Tests

Erstellt von: Neha Kodi, Figma

Skill:/usability-test-guide

Effekt: Stellt einen sofort einsatzbereiten Diskussionsleitfaden für Usability-Tests basierend auf Nehas Best Practices als Forscherin zur Verfügung. Dieser Skill überprüft einen für Usability-Tests konzipierten Design-Flow und fügt dann direkt neben jedem Frame auf der Arbeitsfläche kontextbezogene Moderationsfragen ein.

Das sagt Neha: „Testen und Lernen stehen im Zentrum meiner Arbeit bei Figma, und dieser Skill wendet einige Praktiken an, bei denen ich keine Kompromisse eingehe – Ausrichten von Aufgaben an den Zielen der Teilnehmer*innen, Stellen offener Fragen und Skalieren der Anzahl der Fragen entsprechend der Einfachheit oder Komplexität des Design-Flows.“

Im Hilfebereich erfährst du mehr darüber, wie du Skills für den Figma-Agenten erstellen kannst. Der Design-Agent von Figma ist als offene Beta-Version für Benutzer*innen mit Full-Lizenz in Professional-, Organization- und Enterprise-Abos verfügbar. Nutzer*innen mit Collab-, Dev- und View-Lizenzen können den Agenten in ihren Entwürfen verwenden. Der Agent ist in der Beta-Version kostenlos nutzbar.