Jonathon's AI Wiki

Higgsfield → Figma — Editable AI Static Ads (Claude Code Skill)

9 min read

Source: raw/Claude_+Higgsfield+Figma=_Editable_AI_Ads.md (Mike Futia / SCALE AI YouTube walkthrough, “Claude + Higgsfield + Figma = Editable AI Ads,” https://youtu.be/oWyfdhzQpp8, 13:37, published 2026-08-01) + raw/github-mikefutia-claude-higgsfield-figma-readme.md (repo README + metadata: mikefutia/claude-higgsfield-figma, MIT, Python stdlib, published 2026-08-01, 0 stars at ingest).

An MIT-licensed Claude Code skill that produces Meta static-ad variant grids where only the imagery comes from AI. The reframe: the biggest pain of AI static ads is that the text is pixels — impossible to edit, and every “make this PNG editable” fix (auto-trace, OCR-and-retype, background removal) is recreation with extra steps. So stop generating finished ads. Generate only the image plate (scene, product, lighting, no type) in Higgsfield, and let Figma own the headline, body, CTA button, logo, and brand colors as live layers bound to variables. The deliverable isn’t the ads — it’s that changing them becomes cheap.

Key Takeaways

  • Division of labor is the whole idea. AI produces only the background plate; Figma owns everything a designer might change. “That is a prompting change before it is a tooling change.” The before/after: change a headline = click and type (was: rebuild the ad); change button color across every variant = change one token; light version of the whole set = one mode switch; swap the image = swap one fill.
  • The skill runs end to end, no other skill required: (1) reads your Figma templates to find each placement’s protected zone; (2) writes copy from an angle brief (speed-of-results, price-objection, …), not finished copy; (3) generates plates via Higgsfield natively per ratio, never cropped across ratios; (4) QA’s every plate and rejects on stray lettering, protected-zone intrusion, or wrong luminance; (5) uploads to Figma and normalizes to exact placement sizes; (6) builds the variant grid — clone template, set plate fill, switch one variable mode, set copy; (7) names frames so Figma builds the export folder structure for you.
  • Default placements are the Meta set: 4x5 (1080×1350), 1x1 (1080×1080), 9x16 (1080×1920).
  • Token-driven Figma file contract. Pages Styleguide / Ad Templates / Assets / Ads; a Brand variable collection (ink, paper, accent, accent-ink) plus a Theme collection with Dark/Light modes whose tokens (text/primary, surface/scrim, button/fill, …) alias the Brand primitives; Button and Logo components bound to variables. If the file is missing any of it, ask the skill to build it — the video demos exactly that from one prompt.
  • The logo must come in as SVG. It imports as an editable vector tree so every path’s fill binds to a variable and the logo inverts with the theme exactly like text. A PNG can’t bind an image fill to a variable mode — that forces two logo components and a manual swap on every light-theme ad.
  • Per-brand reuse is explicit: duplicate the styleguide + templates per client/brand, hand the skill the logo SVG, a clean product image, and exact hex codes, and it rebinds the whole system. Demoed live on the Groons supplement brand — colors, logo, and 12 finished ads built in-file while the camera rolls.
  • Claude parallelizes generation. Six plates generate at once from one request instead of six manual Higgsfield prompts. The demo runs Nano Banana Pro through the Higgsfield connector; “if you want to tell it to use ChatGPT images, you can do that instead.”
  • Export naming maps angles to ad sets. Frames are named <Campaign>/<Angle>/<theme>_<format> — SpringDrop/social-proof/dark_4x5 exports to SpringDrop/social-proof/dark_4x5.png, so the export folder structure drops straight into a bulk upload without re-sorting. Cmd+A → Export gets the whole set.
  • The #1 failure mode is the read-only Figma connector. Two Figma MCP connectors exist — one read-only, one write-enabled. If use_figma and upload_assets are missing while get_metadata works, you have the wrong one; it surfaces as “the Figma connection is read only.” The video’s fix: install both.
  • Honest finish bar: the built grid is a first pass — spacing/wrapping mostly caught, “not a thousand percent perfect” — meant for a designer (or you) to finalize in Figma before export.

Traps worth knowing (from the repo)

  • createAutoLayout frames and imported SVG wrappers default to a white fill — set fills = [].
  • resize() does not scale a frame’s children; use rescale(factor).
  • upload_assets has no page argument — set the current page first.
  • Upload URLs are single-use, 10-minute expiry — mint fresh rather than retrying.
  • Higgsfield medias[].value rejects raw URLs — pass a media_id.
  • findAll/query do not descend into component instances on a fresh clone — button labels need findOne(INSTANCE) then .children.
  • Setting text fills manually to theme a variant detaches the variable binding — use the mode switch.
  • Product microtype drifts (“24 Gummies” became “24 Commles” in testing). For client work, composite the real product cutout over the generated scene in Figma instead of letting the model redraw the pack — the skill makes and stores the cutout in the Assets page.

Position in the Higgsfield + Claude tutorial series

Sixth Higgsfield+Claude tutorial in this topic, and the second from Mike Futia. ^[inferred — wiki-side series accounting] What it adds that the prior five don’t: the anti-text-in-image doctrine and Figma as the type/brand layer. Futia’s own first tutorial (the ad-agency workflow) did its copy overlay inside GPT Image 2.0 and honestly flagged that “typographic overlays are rough — small fonts, top-line text degrades”; this skill is the structural answer to that exact weakness — type never touches the image model at all. ^[inferred — the sources don’t reference the earlier tutorial] Where the 50-ad campaign tutorial scales finished-image generation and Adil’s content factory closes the publish loop, this one moves the editability boundary: the AI’s output stops being the deliverable and becomes a swappable fill inside a design system.

Implementation

  • Tool/Service: Claude Code (the video works in the Claude desktop app’s code tab) + a write-enabled Figma MCP connector + the Higgsfield MCP (mcp.higgsfield.ai/mcp, added as a custom connector) + the higgsfield-to-figma skill.
  • Setup: git clone https://github.com/mikefutia/claude-higgsfield-figma.git ~/.claude/skills/higgsfield-to-figma (or upload the packaged higgsfield-to-figma.skill bundle through the Claude client — the video shows Customize → Skills → Add → Upload skill). Connect both Figma connectors (Customize → Connectors → browse), add Higgsfield as a custom connector, set tool permissions to always-allow for speed, then restart the Claude app — the video calls this out as a general rule after adding connectors. Invoke with /higgsfield-to-figma.
  • Cost: skill is MIT/free. Requires a paid Figma plan and a Higgsfield account with credits. Python 3 standard library only — nothing to pip install.
  • Integration notes: repo layout is SKILL.md (the skill itself), reference/plate-prompts.md (prompting rules, protected zones, model choice, QA criteria), scripts/plate_tools.py (fetch plates from Higgsfield / push to Figma), plus the packaged bundle. Give the skill three things per brand: logo as SVG, a clean product image, and exact brand hex codes.

The demo flow (video)

  1. Build the template file from one prompt — “create a new Figma file called meta ad template… pages for style guide, ad templates, assets, and ads, a brand color collection, a theme collection with dark and light modes, button + logo components, and master ad templates at 4x5, 1x1, and 9x16.” Claude returns a Figma link; customize CTAs/sizes by chatting.
  2. Brand it — attach logo SVG + product photo, paste hex codes: “import the logo as vectors, bind every path to a logo fill theme variable, and re-point the brand colors.” Claude edits the live Figma file while you watch.
  3. Generate angles — “let’s start generating the angles”: two angles (taste, convenience) × both themes × all three placements, “show me the copy before you generate it.” Claude drafts headline/body/button copy for approval, asks how the product pouch should render, then batch-generates six plates at a time.
  4. QA + assembly — the skill downloads plates, reviews them (it can reject), uploads survivors to Figma’s Assets page alongside the product cutout, and builds all 12 ads on the Ads page live.
  5. Tweak + export — variable demo: change accent to red and every dark ad’s logo + button flips at once. Cmd+A → Export → folders per angle.
  • weomarketly:playbooks/higgsfield-figma-editable-ai-ads: the WEO-internal playbook compiled from the same sources — dental multi-client application (per-practice styleguide duplication, copy gates, real-photography compositing) and pilot steps.

Open Questions

  • Which plate model wins? The demo uses Nano Banana Pro and names ChatGPT images as the alternative; reference/plate-prompts.md carries the model-choice rules but no benchmark. Same open default-model question as the earlier ad-agency workflow.
  • Figma plan floor. The video says “you’ll need a paid Figma plan” — which tier actually unlocks the write MCP + variables features is not specified in either source.
  • QA rejection rate in practice. The demo’s six plates all passed; no data on how often the stray-lettering/luminance QA rejects and regenerates on real runs.
  • Non-Meta placements. The skill defaults to the Meta trio; the README implies templates are extensible per placement, but no worked example beyond 4x5/1x1/9x16 exists yet.

Try It

  1. Check your Figma connector first. If use_figma and upload_assets are missing while get_metadata works, you have the read-only connector — install the write-enabled one (or both, per the video) before anything else.
  2. One-prompt the template file on your own brand: logo SVG + hex codes + a product shot, then generate one angle in both themes across the three Meta placements (12 ads).
  3. Prove the token payoff: flip accent in the Brand collection and watch every variant re-theme; that single interaction is the argument for the whole architecture.
  4. Keep real product cutouts composited — don’t let the model redraw packaging (the “24 Commles” trap); the skill already stores the cutout in Assets for this.
  5. Chain the gates: score finished creative with the Virality Predictor where it applies, and push exports through Meta Ads CLI to close the loop.

Graph View

Backlinks