今天來設計每個網頁幾乎都會有的登入頁面吧！跟著 Rson 一起實作完，就能做出下面這張設計稿：

分二塊來實作，首先先繪製容器及左半部 Sign-up 的部份，再來繪製右半部 Sign-in 區塊

1. 點擊矩形工具，畫一個矩形

2. 點擊 [+] effect，準備畫陰影

3. 微調陰影，提高 Blur 值較自然

4. 加上圓角 (預設四角都會等圓)

5. 再畫左方的矩形，並且填色

6. 因為下面的容器有圓角，所以墊在上面的這個矩形也要有圓角

圓角可自訂四個角不同數值

7. 給予四個角不同數值

與css概念相同，依序為左上、右上、右下、左下 (順時針)

8. 接著製作 Sign-up 幽靈按鈕

(1) 拉出一個矩形(2) 圓角拉調到最大(3) 關閉填色(4) 增加線段 (1px, 白色)

9. 拉出按鈕的字，上下與左右都設定成置中

記得將按鈕群組起來

10. 設定畫布底色，並調整置中對齊。左半邊就完成嘍

11. 接著處理右半部： 首先依剛學會的，使用 Text 工具拉出 標題 及 [忘記密碼] 次級連結

12. 依上面學會的方式，再製作一個主要按鈕，給 Sign in 使用

13. 繪製帳號密碼文字輸入框：以矩形工具拉出圓角矩形，並給予 Fill 及 Stroke

Tip：只要是要需要上色的，都可以用吸管工具吸色後再微調

14. 加上輸入提示字

Tip：placeholder 一般都會用淺淺的灰色

15. 將做好的 文字輸入框，復製一份，更改提示字為密碼

16. 太好了！我們已經完成了第一個 Log-in 頁面設計！

回顧一下，透過這個實作的設計練習，我們已掌握了 Figma 的基本形狀工具、物件屬性設定(stroke, fill, effect)，以及文字的對齊、大小等屬性的基本調整方式。