'figma' 검색 결과

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

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

Figma 파일에서 요소 계층, 색상과 글자 등의 디자인 설정, 내보낼 이미지 자료를 추출합니다. 후속 변환과 구현에 사용할 프로젝트 파일로 저장합니다.

• Figma 요소 구조 추출하기
• 색상, 글자, 간격 설정 모으기
• 구현에 사용할 자료 준비하기

Analyze a Figma file and turn its pages, screens, components, instances, and design tokens—shared design values—into an interactive graph. Open the dashboard to explore the file's structure and relationships.

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

• Review the structure of a Figma file
• Explore components, variants, and instances
• Inspect how shared design values are used

Create project-specific rules for turning Figma designs into code. The skill examines existing components and styling, then saves conventions for naming, file locations, reusable design values, and implementation steps in the coding agent's rule file.

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

• Setting up Figma implementation rules for a new project
• Teaching an AI agent existing component conventions
• Standardizing Figma implementation across a team

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

Builds or updates a Figma design system library from an existing codebase. Helps keep reusable design components aligned with the components already shipped in a product, giving design teams a reference that reflects the implementation.

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

• Creating a Figma library from an existing codebase
• Updating a design library to match shipped components
• Aligning design references with implementation

Figma Design이나 FigJam에 새 빈 파일을 만듭니다. 에이전트로 디자인 시스템을 정비하거나 워크숍을 준비할 때 첫 작업 파일을 마련하는 데 사용합니다.

• 빈 Figma Design 파일을 만듭니다
• 워크숍용 FigJam 파일을 준비합니다
• 디자인 시스템 작업의 시작 파일을 마련합니다

Build or update a Figma design system from an existing codebase. Organize shared design values, light and dark themes, reusable components, and documentation through staged reviews, then check consistency, accessibility, and links between design and code.

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

• Creating shared color and spacing variables from code
• Setting up light and dark themes
• Building a reusable component library with documentation

Inspect and edit Figma files through JavaScript using the Plugin API. Create shapes, text, reusable components, and design variables, then check structure and screenshots as changes are made in small steps.

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

• Inspect pages and existing components in a Figma file
• Create reusable components and variants
• Create and bind color or spacing variables

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

소스 코드, Figma 내보내기 데이터, 스크린샷에서 색상·글꼴·간격 등의 디자인 설정을 모아 출처와 사용 위치를 기록한 JSON으로 정리합니다.

• 코드에 흩어진 디자인 설정 정리
• Figma 디자인 이전 준비
• 스크린샷에서 디자인 설정 추출

Find code components that match Figma design components by comparing names, structure, and settings. Presents candidates for approval, then creates Code Connect mappings, explicit links between design components and their implementations.

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

• Link a Figma button to its code component
• Find unconnected components within a frame
• Compare similar implementation candidates

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 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

검토에서 수락한 결과물을 CLI, 코드 에이전트, Figma 등 지정한 작업 환경에 전달하고, 결과물 관리 정보에 출력 대상과 배포 이력을 추가합니다.

• 검토한 결과물을 코드 에이전트에 전달합니다
• 편집 결과를 원본 Figma 파일에 반영합니다
• GitHub에 PR로 결과물을 전달합니다

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

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

Inspect Figma screens to gather details for implementation, including component variants, spacing, shared design settings, and image assets. It helps an agent understand layouts and design libraries before turning a design into code.

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

• Gathering implementation details from a Figma screen
• Checking component variants and spacing
• Extracting image assets for implementation

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

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

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

Figmaデザインをノード情報を活用してレビューし、該当箇所に個別コメントを投稿する。Use when (1) ユーザーがFigmaデザインのレビューを依頼した時 (2) 実装者目線、エンジニア視点でのフィードバックが必要な時 (3) デザインに対してFigma上にコメントを残したい時。padding/margin、色のコントラスト、グリッド整合性などベーシックなデザインチェックも実施。Requires Figma MCP connection and FIGMA_TOKEN environment variable.

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

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

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