技術 Day 22. RWD 響應式設計的利器- 理解 Figma 的 Constraints 機制

Constraints 是 Figma 中一個很重要的功能，它可以讓我們的設計在做拉伸的時候，變的更加彈性，當你需要做 RWD (Responsive Web...

技術 Day 21. 透過實作設計一個登入頁面，掌握 Figma 基本工具

今天來設計每個網頁幾乎都會有的登入頁面吧！跟著 Rson 一起實作完，就能做出下面這張設計稿： 分二塊來實作，首先先繪製容器及左半部 Sign-up 的部份，再...

技術 Day 20. 用 Figma 來設計基本 icon 吧！

Figma 的介面佈局與一般的設計軟體很類似，上方(1)為工具列，左方(2)可切換 Layer, Page ，右方 (3) 有三個面版，當目前為 Design...

技術 Day 19. UI 設計軟體- Figma 簡介與優勢

前二篇解釋了 GUI Design 階段的重點，也提到此時花費設計師的工時相當可觀。功欲善其事，必先利其器，挑選一個稱手、效率高的設計軟體就很重要。目前 GUI...

技術 DAY20-網站構思之進階figma

前言： 昨天我們使用了幾個基本的方法設計了網頁的首頁，今天阿森要來進一步介紹一些figma prototype的功能，讓我們最佳化figma預覽的效果，也就是...

技術 DAY19-網站構思之figma(一)

前言： 接下來就要進入網頁構思的階段了，在開始寫網站之前，如同畫畫一樣，一定都需要先打一個草稿，除了讓之後寫code可以有一個方向，也可以先預覽看看之後網站的...

技術 Day 8 - 原型 (7): 完成

前言 今天完成原型剩下的工作吧｡ 帖子修正 回覆帖子 流程就是輸入要顯示的名字及回覆內容, 最後到點擊回覆按鈕發出｡ 先是輸入名字 之後是回覆內容...

技術 Day 7 - 原型 (6): 預覽主頁

前言 今天利用之前所建的主頁, 建立一個可讓使用者互動的原型｡ 預覽 利用Figma的預覽功能, 即右上角的三角形(如下圖紅色標示), 可以幫助我們修正原型｡...

技術 Day 6 - 原型 (5): 帖子頁的元件組合

前言 利用剛設計好的帖子頁元件, 組合成帖子頁｡ 元件組合 建立一個屬於帖子頁的frame 先在Pages/Blog中, 按一下主頁的frame, 再按快捷...

技術 Day 5 - 原型 (4): 帖子頁元件

前言 今天要完成帖子頁的元件設計｡ 帖子頁的元件 帖子 基本上可以用回主頁的帖子元件, 這裡只是少了READ MORE, 還有把內容全部顯示出來｡ 回覆...

技術 Day 3 - 原型 (2) : 主頁元件

設置 先在Figma中建立2個頁面(Page), 名字分別為Blog跟Components(元件)。 Blog頁面主要是放置Blog的各個頁面, 例如:主頁、...

技術 Day 2 - 原型: Figma

前言 我先建立一個原型(Prototype), 用來釐清這個WebApp的功能跟UI界面。 建立原型所用到的工具是Figma, 它有免費版本, 功能應該足以應付...