HomeCasa Prompts

Figma component spec with auto layout, variants and variables

Get a full spec for a Figma component: layer tree, auto layout settings, properties and variants, variables and modes, states, long-content stress tests and developer handoff notes. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.

Advanced · Text · Pending editorial review

Designed for:

Prompt

Act as a design systems designer who is an expert in Figma (auto layout, component properties, variables and modes).

Context:
- Component: {{component}}
- Use cases: {{use_cases}}
- Required variations: {{variations}}
- Existing tokens or variables: {{tokens}}
- Target platform: {{platform}}

Deliverables:
1. Anatomy: a layer tree with clear layer names (in a code block), marking which layers are nested instances.
2. Auto layout settings per layer: direction, gap, padding, alignment, resizing (hug, fill, fixed), min and max width and whether wrap is used.
3. Component properties: variants, booleans, instance swap and text. Design the variant matrix to avoid combinatorial explosion and explain what you solve with properties instead of variants.
4. Variable bindings: spacing, color, radius and typography; light/dark and density modes if relevant.
5. States: default, hover, focus, pressed, disabled, loading and error where relevant, with the exact change for each.
6. Stress tests: long text, translations up to 30-40% longer (for example German), missing icons, narrow containers and right-to-left if relevant.
7. Handoff notes: mapping between Figma properties and code props, and measurements engineering must respect.
8. A QA checklist before publishing the component to the library.

Constraints:
- Use only real Figma features; if one depends on the plan or a recent release, say so and offer an alternative.
- Do not invent tokens; if some are missing, suggest provisional names marked [FILL IN].
- If the use cases are unclear, ask me before defining variants.

Format: a code block with the layer tree, tables for auto layout, properties and states, and a final checklist.

How to use it

  1. Describe the component and the screens where it will be used. 2. Paste the names of your current variables or tokens. 3. Build the component in Figma following the layer tree and run the checklist before publishing.

Usage example

Component: product card · Variations: with and without discount, horizontal and vertical · Tokens: space/100-800, color/surface · Platform: responsive web.

Sample output

1. Anatomy

ProductCard (component · auto layout)
├── Media (frame)
│   ├── Image
│   └── DiscountBadge (instance · boolean)
└── Content (frame)
    ├── Title (text)
    ├── Rating (instance · boolean)
    └── PriceRow (frame)
        ├── Price (text)
        └── OldPrice (text · boolean)

2. Auto layout

LayerDirectionGapPaddingResizing
ProductCardVertical / horizontal by variantspace/3000Fill · min 160px
ContentVerticalspace/200space/400Fill
PriceRowHorizontalspace/2000Hug

3. Properties

  • Variant: orientation = vertical | horizontal (just 2 variants).
  • Booleans: hasDiscount, showRating, so variants don't multiply.
  • Text: title, price.

That covers 8 combinations with 2 variants instead of 8.

6. Stress tests

  • 3-line title: truncate at 2 lines with an ellipsis.
  • German translation (+35%): the price must not wrap…

Key facts

Category
UI/UX design · Figma
Output type
Text
Level
Advanced
Designed for
ChatGPT, Claude, Gemini and Microsoft Copilot
Verified in
Pending editorial verification
Variables
Component, Use cases, Required variations, Tokens or variables and Target platform
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

When should I use a boolean property instead of a variant?

When you only show or hide a layer, such as an icon or badge. Keep variants for changes in structure or style, because every combination multiplies the number of variants.

Why test the component with translated text?

Because languages like German or French often run much longer than English. If auto layout cannot absorb that, the component breaks in production.

What is this prompt for?

Get a full spec for a Figma component: layer tree, auto layout settings, properties and variants, variables and modes, states, long-content stress tests and developer handoff notes.

Which AI tools does it work with?

It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Component, Use cases, Required variations, Tokens or variables and Target platform). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is advanced: it is meant for people with experience in the topic who can evaluate and adjust the result.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts