iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
Modern Web

0~1 的 Design System 之旅系列 第 13

第十三篇-好工具-figma-設計交付文件

  • 分享至 

  • xImage
  •  

UI 設計交付文件大致有流程、規格、互動原型等三項:

  1. 流程(flow):
    一個功能會由許多的頁面組成,每個頁面會有互動機制,頁面與頁面之間的關係、流程(預期流程、非預期流程(error flow)、替代流程等等),互動元件的反饋,(例如按鈕點擊之後的反饋),都是流程交付文件的必備品,也是工程師實作時的重要依據。
    https://ithelp.ithome.com.tw/upload/images/20240921/201132568ASaTJjrjO.png

  2. 規格(spec):
    Design System 的內容是由大量的 component 、 variable 組合而成,再由這些 component、 variable(Design Token) 去組合、設計出完整的 UI,針對頁面的布局、位置、間距等,都必須做出規範文件,而每一個 component 的樣式(style)、狀態(state)也都有一定的規範。
    https://ithelp.ithome.com.tw/upload/images/20240921/20113256hHnum4FlX8.png

  3. 互動原型(prototype):
    並不是每一個功能、每一個互動反饋都能用靜態的 flow 或 spec 去完成,有時候在溝通過程中必須讓團隊成員們(尤其是PM及工程師)清楚知道這個功能的互動效果及體驗(例如:區塊收合動畫、popup 彈出方式),這時候就必須做互動交付,也就是我們上一篇提到的 prototype。(總不能讓工程師自己通靈腦補吧?QQ)
    圖片說明

我們以輸入框為例來實作看看:

  1. 外觀:
    設計輸入框基本外觀:包括寬、高、內距、邊框、圓角、底色、字體、字級,並做出標註。
    https://ithelp.ithome.com.tw/upload/images/20241014/201132565ptXUsOR3q.png

  2. 狀態:
    將每個會出現的狀態情境全部表示出來(default、input、error、disabled),包括是否必填。
    https://ithelp.ithome.com.tw/upload/images/20241014/20113256iOz7RqtjFb.png

  3. 布局(RWD):
    在格線系統中或不同的介面環境下的組合排列,包括內距、間距等等。
    https://ithelp.ithome.com.tw/upload/images/20241014/20113256d15K6roEkd.png

好用的外掛:

當我們在做標註時,每條標註線、每個尺寸都一點一滴的慢慢畫出來,你一定會感到很厭世,希望自己像千手觀音一樣有很多手一起畫。來~來~來,介紹一個好用的 Plugin : Redlines。它雖然有點老,但很好用。

  1. 點擊下方工具列的 Plugin icon 按鈕
  2. 點選 Plugins & Widgets 頁籤
  3. 在上方搜尋框填入 Redlines,就會出現 Redlines 的 plugin
  4. 點擊 Redlines,出現 Redlines 的設定彈窗。
  5. 點選要標註的物件,再點選標註的位置(上標註、下標註、左標註、右標註)
  6. 標註之後的尺寸不一定是我們想要的,例如:320PX 改成 100%,都可以自行修改喔!
    https://ithelp.ithome.com.tw/upload/images/20240921/20113256FiUtlKvuRx.png

一份完整的設計交付文件,除了上述的流程、規格、互動原型等三項之外,也會根據每個產品、每個團隊的需求而增修,是一個很大的工程。本篇以及之後的交付實作都會 focus 在規格(spec)這一項,其餘項目(flow、prototype)請各位捧油在您的專案中再去實作即可,我們就不再多著墨其餘項目了,必竟我們的終極目標是小小的「0~1的 Design System 之旅」,不是大大的「0~1 的 UI 全方位實作之旅」,哩供丟嘸丟啊!QQ

因為當初訂定的三十天挑戰單元很多(自己挖坑給自己跳),Figma 的基本功能與應用就到今天暫時告一段落,帶著這些基礎與概念,我們明天繼續朝下一個單元出發,Go ! Go ! Go !


上一篇
第十二篇-好工具-figma-prototype
下一篇
第十四篇-站在巨人的肩膀-Ant Design UI 解析
系列文
0~1 的 Design System 之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言