Day 27. 我要准时下班- Figma Plugin (下)

上一篇介绍了 plugin 是什麽、如何安装使用，以及推荐的插件。今天我们实际透过这些插件实作一个简单版的po文墙网页UI。最後会完成的结果如下：

首先，使用形状、文字及属性面版等工具，将网页布局及外框容器拉出来：

接下来我们会使用上一篇所提到的 Plugin，依序会用到 Unsplash、Lorem Ipsum、Content Reel，以及 Material Design Icons 等插件。

(1) 使用 Unsplash 插件，填入每篇po文的用户头像，以及所上传的照片内容：

多选好要填入照片素材的形状物件後，点击 Figma > plugins > Unsplash，再选择要填入的相片类别，插件就会随机从 Unsplash 素材库里导入高画质的相片，并以该形状物件做为相片的遮罩 (aka. 相片会变成它的形状)。比方说像是下图：

Tip: 按着 Ctrl 点选物件，可直接穿越群组或 Frame 直接选到该物件 。再加上一起按着 shift 就能够多选物件。 (这二招很好用，要记起来唷！)

(2) 使用 Lorem Ipsum 插件，产生给po文用的内容假字：

选择 po 文的文字物件，点击 Figma > plugins > Lorem Ipsum，再选择要产生多少个单字，就会自动产生假字了。

Lorem ipsum 除了提供字数外，也可选择句数或段落数。

(3) 使用 Content Reel 插件，产生特定格式的假字 (用户全名)：

点选用户全名文字框，点击 Figma > plugins > Content Reel，再选择要产生的类别格式 (此例是 Full Name)，就会自动产生用户全名了。

(4) 使用 Material Design Icons 插件，插入需要的图标：

点击 Figma > plugins > Material Design Icons ，选择所需要的图标 (除了浏览之外，还可使用关键字搜寻的方式查找)，拉出中意的图标後，就可以像一般物件一样，做自己想要的修改。

我们先做左上角在 profile 旁的 more 按钮图标，如下图。

再处理右上角搜寻框中的放大镜图标，如下图。

这样便完成了，如何？是不是有够快！

透过这个范例，各位应该可以感受到，善用插件所能产生的速度与效率。从此之後便能将我们从这些重覆又耗时的 dirty work 中解放出来，进而把时间跟精力放在真正关键的设计细节之上。

注1：其实在做 icon 式按钮的时候，应该要绘制出一个没有颜色的范围区，再将 icon 放进这个范围区内，才是完整的作法 (一般会以 Frame 来实作)。此范例因为把重点放在插件教学，故简化省去了此部份。

注2：使用插件还有一个更快的快速键－ Ctrl + /，大家务必试试看哦！