Skip to main content

figma learn

{% note info %} 練習使用figma設計網頁 {% endnote %}

線框稿 (wireframe)是一個類似草稿的網頁設計圖，會用簡單的灰階顏色、線條、符號或框線，來表達網頁的架構與排版，並不等同於原型 (prototype) 是屬於互動性來呈現最終使用者介面的方法，現今有許多好的工具可快速製作。

好文參考: Wireframe、Mockup與Prototype的差異？來看看完整的產品UI設計流程

開始#

註冊並開始新增一個檔案！

畫布#
  1. 新增一個Frame並設定寬度
  2. 設定layout Grid 為12欄(bootstrap常見設定)
操作#
  1. 元件之間的間隔操作 點選元件按住shift往右移動，每一次會移動10px

👇👇👇未完待續 您可以拉到底部先看參考文章👇👇👇

網路參考文章#

TBD UI Design Tutorial - Website From Wireframe https://www.youtube.com/watch?v=_P3CrgFlXhg Figmal Figma-初學者的入門心得 https://share.tenten.co/figma-%E5%88%9D%E5%AD%B8%E8%80%85%E7%9A%84%E5%85%A5%E9%96%80%E5%BF%83%E5%BE%97-5867f6410d53 2020 年最好的 Figma 插件 https://zhuanlan.zhihu.com/p/113751314

Edit this page