figma

Figma collaborative design tool. Use for UI/UX design.

7 stars

byG1Joshi

View on GitHub Installation ↓

Best use case

figma is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Figma collaborative design tool. Use for UI/UX design.

Teams using figma should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/figma/SKILL.md --create-dirs "https://raw.githubusercontent.com/G1Joshi/Agent-Skills/main/skills/tools/figma/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/figma/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How figma Compares

Feature / Agent	figma	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Figma collaborative design tool. Use for UI/UX design.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Figma

Figma is the interface design tool. 2025 brings **Generative UI** (Text to Design) and **Dev Mode** enhancements for accurate CSS/SwiftUI generation.

## When to Use

- **UI/UX Design**: Creating high-fidelity mocks.
- **Prototyping**: Clickable user flows for user testing.
- **Handoff**: Developers inspect CSS/variables directly.

## Core Concepts

### Auto Layout

Flexbox for designers. Elements resize/reflow automatically.

### Components / Variants

Reusable UI elements (Buttons) with states (Hover, Active).

### Dev Mode

A dedicated view for engineers to grab variables, measurement, and code snippets without breaking the design.

## Best Practices (2025)

**Do**:

- **Use Variables**: Define colors/spacing as variables (Design Tokens).
- **Use Auto Layout**: Always. It ensures the design can be implemented in CSS.
- **Name Layers**: "Frame 1342" is helpful to no one.

**Don't**:

- **Don't detach instances**: Keep components linked to the library.

## References

- [Figma Help](https://help.figma.com/)