如何将 Figma 版面,依照Bootstrap网格系统分割成12等分

梅问题-如何将 Figma 版面,依照Bootstrap网格系统分割成12等分

Figma是目前UI/UX的新宠儿,除了有提供免费的试用版外,甚至免安装打开浏览器立即就可使用,有别于一般的UI/UX软件,同时Figma的操作界面相当的节洁好上手,以及支持多人协作,而提到UI/UX大家的第一印象都是APP,但除了APP以外其实Figma也可运用于网页设计上。

而梅干要跟大家来分享Figma在网页设计上的小技巧,让Figma也可依照Bootstrap的网格系统,进行版面的设计,至于要怎么在Figma中,开启Bootstrap的网格系统,有在使用Figma的朋友也一块来看看啰!


Step1
首先进入Figma后,先建立一个Frame

梅问题-如何将 Figma 版面,依照Bootstrap网格系统分割成12等分

Step2
在建立好后,对着Layout grid后方的加号点一下,这时画面就会看到粉红色的线框。

梅问题-如何将 Figma 版面,依照Bootstrap网格系统分割成12等分

Step3
接着点一下前方的图标,再点左上角的下拉菜单。

梅问题-如何将 Figma 版面,依照Bootstrap网格系统分割成12等分

Step4
將模式切換為Columns後,再把Count欄位設為12,Gutter間距設為15。

梅问题-如何将 Figma 版面,依照Bootstrap网格系统分割成12等分

Step5
都设定好后,就可以开始设计你的版面啦!!

梅问题-如何将 Figma 版面,依照Bootstrap网格系统分割成12等分
(0)
打赏 微信扫一扫 微信扫一扫

相关推荐

发表评论

登录后才能评论