Store your design judgment in a skill file

Skills are plain-text markdown files that give the Figma agent ordered instructions or guided prompts. On the surface, that format sounds engineer-centric, but skills are a natural fit for capturing the qualitative calls designers make every day — the opinions, preferences, and rules of thumb that define a point of view.

Figma Design Advocate Miggi Cardona hit that realization while building a motion tutorial. She wrote a skill to apply her go-to easing curves to keyframes and named it /ease-like-miggi. When teammates ran it in their own workflows, their motion started to resemble hers — and the pattern clicked.

Authoring is now available directly in Figma. You can ask the agent to draft a skill from a design frame, or from steps and guidelines you dictate; preview it in chat before running it; and keep iterating — editing steps, adjusting formatting, requesting recommendations, or opening the raw markdown editor. Many skills also work with Figma’s MCP server in third-party agents; MCP-specific skills live in the corresponding GitHub repository.

Cardona surfaced ten community-built skills that show the range of what this format can encode.

Motion and effects

1. X-ray scans

Freelancer Adele Ix built /xray-scan, which turns a photo or text description into a realistic radiograph showing internal structure. It outputs two finishes — glowing white on black and soft dark tones on white — that layer well into collages because of their monochrome, edge-lit look.

2. Find missing motion

Linear’s Emil Kowalski wrote /find-animation-opportunities, a skill that scans designs for spots that should animate but don’t, and flags areas that over-animate. It answers questions like “What could be animated here?” with proposed motion, placement, and exact values you can implement yourself in Figma Motion or hand to the agent. Kowalski notes it works best pointed at a single frame with extra context like the target persona — and that it’s equally useful for asking what shouldn’t move.

3. Camera rigs without touching frames

Figma’s Mallory Dean created /camera-pan-and-zoom, which builds a nested camera-rig layer around selected content and animates pan, zoom, or roll — for instance, a grid tour across cards that pulls back to the full view. Dean describes it as niche but handy for producing camera movement without modifying any frames in the design.

Quality and consistency checks

4. Interface craft rulebook

Interfere’s Jakub Krehel packaged his standards for typography, layout, accessibility, motion, and product writing into /better-interface. The skill encodes the small details that separate good products from great ones — the kind of accumulated best practices that often go unnoticed.

5. Component documentation

Itti Digital’s Mauro Berteri turned his handoff structure into /component-handoff. Select a component or set and it generates a documentation frame on the canvas containing a name, version, owner, and description header; a live preview; variant grid; a do’s and don’ts section; an interaction and states breakdown; and full component anatomy. Berteri packaged the exact structure that worked across his years of experience so any designer can apply it in one click and edit the result directly.

6. Color-to-token mapping

Uber’s Ian Guisard built /create-color, which turns a selected component into a full color specification. It maps every visible fill, stroke, and shadow to its design token or style, flags hard-coded colors, and documents results across variants and states. For layered fills or gradients, it lists each fill in stacking order and each gradient stop with position, color, and bound variable — so engineers can reproduce the treatment without manual layer inspection.

Documentation and review workflows

7. Bulk component cleanup

Walmart’s Amy Ha contributed /analyze-components, which crawls a page, flags orphans, duplicates, and naming errors, then repairs them automatically by cloning orphaned components and swapping instances to the fix. The full results land in a styled audit document on the canvas. Ha notes it eliminates the manual chore of right-clicking to a main file, copying components over, and handling ghost tokens by hand.

8. State coverage

Paystack’s Linda Ojo wrote /ui-state-expander, which takes any screen, component, or flow and expands it into every state: loading, empty, error, disabled, partial data, and edge cases. The skill returns triggers, copy, transitions, and implementation notes. Ojo built it after seeing the same review comments on every handoff — “What happens when this fails?” and “What does empty look like?” — and realizing the checklist in her head belonged in a runnable format.

9. Structured design critique

Superfuture’s Joey Primiani authored /superfuture-design-review, which evaluates a file against UX heuristics, accessibility standards, visual hierarchy, interaction design, and product thinking. Feedback is sorted into a traffic-light system: red for blockers, yellow for recommended fixes, and green for what’s working. Primiani says it mirrors his personal review process, balancing usability, accessibility, product strategy, visual design, and business goals while prioritizing by user impact.

More skills to try

Cardona also shared three of her own builds as further examples:

  • /image-audit checks every image in a file for exportability and drops a report on the canvas
  • /shader-starter helps prompt for shaders with fewer input details
  • /make-a-type-scale derives a type scale from selected text and generates the matching font variables

Skill 10: Generate a Usability Test Discussion Guide

Created by: Neha Kodi, Figma
Skill: /usability-test-guide

This skill produces a ready-to-run discussion guide for usability tests, based on Neha's researcher best practices. It takes a design flow intended for testing and adds contextual moderation questions directly on the canvas next to each frame.

"Testing and learning is at the heart of my work at Figma, and this skill applies a few practices I don't compromise on—grounding tasks in a participant's goal, keeping probes open-ended, and scaling the number of questions to the simplicity or complexity of the design flow," Neha explains.

Miggi, a designer advocate for education at Figma who contributed to this skill collection, is an educator at heart. He focuses on grids, color theory, image performance, and motion design, treating screen recording videos as a fine art and documenting design tips on social media. Outside of work, he draws on coffee cups with Copic markers at cafes and collects synthesizers and drum machines.

Get Started with Custom Skills

You can learn how to make skills for the Figma agent in the help center. The Figma design agent is available in open beta for Full seat users on Professional, Organization, and Enterprise plans. Collab, Dev, and View seats can use the agent in their drafts. The agent is free to use during beta.

Related reading: Got skills? Make the Figma agent a better collaborator and Figma's design agent, now with custom tools and greater context.