Figma Agents Now Support Custom Skills: 10 Designer-Built Examples

Figma has rolled out the ability to build custom skills for its design agent directly within the platform. These skills, written as plain-text markdown files, function as ordered instructions or guided prompts that help teams work more efficiently with the agent. While they may initially appear geared toward engineers, they actually excel at codifying the design judgment and best practices that experienced designers apply daily.

Starting today, designers can collaborate with the agent to author skills in Figma by asking it to create a skill using a design frame as reference, or by providing specific steps and guidelines. Once the agent drafts a skill, users can preview it, test it in their chat, and iterate by editing steps, adjusting formatting, requesting recommendations, or opening the markdown editor for manual refinement. Many of these skills also work with Figma's MCP server in third-party agents, with skill examples available in the company's GitHub repository.

Ten Community Skills Worth Exploring

1. Apply an x-ray effect to your images

This skill transforms a photograph or text description into a realistic radiograph that reveals internal object details. It generates two finishes immediately—glowing white on black and soft dark tones on white. According to its creator Adele, "I love making collages, and that really shows in the skill. My favorite part is layering multiple X-rays on top of each other. They're monochrome with glowing edges, so they stack into really cool collages, and the results aren't just cool on their own—they also blend together beautifully."

2. Find where motion is missing

The skill examines designs to pinpoint locations that lack animation but could benefit from it, and conversely, areas that may be over-animated. It addresses questions such as "What could be animated here?" and "How do I make this feel more alive?" by proposing specific motion additions with exact values. Emil, who created it, notes: "This skill works best when it's pointed at one frame and extra context is added, such as the target persona for the page. You can also use it to avoid over-animating, by asking, 'Is there anything that shouldn't animate at all?'"

3. Bring motion to a static composition

This skill constructs a camera rig—a nested layer structure that simulates actual camera movement—around selected elements, then applies pan, zoom, or roll animations like a motion director framing a shot. For instance, it can execute a grid tour through a series of cards before zooming back to the full view. Mallory explains: "It's a very niche skill, but it helps create zoom and pan camera movement without touching any frames in the design."

4. Catch the details your interface is missing

This skill provides the agent with Jakub's personal standards for interface craft—specific benchmarks spanning typography, layout, accessibility, motion, and product writing. Jakub states: "When you go from using a good product to a great one, you can feel the difference. It's usually not a single thing, but instead a lot of small things that add up. This skill captures these details and best practices that are often overlooked or not immediately obvious."

5. Document components automatically

Selecting a single component or component set triggers the creation of a ready-to-share documentation frame on the canvas. The output includes:

• A header containing name, version, owner, and description
• A live preview
• A variant grid
• A do's and don'ts section
• An interaction and states breakdown
• The component's complete anatomy

Mauro, the creator, explains: "My philosophy is simple—automate the repetitive tasks that used to take me hours, so I can focus on actual creative work. With this skill, I took the exact handoff structure that has proven to work best over my years of experience and packaged it so any designer can adapt it to their own design system in a single click. It's built to be scalable, predictable, and 100% editable directly on the Figma canvas."

6. Match colors to tokens

This skill converts a selected Figma component into a comprehensive color specification by mapping every visible fill, stroke, and shadow to its design token or style, flagging hard-coded colors, and documenting results across variants and states. Ian notes: "One of my favorite examples is a button with several types, states, and color modes. When a component uses layered fills or gradients, it lists each fill in stacking order and each gradient stop with its position, color, and bound variable. Engineers can reproduce the treatment directly from the annotation without inspecting every layer manually."

7. Audit your components in one pass

The skill scans a page and performs cleanup operations, then catalogs every component with a live preview while:

• Flagging orphans, duplicates, and naming errors
• Fixing issues automatically by cloning orphaned components and swapping every instance to the corrected version
• Writing complete results into a styled audit document on the canvas

Amy shares: "It saves real time. Before, I'd have to right-click, go to the main file, and copy components over manually, or deal with ghost tokens and restyle everything by hand. Now I can do that kind of bulk editing all at once."

8. Design for every state

Taking any screen, component, or flow as input, this skill expands it into the complete set of states, ensuring every condition is designed before handoff to engineering. It accounts for:

• Loading states
• Empty states
• Error states
• Disabled states
• Partial data states
• Edge cases

The output includes triggers, copy, transitions, and implementation notes, transforming a polished happy-path mockup into something engineers can build. Linda explains: "I kept seeing the same review comments on every handoff: 'What happens when this fails?' and 'What does empty look like?' I eventually realized the checklist in my head should be a skill anyone, human or agent, can run."

9. Give your design a crit

This skill reviews a file against UX heuristics, accessibility standards, visual hierarchy, interaction design, and product thinking, then organizes every note into a traffic light system:

• Red for blockers
• Yellow for recommended fixes
• Green for what's already working

Joey states: "This skill reflects my personal review process, balancing usability, accessibility, product strategy, visual design, and business goals while prioritizing feedback by user impact."

10. Create a discussion guide for usability testing

Based on researcher best practices, this skill generates a ready-to-run discussion guide for usability tests. It examines a design flow intended for testing, then adds contextual moderation questions directly on the canvas next to each frame. Neha notes: "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."

Availability and Getting Started

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 access the agent in their drafts. During the beta period, the agent is free to use. Additional guidance on creating skills for the Figma agent is available in the help center.