skills.rest
laraxot
laraxotOFFICIAL
Explore all skills by this author →
GitHub

bmad-wds-edit-components

Open and edit design system components in Figma.

26|23|Updated Dec 16, 2025
Search Tags:#UI/UX#design system#visual design#Figma#component editing
One-click install
npx skills add https://github.com/laraxot/laravelpizza.com --skill bmad-wds-edit-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bmad-wds-edit-components
Source: https://github.com/laraxot/laravelpizza.com/tree/main/.github/skills/bmad-wds-edit-components
Command: npx skills add https://github.com/laraxot/laravelpizza.com --skill bmad-wds-edit-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables visual editing of design system components in Figma, allowing for real-time adjustments and enhancements.

Core Features & Use Cases

  • Open Components: Access and edit design system components within Figma.
  • Visual Editing: Make design changes directly within the Figma interface.
  • Use Case: For designers working on a UI component library, this skill allows for quick updates and reviews without the need for multiple tool switches.

Quick Start

Load the workflow from {project-root}/_bmad/wds/workflows/7-design-system/workflow-edit.md, and follow the directions provided to begin editing your components.

Frequently Asked Questions about bmad-wds-edit-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visually edit design system components in Figma?▼

To visually edit design system components in Figma, load the workflow file and follow the provided directions to access and modify your UI components directly within the Figma interface for real-time visual adjustments.

What is the best way to manage visual adjustments for a UI component library?▼

The best way to manage visual adjustments for a UI component library is using a visual editing skill that enables real-time updates and reviews directly in Figma, eliminating the need to switch between multiple design tools.

Do I need a specific workflow file to edit Figma design system components?▼

Yes, you need access to the specified workflow file located at {project-root}/_bmad/wds/workflows/7-design-system/workflow-edit.md to get instructions on how to effectively open and edit your design system components.

Can I make real-time design changes without switching tools while updating Figma components?▼

Yes, you can make real-time design changes without switching tools, as this capability allows you to perform quick updates and visual reviews entirely within the Figma interface while working on your UI component library.

Why use a dedicated workflow for editing Figma design system components instead of standard editing?▼

Using a dedicated workflow for editing Figma design system components provides structured instructions for visual adjustments and reviews, ensuring UI component library updates are managed consistently and effectively without tool switching.

Related Skills

Explore More Design & Creative Skills→
lalaABClalaABC

figma-create-design-system-rules

Generates Markdown-based design system rules for Figma-driven codebases.

Community
Advanced
Ameen-AlamAmeen-Alam
1

theme-factory

Apply curated themes from a markdown catalog to slides and documents.

Community
Basic
Luohao-YanLuohao-Yan
6

figma-code-connect-components

Map Figma design components to matching code components via Code Connect.

Community
Advanced
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic