Skill🧩 Web-Entwicklung

Web-/lokale Medien nach Figma importieren

Version 1.0·Stand 2026-06-17·Markdown · kostenlos

Echte Bilder, Logos, Fotos, Icons und SVGs über die Figma-MCP zuverlässig in ein Design importieren – von Web-URL oder lokaler Datei. Mit vollständiger Methoden-Matrix und den Fallen, an denen der naive URL-Weg still scheitert.

🧭Worum es geht

Methoden-Matrix für den Medien-Import in Figma über die Figma-MCP (Raster, SVG, Inline-Bytes) inklusive Umgebungs-Gotchas und robustem Lokaldatei-Fallback.

📄Was die Datei enthält

Entscheidungsbaum für Raster vs. SVG vs. Inline-Bytes
Vier Methoden: upload_assets, createImageAsync, createNodeFromSvg, createImage
Code-Snippets inkl. SVG-Umfärbung und Browser-Pfad-Extraktion
Umgebungs-Gotchas (Sandbox ohne fetch, Provenienz, Exfiltrations-Guards)
Robuster Fallback über lokale Dateien plus Verifikation per Screenshot

🎯Welche Probleme sie löst

Zuverlässiger Raster-Import via upload_assets statt blinder URL-Übergabe
Echte, umfärbbare Vektor-Logos via createNodeFromSvg
Fallback-Pfad, wenn serverseitiges URL-Fetching deaktiviert ist
Verifikation, dass das Asset wirklich gerendert hat

⚠️Welche Fehler ohne diesen Skill auftreten

Stiller Fehlschlag von createImageAsync (not a supported API)
fetch is not defined in der Plugin-Sandbox
Blockierte Web-Fetch-/Browser-Pfade durch Provenienz- und Exfiltrations-Guards
Leere/graue Fills durch falschen Content-Type oder Hotlink-Schutz

🏷️Themen

figmamcpassetssvglogoimage-importuse_figmaupload_assets

Skill = eine einzelne Fähigkeit bzw. ein Schritt – fokussiert und sofort einsetzbar.

Workflow = ein kompletter Prozess, der mehrere Skills zu einem Ergebnis verkettet.