Design Rayden UI Components and Screens in Figma

Rayden UI Design Skill builds and maintains Rayden components and screens in Figma through Figma MCP. It applies the Rayna UI design system using resolved tokens, craft rules, anti-pattern checks, and screen-layout patterns. Its workflow covers creating a component, composing a complete screen, auditing an existing design, and adding variants to an existing component.

The process first checks the Figma connection and write access, then loads component specifications, anatomy, and tokens. It identifies the type of design task before choosing a style mode and generating Figma Plugin API code. Required helpers handle color conversion, font loading, shadows, and borders, and every frame uses auto layout.

Three style modes adjust spacing, shadows, typography, and visual weight. Balanced is the default for most work, conservative suits dense administration interfaces, and expressive suits marketing pages. Screenshots taken after build stages support checks for alignment, spacing, token colors, hierarchy, radii, shadows, and primary-action count.

Use it to create Rayden components with their variants, compose dashboards or other screens, audit Figma design-system compliance, add missing states, or synchronize React component changes back into a design file. Screen examples include landing pages, authentication forms, settings, and data tables.

The target file must be writable, and a Figma Dev or Full seat is required rather than Viewer access. The skill operates within the target Figma document. Its scope is this design system and workflow; missing inputs or permissions need clarification. Mechanical checks do not replace human review of the completed design's aesthetics.

Inputs include the Figma file URL, requested component or screen, desired variants, and optional style mode. The URL is supplied as the last command argument. A balanced dashboard request can use:

/rayden-use dashboard-screen balanced https://figma.com/file/abc123

Outputs are Figma components, variant sets, composed screens, or compliance findings. The Button example includes primary, secondary, grey, and destructive variants in solid and outlined styles at two sizes. The dashboard example combines a sidebar, KPI cards, a data table, and an activity feed. Existing Input components can be extended with error and success states.

Audit checks include exact token colors, spacing on a four-pixel grid, and concentric radii. Troubleshooting covers unavailable fonts, variants that do not combine, inaccurate colors, and write-permission failures. Inter is preferred, with Roboto as a fallback. Components must share a parent frame before combining as variants, and colors use resolved hexadecimal values rather than approximations.

Figma MCP supplies document operations, identity checks, and screenshots. Component data comes from the @raydenui/ai MCP server or installed package, while supporting files supply tokens, craft rules, anti-patterns, and layout guidance. Figma Plugin API helpers include hexToRgb, loadFonts, applyShadow, and applyBorder.

Related package skills include rayden-code for React implementation and rayden-compose for dedicated full-page composition. The source limits operations to local supporting resources and the Figma API.

It suits people maintaining Rayden-based Figma design systems or preparing screens from established components. It also supports teams keeping React components and Figma representations aligned.