Figma Designer

Figma Designer provides an opinionated ELAYA-style design system for structured screens, components, tokens, and design-system reviews. It organizes a Figma file around reusable foundations, semantic color variables, named text styles, auto layout, and complete interactive states. Its defaults guide implementation while user requirements, existing brand rules, task scope, and accessibility take precedence.

Work begins by inspecting local variable collections, text styles, and available libraries so existing foundations can be reused. Missing foundations are organized into spacing, radius, Core Colors, and Color System collections. The raw palette lives in Core Colors; Color System supplies semantic aliases with Light and Dark modes. Designs bind to semantic tokens rather than directly to raw palette values.

A visible Foundations frame presents palette swatches, paired theme samples, spacing bars, radius samples, and text styles. Each sample is bound to its corresponding variable or style. Token names and aliases are labeled on the canvas; hex labels require resynchronization because text cannot bind directly to a color value. Screens are built section by section, with a screenshot and correction after each section.

Use this skill when a request specifically calls for ELAYA-style Figma screens, component libraries, tokens, or a review of that system. It supplements broader Figma implementation workflows with a particular design approach. Installing it does not authorize unrelated redesigns, shared-foundation changes, publishing, deployments, purchases, or account-permission changes.

The package supplies text guidance rather than a Figma connector, fonts, icon assets, or companion skills. Live edits require an authenticated integration with document-write and Plugin API capabilities. If those capabilities are unavailable, the deliverable is a clearly labeled design specification, with the missing capability identified. Account, library, and mode limits must be reported without purchasing upgrades. Real prices, metrics, guarantees, customer logos, people, and testimonials require supplied or verified evidence; fictional demo content must be labeled.

Inputs include the authorized Figma file, requested surface, brand colors, typography choices, existing libraries, and relevant reference images. The file is organized into Foundations, Components, and Screens pages, with meaningful layer names and new frames placed in clear canvas space. Existing layers are preserved unless the user requests moving or deleting them.

Every frame with children uses auto layout. Padding and gap bind to spacing/* variables with GAP scope. Allowed values are 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, and 96. Main buttons use 8 vertical padding and 12 horizontal padding. Corner radii bind to radius/* variables with CORNER_RADIUS scope, using 0, 2, 4, 6, 8, 12, 16, 24, or full. When nested shapes have a gap under 32, the inner radius follows outer radius minus gap if the result is greater than 2.

Typography uses the selected brand font after checking availability, normally with one typeface per file. Geist Mono can accompany it for code, data, or numbers. Text styles follow Heading, Title, Body, Button, and Caption groups, using the Tailwind size scale from 12 through 128. Italics and weights above bold are excluded. Heading 1 is the hero style; headings use Regular, titles Medium, and body styles provide stronger and regular options. New styles extend the appropriate numbered group rather than introducing arbitrary names or sizes. The web companion uses a different heading weight, so handoff needs an approved mapping.

Color roles cover Border/, Surface/, Action/, Text/, Icon/, and Overlay/. Core palettes include Primary, Secondary, Accent, Grayscale, Red, Green, and Yellow, with at least ten shades each. Transparent overlays alias Grayscale-Alpha colors whose transparency is stored in RGBA a; aliases cannot add opacity. Variables receive specific fill, text, or stroke scopes rather than ALL_SCOPES. Light and dark are modes, with actual contrast checked in both.

Surfaces are flat, with no background gradients. The hero heading may use a horizontal text gradient with bound stops; its worst-contrast point must pass against the actual background. Dark surfaces follow the defined dark palette, and one accent stays below 80 percent saturation. Borders surround a card completely or are omitted; row dividers use a thin rectangle with a border token.

Body text requires at least 4.5:1 contrast, while large text and UI elements require 3:1. Mobile touch targets are at least 44 by 44, and states use labels, icons, or weight alongside color. Desktop frames use 1440 width with a centered 1200 to 1280 container; responsive versions can add 768 and 390 frames. Hero headings and subheadings are capped at 680 width. Layout avoids a default three-equal-card pattern and aligns corresponding content across adjacent cards.

Repeated elements become components with text properties. Interactive components cover Default, Hover, Pressed, Focus, and Disabled; inputs also cover Error and Filled. Buttons combine five types with five states, producing 25 variants per requested size, including a visible focus ring. Data views include layout-shaped Loading skeletons, composed Empty views, and Error states. Prototype motion uses Smart Animate with the custom bezier 0.22, 1, 0.36, 1, at 500ms for layout changes and 300ms for color or opacity.

Available Figma tools and their current instructions must be discovered before use. The upstream workflow refers to figma-use, use_figma, search_design_system, figma-generate-design, and figma-generate-library; these are not bundled or universally available APIs. Fonts are checked with figma.listAvailableFontsAsync(). Icons come from Phosphor, Solar, or Iconamoon as imported SVGs, with one stroke weight and bound icon colors.

Landing pages additionally use the user's landing-page-design guidance, including the large tagline prototype interaction. If that companion is missing, offer a scoped structure specification and disclose the limitation. Final checks cover bindings, themes, contrast, component states, canvas samples, typography, and file hygiene. Headings and buttons use sentence case, hero text avoids periods and orphaned final words, and content avoids filler claims. Report what was actually built and what was skipped rather than assuming bindings or edits succeeded.