Day 2 - 原型: Figma

前言

我先建立一个原型(Prototype), 用来厘清这个WebApp的功能跟UI界面。

建立原型所用到的工具是Figma, 它有免费版本, 功能应该足以应付这个project。

在开始之前, 我还是简单的介绍一下Figma的基本功能吧。

利申: 我并不擅长於UI设计, 但还是想介绍一下, 始终设计UI也是写WebApp的重要一环。

Figma

对初次接触Figma的朋友, 可以看这个Figma官网的介绍影片。

以下是一些Figma的常用功能

设置设计元素属性

元素是文字的话, 文字的颜色, 粗体, 斜体等都能够设定。

通过inpsect, 我们更可以看到属性相对应的css。

css将会在之後的文章中讲解

建立基本图形 (Shapes)

建立icon

可以自由组合基本图形来建立想要的icon, 例如, 可以把2个图形合并(union)起来, 作为一个新的图形。

布局、对齐

基本对齐

栏布局 (Column layout)

自动布局 (Auto layout)

演示

设计完成後, 我们可以在模拟的设备上演示Proptotype。

结语

Figma的介绍就到这里, 明天就开始做blog的prototype了。