“figma”的搜索结果

根据代码或文字说明创建、更新Figma界面，使用设计系统的组件，以及颜色、间距等共享视觉设置，将应用页面转换为Figma设计。

• 将应用代码转换为Figma设计
• 根据文字说明创建界面
• 使用共享组件更新界面

以现有代码库为基础，创建或更新Figma设计系统组件库，让产品中已实现的组件与设计时使用的参考内容保持一致。

• 从代码库创建Figma组件库
• 按已实现的组件更新设计库
• 统一设计参考与产品实现

Bring Figma logos, brand colors, and components into HyperFrames as local assets and editable HTML. Reconstruct animation from storyboard states, with additional motion import options when a compatible connector or native export is available.

中文简介正在准备中。当前显示英语简介。

• Import a Figma logo as a video asset
• Apply brand colors across imported components
• Turn a Figma frame into editable HTML

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元素结构
• 收集颜色、文字和间距设置
• 准备实现所需素材

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

在Figma Design或FigJam中新建空白文件，作为代理工作流程的起点，用于设计系统建设或工作坊准备的初始设置。

• 新建空白Figma Design文件
• 准备工作坊使用的FigJam文件
• 为设计系统工作准备初始文件

为将Figma设计转化为代码制定项目专用规则，把颜色、间距等共用值、命名规范和自动检查标准集中在一处，供项目实施时统一查阅。

• 制定Figma设计实现规则
• 整理设计共用值与命名规范
• 汇总自动检查标准

通过Code Connect关联Figma设计组件与代码组件，建立设计和实现的对应关系，以便将共用设计规则和组件的更新自动反映到代码中。

• 关联Figma组件与代码组件
• 将设计系统更新反映到代码中
• 开始使用Code Connect

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

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

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

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