可借助pxcook将figma设计稿导出为png后导入，完成像素级标注并导出含css/json及多倍率切图的规范文档。流程包括：导出画板→新建项目→导入图像→执行标注→导出交付包。
如果您已完成Figma设计稿，但需向开发交付带尺寸、间距、颜色等精确参数的标注文档，则可借助PxCook实现结构化标注。以下是将Figma设计稿导入并完成标注的完整流程：
一、导出Figma画板为静态资源
PxCook不直接读取.fig文件，需先将Figma中的目标画板导出为PNG或SVG格式，作为标注源图使用。此步骤确保标注基准与设计稿视觉完全一致，避免因格式解析导致的像素偏移。
1、在Figma中选中需标注的单个画板（或按住Shift多选多个画板）。
2、右键点击选中区域，在弹出菜单中选择「Export selection」。
3、在右侧属性面板「Export」区域，点击「+」添加导出项，格式选择「PNG」，缩放设置为「1x」。
4、勾选「Include background」以保留画布背景色，点击「Export [画板名]」保存至本地指定文件夹。
二、启动PxCook并新建项目
PxCook需通过本地客户端加载导出的图像资源，并建立结构化项目用于组织标注信息。新建项目时需明确平台类型，以便自动生成适配iOS/Android/Web的单位换算逻辑和代码片段。
1、打开已安装的PxCook桌面客户端（v3.9.0及以上版本）。
2、点击主界面左上角「新建项目」按钮。
3、在弹窗中输入项目名称，例如「App首页_V2.3」。
4、在「平台类型」下拉菜单中，根据实际开发需求选择 iOS、Android 或 Web。
5、点击「创建项目」，进入空项目工作区。
三、导入Figma导出的PNG图
导入图像后，PxCook将自动识别其为设计源图，并启用测量、标注、切图等全部功能。图像必须为无透明底的PNG或SVG，否则部分标注工具（如距离拖拽）可能失效。
1、在PxCook左侧资源栏，点击「添加页面」图标（+号）。
2、在弹出的系统文件选择器中，定位并选中此前从Figma导出的PNG文件。
3、点击「打开」，图像将被加载至当前项目，显示在中央画布区域。
4、确认图像未被缩放变形：右键画布空白处，选择「重置缩放」。
四、执行像素级标注操作
标注过程基于图像坐标系进行交互式测量，支持自动识别元素边界、手动拖拽测距、文本注释叠加等多种方式，所有标注数据实时绑定到当前图层节点。
1、点击顶部工具栏「标注」按钮（或按快捷键B），进入标注模式。
2、将鼠标悬停于某UI元素（如按钮）边缘，出现绿色吸附线时单击确定起点。
3、拖动鼠标至相邻元素（如图标）边缘，松开左键，自动生成带数值的双向箭头标注，例如「24pt」。
4、双击标注数值区域，可手动修改为「@2x: 48px」等开发所需格式。
5、点击左侧工具栏「文字」图标，在关键交互区添加说明，例如「点击态：背景色 #4A6FF3 → #3A5EE3」。
五、导出标注规范与切图
完成全部标注后，PxCook可一键生成含标注图、属性清单、CSS/JSON代码及多倍率切图的交付包，供开发直接调用，无需二次整理。
1、点击右上角「导出」按钮，选择「导出标注规范」。
2、在导出设置中，勾选「包含CSS代码」「生成JSON属性表」「导出切图」三项。
3、在「切图设置」中，勾选需导出的倍率，如 @1x、@2x、@3x，并确认切图命名规则为「组件名_状态_倍率」。
4、点击「开始导出」，选择本地保存路径，等待进度条完成。
5、导出文件夹内将生成 index.html（可交互标注页）、assets/（切图）、spec.json（结构化数据）三个核心内容。
