[笔记] Figma 前端 设计师协作工具简单介绍

章节连结

身为一位前端工程师,与 UI / UX 设计师合作时,往往会接触到 Adobe XD 或是 Figma 这两套工具。以工程师的角度来说,它可协助切版的进行,让 1px 都不差的结果呈现变成可能。比起看简易的 Wireframe 抓感觉写,能够减少沟通和制作成本。
figma-introduction demo


特色

1. 多人同时协作,同时有人浏览、有人编辑都可以即时看到
notes-figma-introduction indexnotes-figma-introduction2. 学习上手门槛低,只要有图层叠加、群组概念就可以使用。无需知道过多的 CSS, HTML 语法
notes-figma-introduction group selection3. 方便的分享连结功能

notes-figma-introduction send link
如何开始使用

1. 进入 Figma 首页,并注册相关帐号后开始使用(你可以用 Facebook, Google, Microsoft 之类的都可以)。
2. 在左边的 Draft 点下 “+” ,开启一个新的专案
3. 操作页面全部都使用浏览器进行,所有会用到的工具都在画面上方。如果你有用过 Photoshop 之类的工具,相信能很快上手。
notes-figma-introduction demo
4. 右边的操作面板的 Design 会根据你所选的工具而调整
5. Figma 是有群组 (Group) 的概念。换言之,一个 Button 按钮,可以由两个方框(内框+外框)和中央的文字所组成。
notes-figma-introduction button demo6. 当你光标选定某个物件当做定点时,移到其他物件上会出现距离的 pixel 数。
notes-figma-introduction button group7. 右边的操作面板的 Code,对于工程师而言非常受用。你可以直接知道颜色、文字大小、阴影效果……等设定参数。notes-figma-introduction code

8. 若你有需要上传图片,请事先裁切好大小,再用 File =>  Place Image 贴入画面

notes-figma-introduction upload image

 

按赞加入粉丝团

延伸阅读