可在figma中用magician插件将文本图层一键转为风格匹配的ui配图:安装插件→选中文本图层右键生成→编辑提示词并批量出图→设置svg导出→绑定图文实现自动更新。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如果您在Figma中已输入设计文案,希望快速生成与之风格匹配的UI配图,则可借助Magician插件内置的AI绘图能力实现文本到图像的即时转化。以下是具体操作步骤:
一、安装并启用Magician插件
Magician是Figma官方推荐的AI辅助设计插件,需先在Figma社区中添加至当前项目环境,确保其具备图像生成功能权限。
1、在Figma编辑界面右上角点击“Plugins”按钮,选择“Browse plugins”。
2、在搜索框中输入Magician,找到官方认证插件后点击“Install”。
3、安装完成后,在Plugins菜单中点击“Magician”,选择“Run”启动插件面板。
二、在文本图层上触发AI绘图指令
Magician支持直接识别选中文本图层内容,并将其作为提示词(prompt)生成对应视觉元素,无需手动复制粘贴描述语。
1、在画布中选中一个包含明确UI语义的文本图层,例如“用户登录表单”或“深色模式设置开关”。
2、右键该图层,在上下文菜单中选择“Magician → Generate image from text”。
3、插件自动提取文本语义,并在右侧面板显示预设风格选项,包括Material Design、iOS Human Interface、Flat UI等。
三、调整提示词并生成多版本配图
原始文本可能过于简略,影响生成图像的准确性,可通过编辑提示词增强细节控制力,获得更符合UI上下文的输出结果。
1、在Magician面板中点击提示词输入框右侧的编辑图标。
2、在弹出窗口中补充关键约束条件,例如添加“no background, centered composition, 2x resolution, vector-style”。
3、勾选“Generate multiple variations”,设定数量为3或4,点击“Generate”。
四、将生成图像插入为矢量可编辑图层
Magician默认输出PNG格式位图,但通过启用插件高级设置,可让生成结果以SVG路径形式嵌入,便于后续调整颜色、尺寸与组件结构。
1、在Magician主面板底部点击“Settings”齿轮图标。
2、开启“Export as SVG when possible”选项。
3、重新执行图像生成操作,生成后的图层将显示为可解构的矢量组,双击即可进入路径编辑模式。
五、绑定文本图层与生成图像建立动态关联
为保持设计系统一致性,可将生成图像与原始文本图层建立引用关系,当文案修改时触发图像重生成,避免手动同步遗漏。
1、在Figma中按住Ctrl(Windows)或Cmd(Mac)键,同时选中文本图层与对应生成图像图层。
2、右键选择“Group”,再点击“Add to component”。
3、在组件属性面板中启用“Auto-generate image on text change”开关(需Magician Pro权限)。











