#design tokens
3 prompts found
Figma Component Prop Map from Design Token List (No Invented Plugins)
Map Figma component props from a design token list only. No invented plugins, file keys, or brand logos.
Act as a Figma component-prop mapper who only uses a pasted design token list. You write a prop map the token list already supports. You do not invent community plugins, file keys, or brand logos. This is not a full design-system audit and not a Figma Org admin review. You work only from Inputs. Do not invent stats, citations, quotes, URLs, names, IDs, or records that are not in Inputs. Inputs: - Design token list I lock (token names and values notes): [Tokens] - Component names I lock (or UNKNOWN): [Components] - Figma version notes I lock: [Version] - Prop row cap I lock: [Cap] - Words I must not use: [Banned] - What I must never invent (plugins, file keys, logos, hex not in Tokens): [Never] - Output format: [Format] - Language: [Lang] Generate: 1. Honesty ledger: Tokens nouns, Components, Version, Cap, Lang. Forbidden: invented plugins, file keys, logos, hex not in Tokens. 2. Prop map: at most Cap rows. Columns: component, prop, token. Missing components write NOT IN INPUTS. 3. Token gaps: list Tokens unused and Components without tokens as NOT IN INPUTS. 4. Version lock: print Version. Refuse plugins not named in Inputs. 5. Refuse list: inventing Tokens Studio, inventing fileKey, inventing a Nike logo, inventing #FF00AA when absent. 6. Compliance pass: quote Banned and Never hits. Cut them. Print row count. Format as Format. Constraints: - Map from Tokens only. No invented plugins or file keys. - Honor Cap and Version. No emojis.
Figma Variable Naming Map from Token Inventory (No Invented Hex Values)
Map Figma variable names from a locked token inventory. No invented hex values, aliases, or component names.
Act as an editor for this job: Figma Variable Naming Map from Token Inventory (No Invented Hex Values). Goal: Map Figma variable names from a locked token inventory. No invented hex values, aliases, or component names. You work only from Inputs. Do not invent stats, citations, quotes, URLs, names, IDs, or records that are not in Inputs. Inputs: - Source packet I lock: [Source] - Cap I lock: [Cap] - Words I must not use: [Banned] - What I must never invent: [Never] - Output format: [Format] - Language: [Lang] - Escalation or UNKNOWN field: [Extra] Generate: 1. Honesty ledger: Source nouns, Cap, Extra, Lang. Forbidden items from Never. Add any required not-advice banner for the domain. 2. Main draft: deliver the titled job using Source only. Honor Cap. 3. Allowlist or checklist of items present in Source; missing items NOT IN INPUTS. 4. Escalation/gaps: quote Extra or UNKNOWN; list five owed fields. 5. Refuse list: inventing identifiers, inventing fees, inventing stats, inventing paths, exceeding Cap. 6. Compliance pass: quote Banned and Never hits. Cut them. Print counts. Format as Format. Constraints: - Stay inside the job boundary of Figma Variable Naming Map from Token Inventory (No Invented Hex Values). - No invented evidence. Honor Cap. No emojis.
UI/UX Design System Creator: Components & Design Tokens
Build a complete UI/UX design system with reusable components, design tokens, spacing rules, and accessibility standards for web or mobile apps.
Act as a senior UI/UX designer and design systems architect. Create a complete design system specification for [Application Name], a [Web App / Mobile App / SaaS Platform] in the [Industry] space. Generate the following: Design Tokens: Color tokens: primary, secondary, success, warning, error, neutral (with hex values and usage rules) Spacing scale: base unit and scale progression (e.g., 4px base: 4, 8, 12, 16, 24, 32, 48, 64) Border radius tokens (small, medium, large, pill) Shadow/elevation levels (3 tiers with CSS box-shadow values) Breakpoints for responsive design Typography Scale: Font family selections (primary + monospace fallback) Size scale from caption to display heading Line height and letter spacing for each level Font weight usage guidelines Component Specifications: For each of the following, define states (default, hover, active, disabled, focus), sizing variants (sm, md, lg), and accessibility requirements: Buttons (primary, secondary, ghost, destructive) Form inputs (text, select, checkbox, radio, toggle) Cards (content card, action card, stat card) Navigation (navbar, sidebar, breadcrumb, tabs) Modals and dialogs Toast notifications Layout Grid: Define column grid, gutter widths, and container max-widths per breakpoint. Accessibility Checklist: WCAG 2.1 AA requirements for each component. Naming Convention: Establish a consistent naming scheme for all tokens and components (e.g., BEM, atomic). Constraints: All components must meet WCAG 2.1 AA contrast ratios. Provide CSS custom properties (variables) for all tokens. Tone: Technical, precise, and implementation-ready.