creator profile · 10 approved skills · page 1 of 1
figma publishes 10 approved skills on explainx.ai. This page loads 10 skills at a time. Current page is led by figma-implement-design.
total skills
10
showing 10 on this page
page installs
1
1 this week
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MC…
Establish bidirectional links between Figma design components and code implementations using Code Connect. \n \n Requires Figma MCP server connection and published components on O…
Translates Figma designs into production-ready code with pixel-perfect visual fidelity. \n \n Requires Figma MCP server connection and a Figma URL with file key and node ID to ext…
Use the create_new_file MCP tool to create a new blank Figma file in the user's drafts folder. This is typically used before use_figma when you need a fresh file to work with.
This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, search…
Build professional-grade design systems in Figma that match code. This skill orchestrates multi-phase workflows across 20–100+ use_figma calls, enforcing quality patterns from rea…
This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code whe…
Use this skill to create or update full-page screens in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hard…
Use the use_figma tool to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in references/.
Custom design system rules for consistent Figma-to-code implementation across your project. \n \n Generates project-specific conventions for component organization, styling, desig…
