# Figma

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

- Skill: `majiayu000/figma-4` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/figma-4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/figma-4/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/figma-4

---


# 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/)