如何用Figma简单做一个“小黑盒”?

user avatar
Bun

本次的教程主要以图和文字为主,帮助大家一步一步跟着我的流程走。

欢迎在评论区或艾特我,并留下你的作品,我们一起进步

如何用Figma简单做一个“小黑盒”?

以往案例

这是我前几篇文章的封面元素,大家可以思考一下是怎么完成的。

如何用Figma简单做一个“小黑盒”?

拆开是这样的

如何用Figma简单做一个“小黑盒”?

也就是说想要完成一个立体的盒子,我们需要做好盒子的每一面,然后在组合起来。为了更直观,可以使用插件“3D Shape Generator”创建一个立体盒子

如何用Figma简单做一个“小黑盒”?

拆开,主要做的只有三张页面

如何用Figma简单做一个“小黑盒”?

好了,我们已经理清楚需要做什么

第一步:画出一个正方形

给正方形添加描边

如何用Figma简单做一个“小黑盒”?

再画出一个正方形,把填色关闭(-),打开描边(+),调整合适大小和颜色

如何用Figma简单做一个“小黑盒”?

得到以下内容,然后合在一起,只有描边的正方形选中后,右键放在底层

如何用Figma简单做一个“小黑盒”?

得到这样的一个正方形

如何用Figma简单做一个“小黑盒”?

最后,全选这个正方形打组(快捷键:ctrl+g)复制它(快捷键:ctrl+C+V或按住alt+选中+移动后松开)作为备份

如何用Figma简单做一个“小黑盒”?

第二步:在三个正方形上画出或添加自己的内容

注意:添加内容,复制一张图片粘贴到容器里,或手动选择添加

如何用Figma简单做一个“小黑盒”?

如何用Figma简单做一个“小黑盒”?

添加好之后记得打组

第三步:组合立体

使用插件:”Perspective Toolkit“选择一个正方形,调整角度

如何用Figma简单做一个“小黑盒”?

合体!

如何用Figma简单做一个“小黑盒”?

合体成功后关闭插件,全选立体盒子,调整-向上压住体形

如何用Figma简单做一个“小黑盒”?

得到下面的内容

如何用Figma简单做一个“小黑盒”?

第四步:细节

可以给盒子改任何颜色,添加合适的外观,比如可以添加一个底座等等

如何用Figma简单做一个“小黑盒”?

快来和我一起做盒子!

如何用Figma简单做一个“小黑盒”?

声明:本站内容,如无特殊说明或标注,均为本站原创发布。未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,请联系。
0 条回复
comment avatar
{{show.info ? '确认修改' : '修改资料'}}
upImage
  1. 暂无讨论,说说你的看法吧
有新私信 私信列表
搜索