自从上一篇介绍了《用Google Stitch实现AI免费设计UI并生成APP》后，不少同学都去尝试了使用Google Stitch进行了AI设计，有的用来制作网站效果图，有的用来设计APP的产品原型图等，功能确实强大。与此同时，也有很多同学咨询丁老师，在使用Google Stitch生成界面效果图时，页面图片虽然已经用AI做出来了，但整体还是一个静态图，效果图内的按钮无法点击、页面无法跳转、菜单也不能点击，没有动态效果，只是一张设计稿有没有办法，能让做出来的效果图，变成一个真正能操作的产品原型呢？今天丁老师教会大家。

Actually，Google Stitch是快速生成UI布局、界面和页面视觉风格，主要是一个UI界面生成工具，目前并不支持复杂的页面交互，如需涉及动态交互，只能借助其他第三方工具实现。对于产品原型展示、项目演示、网站页面、移动端页面等场景来说，都可以通过第三方工具来加入点击反馈、页面切换、弹窗动画等交互效果。

实现方法
用Google Stitch做出的UI效果图，可以通过使用Figma、Framer、Adobe XD、Sketch+Principle、Axure RP、Pixso（国内工具）等第三方工具实现页面交互。
在此我们以Figma为例：
1.在Stitch中，选中一个页面，然后点击右上角导出，下拉选项中选择"Figma"，然后点击底部的"转换按钮"，如图。

2.点击"转换"按钮后，等待Stitch自动将该页面转换为Figma格式，转换完成后，底部的按钮会自动变为"复制"。

3.点击复制按钮，然后进入Figma。
4.在Figma新建项目，然后在设计窗口的空白处，点击右键，选择"Paste here"（配斯特黑尔），如图。

5.FIgma会自动粘贴来自Stitch的效果图。

6.然后在Figma中，可以选择该设计图的每个元素，对每个元素进行包括样式的编辑、交互效果的定义等。

7.右侧工具面板，顶部切换到Prototype模式，可以进行动态效果交互设置。

8.至此，通过Stitch设计的UI效果图，配合Figma，即可实现给页面添加动态交互效果。

注意事项
1.有的情况下，涉及到复杂的页面设计，Google Stitch生成的效果图页面结构并不规范，可以导出到Figma中再Figma进行二次编辑。
2.本文同样支持国产的在线设计工具，如Pixso、墨刀等，具体的方法是Google Stitch导入到Figma，然后在Figma中进行二次导出，最后在Pixso或墨刀的项目中，重新导入由Figma导出的的文件。