早安午安晚安，歡迎來到coding小白盜版學校官網的第四天～這個計畫是我這個coding超新手會在30天內，把複刻學校官網當作目標，從最基礎的前端html、css、js...開始邊做邊學，紀錄每天的學習進度，看看一個月過去能學到什麼程度。

原本開開心心打開 vscode 就要開始 CSS，結果愣了三分鐘無從下手...不知道尺寸沒辦法畫阿！於是今天的行程又從 coding 回到了 figma (狂喜奔向舒適區～o(▽｀ o) =3 =3 =3，一起來畫界面吧嘿嘿～

網頁長截圖

首先使用剛學到的新技巧：把整頁網頁長截圖
①F12 呼叫「開發者工具」(好方便！原來不用到右上角的點點裡找)
②CTRL + Shift + P 呼叫搜尋欄
③在搜尋欄位輸入「Capture full size screenshot」 → Enter ，整頁長截圖就自動下載啦

Figma 繪製

接著當然就是打開figma開始繪製
①直接從右側列表選擇 frame → desktop，預設長寬是1440*1024
②剛存好的截圖一份放進去，frame 拉到相同長度，不透明度調淡成30%；
另一份放在旁邊吸色

Do Re Mi So～簡簡單單～

Figma 愛用插件分享

同樣因為今天內容非常少，最後來分享三個我在 figma 愛用的插件(plugin)湊篇幅

一、Iconify - 超齊全的icon資料庫(發布者：Vjacheslav Trushkin)

這裡收錄了超齊全的各式風格 icon，只要輸入關鍵字(務必要是英文)就有無限多的專業級 icon任君挑選。不只可以拿來直接用，我也很喜歡在要自己畫icon的時候拿出來參考，甚至拆下來修改、重組成需要的樣子

二、Curve Text - 文字彎曲工具(發布者：Lichin)

Figma 本身不支援彎曲文字，這在做標題或特殊排版時很限制發揮。有了這個插件，文字可以沿著預設弧線、甚至自己畫的路徑走位，個人覺得偶爾用一些彎曲的文字裝飾可以讓畫面變得更活潑，有種 pinterest 網紅感(？)

三、Perspective Toolkit - 透視工具(發布者：Jake Blakeley)

最後一個 Perspective Toolkit 是繪製透視效果的好朋友，在還沒認識它前透視變形都要自己一點一點慢慢拉，但在這裡不只有既定的角度可以選擇，也能拖拉橫桿自行調整，超級實用

以上就是今天的分享，收工，明天見！