스킬 찾기

Route product design requests to focused skills for user research, experience reviews, visual exploration, prototype building, or sharing. This entry point selects the appropriate workflow rather than performing the design work itself.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Finding the right workflow for a product design request
• Routing a product flow review to an audit
• Starting visual exploration for a new prototype

Turn a product design brief and visual references into three distinct design images. Compare layouts, information priorities, and interaction approaches, then refine or combine ideas to choose a visual direction before implementation begins.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Compare alternative layouts for an existing screen
• Explore three directions for a new product idea
• Refine a design using screenshots or Figma references

Translate Figma designs into SwiftUI code, or bring SwiftUI views, screens, and design tokens into Figma. The guidance preserves iOS interface patterns, semantic colors, and SF Symbols names across both directions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implementing a Figma screen in SwiftUI
• Bringing an existing SwiftUI screen into Figma
• Mapping iOS colors and icons between design and code

Create editable FigJam diagrams for workflows, system architecture, data relationships, and schedules. The skill selects a suitable diagram type and guides Mermaid, a text format for diagrams, while accounting for rendering limits.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Visualizing a workflow or decision tree
• Mapping services and data stores
• Showing API interactions over time

Create and edit presentations in Figma Slides using the use_figma tool. Build layouts that follow brand guidelines or reference files, update existing slides, organize sections, and add speaker notes when requested.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a presentation that follows brand guidelines
• Update text and layouts in an existing deck
• Organize slides into sections

Create and maintain Code Connect templates that link published Figma components to existing code components. Map text, variants, visibility settings, and nested components so the displayed code snippets reflect the selected design properties.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Linking Figma components to existing code components
• Creating Code Connect template files
• Mapping design variants to code properties

Create and edit FigJam boards through Figma's use_figma tool. Organize meeting or brainstorming content with sections, sticky notes, shapes, connectors, and tables, and inspect existing board elements before updating their text, styling, or positions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Prepare a brainstorming board with sticky notes
• Build a retrospective or meeting board
• Draw diagrams with shapes and connectors

Create a blank Figma design, FigJam, or Slides file with a chosen name. Resolve the destination plan, save the file in its drafts folder, and obtain a URL and file key for subsequent editing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a blank Figma design file
• Start a named FigJam whiteboard
• Create an empty Slides presentation

Build or update a Figma design system from existing code. Organize shared colors, spacing, and typography, create reusable components with states and theme bindings, document their use, and check differences between the implementation and Figma.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a Figma component library from existing code
• Organizing shared settings for light and dark themes
• Creating a button with variants and variable bindings

Add, edit, or inspect animation on Figma elements through use_figma. Work with keyframes, existing animation styles, color changes, easing that controls how movement accelerates, and timeline duration, with video frame checks when needed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding position or color animation to Figma elements
• Adjusting easing and animation timing
• Applying or removing existing animation styles

Turn Figma animations into runnable application code by combining design structure with motion data. Preserve timing, easing—the way movement accelerates—and coordinated animations while adapting to the project's existing libraries and reduced-motion accessibility preferences.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implement an animated component from a Figma URL
• Coordinate several elements on a shared animation timeline
• Reproduce animation along an SVG path

Inspect and edit Figma files through JavaScript using the Plugin API. Guides changes to text, layout, variables, and components, with incremental steps and visual checks to verify the resulting design.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Inspect pages, components, and variables in a Figma file
• Update text and colors across matching elements
• Adjust auto-layout containers and child sizing

Build or update Figma pages, dialogs, and panels from code or descriptions. The workflow reuses design system components, shared colors, spacing, and text styles, producing assembled views that remain linked to existing design resources.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Recreate an application page in Figma
• Update an existing screen to match code
• Build a dialog using shared components

Turn Figma designs into screen code that fits an existing project. The workflow reuses existing components and shared style values, follows design notes, and uses exported images and icons to preserve the design’s appearance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implement a screen from a Figma design
• Reuse existing components when building a design
• Reproduce images and icons from exported assets

Design and implement iPolloWork plugin interfaces using shared components, colors, typography, and interaction rules. Covers host React and iframe integration, component readiness, and checks for loading, errors, keyboard use, and recovery.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build plugin forms with shared components
• Integrate shared controls into iframe plugins
• Design loading, error, and retry states

Turn a Figma design into code that fits an existing project. Reuse its components and shared style values, follow designer notes and component mappings, and adapt Figma's reference output to the project's framework and conventions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implementing a screen from a Figma design
• Reusing existing project components in a design implementation
• Applying designer notes and shared style values

Build or update a Figma design system to match a codebase. Organize reusable design values, light and dark themes, component variants, and documentation, then check component structure, appearance, and bindings to those values.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a Figma component library from existing code
• Set up shared design values and light and dark themes
• Create components with variants and variable bindings

Create and maintain Code Connect templates that link published Figma components to existing code components. Map text, variants, toggles, and nested components so code examples reflect the selected component's design settings.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connect published Figma components to existing code
• Map design variants to component properties
• Reflect configurable nested components in code examples

Translate Figma designs into SwiftUI code, or bring SwiftUI views, screens, and design tokens into Figma. The guidance preserves iOS interface patterns, semantic colors, and SF Symbols names across both directions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implementing a Figma screen in SwiftUI
• Bringing an existing SwiftUI screen into Figma
• Mapping iOS colors and icons between design and code

Turn Figma animations into runnable application code by combining design structure with motion data. Preserve timing, easing—the way movement accelerates—and coordinated animations while adapting to the project's existing libraries and reduced-motion accessibility preferences.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implement an animated component from a Figma URL
• Coordinate several elements on a shared animation timeline
• Reproduce animation along an SVG path

Use JavaScript through Figma's Plugin API to inspect file structure and edit design elements, components, variables, and layouts. Follow incremental steps with font loading, returned element IDs, and visual checks to validate changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Edit shapes and text in a Figma file
• Set up components, variants, and shared design values
• Adjust auto-layout, fills, and variable bindings

Add, edit, or inspect animation on Figma elements through use_figma. Work with keyframes, existing animation styles, color changes, easing that controls how movement accelerates, and timeline duration, with video frame checks when needed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding position or color animation to Figma elements
• Adjusting easing and animation timing
• Applying or removing existing animation styles

Build or update Figma pages, modals, and other composed views from code or descriptions. Reuse existing components, shared color and spacing values, and styles, assembling and checking the design section by section.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Recreate an application page in Figma from code
• Build a landing page using an existing design system
• Create a modal or sidebar from a description

Create editable FigJam diagrams for workflows, system architecture, data relationships, and schedules. The skill selects a suitable diagram type and guides Mermaid, a text format for diagrams, while accounting for rendering limits.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Visualizing a workflow or decision tree
• Mapping services and data stores
• Showing API interactions over time