帶你認識Figma

更新 發佈閱讀 3 分鐘
raw-image

Figma是一個主要用來設計網頁的矢量設計軟件,與Wordpress,Shopify, Webflow等不同,Figma做出來的並不是實際的網站,而是一個雛型(Prototype)。

那你或許會想:“為什麼不直接使用類似Wordpress的工具呢?’’

試想想以下這一個情況:

你用Wordpress架設好了一個網站,當你把你的成品展現給你的客戶時,他覺得某些地方需要修改,例如:這裡需要加多一個區域(section),那裡又要加多一個用戶心得(testimonial) ,或者更嚴重的情況是客戶不滿意現在這個網站的設計風格。那你之前耗費心思和時間架設的網站就白廢了,又要重新開始架設過。

raw-image


這種情況對雙方都不好,你浪費了你的時間和心思,而客戶也需要再給你多幾個星期甚至幾個月來架設網站。

而有了Figma,你就可以先把網站的介面設計出來,然後拿給客戶確認,如果客戶認為沒有什麼問題了,就可以在Wordpress照著Figma的設計一模一樣架設出來了。就算客戶覺得需要在這裡多加一個section也不是什麼難事,你可以在Figma直接加上去。因為Figma只是一個設計介面的工具,並不像Wordpress那些工具一樣需要每一個去調整背後的原理。

雖然中間多了一個步驟,但這一個步驟可以確保你的成品是客戶接受或喜歡的,還有可以省下你的時間。在某些比較有規模的團隊裡,還會有特定的設計師專門在Figma上設計好了介面,再交給開發團隊去開發。

可以把它想像成建築物的藍圖,如果在施工的過程中沒有一個明確的藍圖,到最後建出來的也很有可能是危樓。而藍圖就是避免了這個的可能性。又或者可以把它想像成是IKEA的說明書。只要你按著說明書上的步驟去組裝,成品一定會是完整的。並不會說組裝一個椅子到最後的成品出來變成了一個凳子(雖然IKEA很喜歡多出幾個螺絲來混淆我們)。

總結來說,Figma就是為了解決網頁開發中間的“介面設計“的煩惱的一個設計軟件。市面上也有幾個類似Figma的軟件:Sketch, Adobe XD。那為什麼要選Figma呢?其實也沒有為什麼,Figma做的到的其他軟件也做得到。純粹只是Figma提供一個“免費“的配套給我們使用,僅此而已。

留言
avatar-img
留言分享你的想法!
avatar-img
不可靠博客的沙龍
0會員
1內容數
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
Webflow是一個強大的網站建設平台,它提供了一個直觀且無需編碼的方式來創建精美的網站。無論您是一個新手還是一個有經驗的網站開發者,Webflow都可以滿足您的需求。 Webflow的主要特點之一是它的可視化編輯器。您可以通過拖放元素、設計佈局和編輯內容來建立網站,而無需編寫任何代碼。
Thumbnail
Webflow是一個強大的網站建設平台,它提供了一個直觀且無需編碼的方式來創建精美的網站。無論您是一個新手還是一個有經驗的網站開發者,Webflow都可以滿足您的需求。 Webflow的主要特點之一是它的可視化編輯器。您可以通過拖放元素、設計佈局和編輯內容來建立網站,而無需編寫任何代碼。
Thumbnail
今天要來整理 Figma的免費課程!傳送門 Figma 是個很好用的製圖工具, 但在真正用 Figma 畫 UIUX時,最重要的第一步是「知道這個專案的目的」。 Wireframes 產品框線圖 Figma 可以用來畫 Wireframes 就像在寫文章一樣先有大鋼,再填內容。在做產品
Thumbnail
今天要來整理 Figma的免費課程!傳送門 Figma 是個很好用的製圖工具, 但在真正用 Figma 畫 UIUX時,最重要的第一步是「知道這個專案的目的」。 Wireframes 產品框線圖 Figma 可以用來畫 Wireframes 就像在寫文章一樣先有大鋼,再填內容。在做產品
Thumbnail
ABLE 累積超過 2,000 個設計畫面的寶貴經驗,橫跨科技新創、文化出版和電子商務等多個領域。我們致力於協助客戶打造品牌網站和內部管理系統介面,並以實際操作經驗為基礎,打造符合國際主流 UI/UX 原則的網站設計模板,以提供使用便利且適合開發的解決方案。
Thumbnail
ABLE 累積超過 2,000 個設計畫面的寶貴經驗,橫跨科技新創、文化出版和電子商務等多個領域。我們致力於協助客戶打造品牌網站和內部管理系統介面,並以實際操作經驗為基礎,打造符合國際主流 UI/UX 原則的網站設計模板,以提供使用便利且適合開發的解決方案。
Thumbnail
Figma是一個主要用來設計網頁的矢量設計軟件,與Wordpress,Shopify, Webflow等不同,Figma做出來的並不是實際的網站,而是一個雛型(Prototype)。 那你或許會想:“為什麼不直接使用類似Wordpress的工具呢?’’ 試想想以下這一個情況: 你用Wordpress
Thumbnail
Figma是一個主要用來設計網頁的矢量設計軟件,與Wordpress,Shopify, Webflow等不同,Figma做出來的並不是實際的網站,而是一個雛型(Prototype)。 那你或許會想:“為什麼不直接使用類似Wordpress的工具呢?’’ 試想想以下這一個情況: 你用Wordpress
Thumbnail
前端工程師為了讓網頁呈現在使用者面前時更加美觀,經常需要透過圖表及文字的調整達到前述美觀目的。本篇文章將分別介紹測試圖片網站「Dynamic Dummy Image Generator」及測試文字網站「Lipsum generator:Lorem Ipsum」,讓身為前端工程師或有意成為前端工程師的
Thumbnail
前端工程師為了讓網頁呈現在使用者面前時更加美觀,經常需要透過圖表及文字的調整達到前述美觀目的。本篇文章將分別介紹測試圖片網站「Dynamic Dummy Image Generator」及測試文字網站「Lipsum generator:Lorem Ipsum」,讓身為前端工程師或有意成為前端工程師的
Thumbnail
UI design has brought us into a whole new stage as Vector Graphics Editors, VGE tools like Sketch(2010), Adobe XD(2016), and Figma(2016) were introduc
Thumbnail
UI design has brought us into a whole new stage as Vector Graphics Editors, VGE tools like Sketch(2010), Adobe XD(2016), and Figma(2016) were introduc
Thumbnail
隨者Sketch(2010)、Adobe XD(2016)、Figma(2016)等等的向量圖形編輯器(Vector Graphics Editor, VGE)誕生後,UI設計邁向了一個全新階段。這些工具除了能使UI設計達到系統化、模組化的高效率開發以外,也同時讓前端工程師有更完整的樣式(Style
Thumbnail
隨者Sketch(2010)、Adobe XD(2016)、Figma(2016)等等的向量圖形編輯器(Vector Graphics Editor, VGE)誕生後,UI設計邁向了一個全新階段。這些工具除了能使UI設計達到系統化、模組化的高效率開發以外,也同時讓前端工程師有更完整的樣式(Style
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News