Results for “figma”

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

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 screens and components into code that follows an existing project's conventions. Retrieve design details, screenshots, and assets through Figma MCP, an agent connection, then reuse existing components and check the implementation against the design.

• Implement a button from a Figma design
• Build a dashboard layout from Figma
• Extend existing components to match a design

Turn Figma screens and components into application code using design specifications, screenshots, and supplied assets. Reuse existing project components and shared style values, then check layout, typography, responsive behavior, and accessibility against the design.

• Implement a button from a Figma component
• Build a dashboard from a Figma frame
• Integrate designs with an existing component library

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

Fetch design structure, screenshots, variables, and assets from Figma through MCP, a connection between the agent and Figma. Use these references to guide code implementation within an existing project and troubleshoot connection setup.

• Inspecting a specific Figma frame or layer
• Fetching images and SVG assets for implementation
• Adapting a design to existing project components

Figma 转 Photoshop (PSD) (Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect (drop·inner shadow / layer·background blur) / mask / blend mode / gradient / text-engine / color 与 Photoshop artboard / group / smart-object / linked / layer-style / shape-layer / path / clipping·layer mask / blend-mode 的对应关系与不可逆损耗点; (b) 转换方法栈 — 插件直出 PSD / 导出图层 (PNG·SVG) 再重组 / SVG·PDF 桥接 / 手工重建 / Figma REST API + Photoshop UXP·ExtendScript 脚本化, 各法在保真度-可编辑性-工时上的权衡与选型; (c) 保真度 QA — 字体回退与缺字处理 / 颜色空间 (sRGB·ICC profile) / 效果参数对齐 / @Nx·DPI 与栅格化 / 像素 diff 验收; (d) 两种交付目标 — 可编辑分层 PSD vs 像素保真扁平 PSD 的方法选择. 主战场 = Figma Community 插件 + Adobe 官方文档/论坛 + 设计交付 (design handoff) 实践 + 设计师社区. 不含: PSD→Figma 反向转换 / Sketch / Adobe XD / 纯前端 code handoff (HTML·CSS) / 印刷 CMYK 专业制版 (仅触及).) Master OS — automated mastery of Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect (drop·inner shadow / layer·background blur) / mask / blend mode / gradient / text-engine / color 与 Photoshop artboard / group / smart-object / linked / layer-style / shape-layer / path / clipping·layer mask / blend-mode 的对应关系与不可逆损耗点; (b) 转换方法栈 — 插件直出 PSD / 导出图层 (PNG·SVG) 再重组 / SVG·PDF 桥接 / 手工重建 / Figma REST API + Photoshop UXP·ExtendScript 脚本化, 各法在保真度-可编辑性-工时上的权衡与选型; (c) 保真度 QA — 字体回退与缺字处理 / 颜色空间 (sRGB·ICC profile) / 效果参数对齐 / @Nx·DPI 与栅格化 / 像素 diff 验收; (d) 两种交付目标 — 可编辑分层 PSD vs 像素保真扁平 PSD 的方法选择. 主战场 = Figma Community 插件 + Adobe 官方文档/论坛 + 设计交付 (design handoff) 实践 + 设计师社区. 不含: PSD→Figma 反向转换 / Sketch / Adobe XD / 纯前端 code handoff (HTML·CSS) / 印刷 CMYK 专业制版 (仅触及).: top builders' mental models, tool stack, current workflows, jargon, and where to keep up. Trigger this skill when the user works on Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect (drop·inner shadow / layer·background blur) / mask / blend mode / gradient / text-engine / color 与 Photoshop artboard / group / smart-object / linked / layer-style / shape-layer / path / clipping·layer mask / blend-mode 的对应关系与不可逆损耗点; (b) 转换方法栈 — 插件直出 PSD / 导出图层 (PNG·SVG) 再重组 / SVG·PDF 桥接 / 手工重建 / Figma REST API + Photoshop UXP·ExtendScript 脚本化, 各法在保真度-可编辑性-工时上的权衡与选型; (c) 保真度 QA — 字体回退与缺字处理 / 颜色空间 (sRGB·ICC profile) / 效果参数对齐 / @Nx·DPI 与栅格化 / 像素 diff 验收; (d) 两种交付目标 — 可编辑分层 PSD vs 像素保真扁平 PSD 的方法选择. 主战场 = Figma Community 插件 + Adobe 官方文档/论坛 + 设计交付 (design handoff) 实践 + 设计师社区. 不含: PSD→Figma 反向转换 / Sketch / Adobe XD / 纯前端 code handoff (HTML·CSS) / 印刷 CMYK 专业制版 (仅触及). problems and wants industry-grade thinking, tool selection, or workflow guidance. 触发词：「figma 转 psd」「figma to psd」「figma 转 photoshop」「figma 导出 psd」「设计稿转换」

The English summary is being prepared. Showing the original description.

Implement interfaces from Figma designs using the Figma MCP server. Retrieve design structure, screenshots, variables, and assets, then adapt the generated code to existing project components and styles and check it against the design.

• Implementing a screen from a Figma frame link
• Reusing existing components to match a design
• Retrieving images and SVG assets from Figma

Build or update Figma screens from code or descriptions using an existing design system, a shared set of components and visual rules. Assemble sections with reusable components, colors, spacing, and styles, then check their appearance.

• Recreate an application page in Figma
• Build a landing page with shared components
• Update a Figma screen to match code

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

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

Turns Figma screens and components into code that follows an existing project’s conventions. Uses design specifications, screenshots, and assets to guide implementation, reuse existing components, and check the finished interface against the design.

• Implement a button from a Figma design link
• Build a dashboard from Figma frames
• Adapt a design to existing project components

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

Turn a linked Figma frame or layer into application code using the Figma MCP server, a connection for accessing design data. Retrieve design details, screenshots, and assets, reuse existing project components, and compare the implementation with the design.

• Implementing a screen from a Figma frame link
• Retrieving images and SVG assets from a design
• Adapting a design to existing project components

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

Create a blank Figma design or FigJam file in your drafts, with an optional name and a selected plan. Receive a direct link and file key to continue working with other Figma tools.

• Start a new Figma design file
• Create a named FigJam whiteboard
• Prepare a fresh file for use_figma

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

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

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

Turn Figma designs into production-ready frontend code that closely matches the original visuals. Use it to hand design frames directly to a frontend agent and guide implementation toward a faithful reproduction of the design.

• Implementing a screen from a Figma design
• Handing Figma frames to a frontend agent
• Reproducing a design's appearance in code