playbooks

home / skills / partme-ai / full-stack-skills / figma

figma skill

/skills/figma

This skill guides you through using Figma for design creation, components, prototyping, and collaboration to streamline design systems.

npx playbooks add skill partme-ai/full-stack-skills --skill figma

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
672 B
---
name: figma
description: Provides comprehensive guidance for Figma design tool including design creation, components, prototyping, collaboration, and design systems. Use when the user asks about Figma, needs to create designs, work with Figma components, or collaborate on design projects.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- [待完善：根据具体工具添加使用场景]

## How to use this skill

[待完善：根据具体工具添加使用指南]

## Best Practices

[待完善：根据具体工具添加最佳实践]

## Keywords

[待完善：根据具体工具添加关键词]

Overview

This skill provides practical, workflow-focused guidance for using Figma across design creation, component systems, prototyping, and collaboration. It helps designers and teams produce consistent UI, build reusable components, run interactive prototypes, and streamline handoffs. Use it to solve specific Figma tasks, improve design system practices, and accelerate team coordination.

How this skill works

The skill inspects user goals and the current design stage to recommend targeted Figma actions: creating frames and components, defining variants, setting constraints, and building interactive prototypes. It suggests step-by-step operations, layer and naming conventions, component architecture, and collaboration etiquette. It also provides troubleshooting tips for common issues like misaligned constraints, broken prototypes, or version conflicts.

When to use it

  • Starting a new UI or product design and setting up the file structure
  • Converting visual elements into reusable components and variants
  • Building and testing interactive prototypes for usability validation
  • Establishing or scaling a design system with tokens and shared libraries
  • Preparing design files for developer handoff and collaboration

Best practices

  • Use consistent naming conventions for frames, layers, and components to improve searchability
  • Build atomic components first (atoms → molecules → organisms) and expose only necessary properties as variants
  • Define constraints and auto-layout early to ensure responsive behavior across sizes
  • Keep a single source of truth: centralize styles, color tokens, and typography in a shared library
  • Annotate prototypes with clear flows and use hotspots/rules for conditional interactions

Example use cases

  • Create a responsive header component with logo, nav, and mobile menu variant using auto-layout
  • Convert repeated card designs into a component with image, title, and CTA as editable properties
  • Set up a design system file: color tokens, typography scales, spacing tokens, and base components
  • Build a high-fidelity prototype with interactive overlays, transitions, and device frames for user testing
  • Prepare a developer handoff package: export specs, CSS values, and an organized component library

FAQ

Can this skill help set up a design system from scratch?

Yes. It guides you through tokens, shared styles, component hierarchies, and distribution via libraries.

Will it explain responsive layouts in Figma?

Yes. It covers auto-layout, constraints, and techniques to make components adapt to different screen sizes.

Can it assist with developer handoff?

Yes. It outlines how to prepare specs, export assets, and annotate interactions for clear developer implementation.