Figma亲自下场做了个一键扒取网页插件,Figma make还内置了Skill功能!

哈喽大家好，我是萤柳！

平时看到喜欢的网页，想把它的版式、配色搬进 Figma 当参考，大多数人只能先截图，再对着图一点点手动还原,费时又难还原到位。

最近 Figma 一口气补齐了两块能力，正好能解决这类痛点。

第一块是Figma自己下场做了一个Figam浏览器插件，可以复制任何网站链接，然后粘贴到Figam画布中，变成可编辑的设计稿。

第二块是 Figma Make 里的 Skill 功能，既能把你自己的设计规范导入进来，也能直接新建。

今天这篇，我就把这两个功能挨个带你上手用一遍。

一、Figma自带插件

这个功能之前其他插件也能做到，比如我之前写过一篇：没看过的也可以看一下：

但是Figma插件教育版是无法使用的，只能专业版付费版才能使用。

Figma插件下载地址：https://chromewebstore.google.com/detail/figma/fkmaohpngenfoccdgceedjkfhkdcohmg?hl=zh-CN&utm_source=ext_sidebar

怎么用？点开下载链接后，点击【添加至Chrome】

点击右上角的Figma插件。

点击Capture page，相当于复制整个网页。

然后就能直接粘贴到figma里面编辑了。

二、Skill功能

之前Figma还更新了一个功能就是Skill，这里补充一下。

用之前文章测试过的一个项目看看。

打开figma make后，点击【Skills】-【Add skill】

它可以导入自己的设计规范Skill，也可以创建。

之前分享过一个github仓库，里面收录了60+大厂设计规范，可以在里面下载，没看过的朋友可以看这篇：

我们接着导入其中的一个设计规范，用iphone的设计规范来举例：

我们把苹果这个文件里面的让Codex做成Skill

做好的Skill上传到figma make中

它会自动导入，点击【Create】

输入斜杠【 / 】就能调出我们刚刚上传的Skill，选择它。

我们输入提示词：根据这个Skill风格修改网页风格。

原本是爱彼迎风格，修改成苹果风格。

看下效果，一下子就变成苹果设计风格了。

下次再刷到好看的页面，一条链接丢进 Figma，它就乖乖躺在你画布里任你拆解。

这两个功能都不难，今晚花十分钟装上，改天赶方案的时候，你会感谢现在动手的自己。

今天的分享就到这里，希望对你有帮助！

如果你想系统地提升自己的设计能力，或者想了解更多关于 UI/UX 设计的基础知识和进阶技巧，欢迎来看看我整理的 UI/UX 设计知识库。

这套知识库用最直白易懂的方式，把设计中容易踩坑的地方都梳理了一遍。

刚入行的新手朋友，以及想突破瓶颈的同行，都能在里面找到有用的内容。

知识库还升级了知识问答，可根据当前的知识库进行提问，7月1日将涨价到199元，需要的朋友不要错过最后一波了！

想要获取这份知识库的朋友，可以点击文章下方的文章查看详细内容👇👇

拓展阅读：

点赞转发推荐，祝您年薪百亿！