For the uninitiated, skills are plain-text markdown files that help you work with an agent. Since they take the shape of ordered instructions or guided prompts, at first glance, they can seem like they’re built more for engineers than designers. But they’re actually perfect for capturing the opinions and judgment calls that every designer carries around.Other skills I’ve built• /image-audit to check the exportability of every image in a file and drop a report right on the canvas• /shader-starter to help people prompt for shaders with fewer details• /make-a-type-scale to build a type scale from selected text and generate the matching font variablesSometimes, one skill is all it takes to unlock a new workflow. My “aha” moment came while building a motion tutorial: I wrote a skill for the Figma agent to apply my go-to easing curves to the keyframes I was working on, and called it /ease-like-miggi. When my team used it in their workflows, their motion designs eased like mine, and I was all in.Starting today, you can work with the agent to author skills in Figma. Here’s how:Ask the agent to create a skill using a design frame as reference, or one that follows specific steps or guidelines you provide.Preview the skill once the agent drafts it, then put it to work in your chat.Keep iterating as you test it—edit your steps, change its formatting, ask for recommendations, or open the markdown editor directly for manual changes.I was curious about how other designers use skills when they work with the Figma agent, so I dug into the Figma Community. Here are 10 of my favorites, from unifying aesthetics to applying design system principles.1. Apply an x-ray effect to your imagesCreated by: Adele Ix, freelancerSkill: /xray-scanWhat it does: Turns a photo or text description into a realistic-looking radiograph that visualizes the internal details of an object. It generates two finishes right away—glowing white on black and soft dark tones on white.In Adele’s own words: “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 missingCreated by: Emil Kowalski, LinearSkill: /find-animation-opportunitiesWhat it does: Scans designs to identify places that don’t animate but should, and vice versa. The skill addresses questions like “What could be animated here?” or “How do I make this feel more alive?” It proposes what motion to add, where, and with exact values. You can implement these changes yourself in Figma Motion, or ask the agent to apply them for you.In Emil’s own words: “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 compositionCreated by: Mallory Dean, FigmaSkill: /camera-pan-and-zoomWhat it does: Builds a camera rig—a nested layer setup that mimics real camera movement—around selected content, then animates the pan, zoom, or roll like a motion director framing a shot. For example, it can do a grid tour through a set of cards before zooming back out to the full view.In Mallory’s own words: “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 missingCreated by: Jakub Krehel, InterfereSkill: /better-interfaceWhat it does: Gives the agent Jakub’s own rulebook for interface craft—specific standards across typography, layout, accessibility, motion, and product writing.In Jakub’s own words: “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 automaticallyCreated by: Mauro Berteri, Itti DigitalSkill: /component-handoffWhat it does: Turns a single component or component set into a ready-to-share documentation frame on the canvas. Select one, and it lays out:A header with a name, version, owner, and descriptionA live previewA variant gridA do’s and don’ts sectionAn interaction/states breakdownThe component’s full anatomyIn Mauro’s own words: “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 tokensCreated by: Ian Guisard, UberSkill: /create-colorWhat it does: Turns a selected Figma component into a complete color specification. It maps every visible fill, stroke, and shadow to its design token or style, flags hard-coded colors, and documents the results across variants and states.In Ian’s own words: “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 passCreated by: Amy Ha, WalmartSkill: /analyze-componentsWhat it does: Crawls a page and cleans up what it finds. It then catalogs every component with a live preview, and:Flags orphans, duplicates, and naming errorsFixes issues automatically by cloning orphaned components and swapping every instance to the fixWrites the full results into a styled audit document on the canvasIn Amy’s own words: “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 stateCreated by: Linda Ojo, PaystackSkill: /ui-state-expanderWhat it does: Takes any screen, component, or flow and expands it into the complete set of states. This skill makes sure every state is designed before it ships to engineering, accounting for:Loading statesEmpty statesError statesDisabled statesPartial data statesEdge casesIt comes back with triggers, copy, transitions, and implementation notes, so a polished happy-path mockup becomes something engineers can build.In Linda’s own words: “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 critCreated by: Joey Primiani, SuperfutureSkill: /superfuture-design-reviewWhat it does: Reviews a file against UX heuristics, accessibility standards, visual hierarchy, interaction design, and product thinking. It then sorts every note into a traffic light system:Red for blockersYellow for recommended fixesGreen for what’s already workingIn Joey’s own words: “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 testingCreated by: Neha Kodi, FigmaSkill: /usability-test-guideWhat it does: Provides a ready-to-run discussion guide for usability tests based on Neha’s best practices as a researcher. This skill looks over a design flow intended for usability testing, then adds contextual moderation questions directly on the canvas next to each frame.In Neha’s own words: “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.”Learn more about 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.