帶你認識Figma

更新 發佈閱讀 3 分鐘
vocus|新世代的創作平台

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

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

試想想以下這一個情況:

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

vocus|新世代的創作平台


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

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

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

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

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

留言
avatar-img
不可靠博客的沙龍
0會員
1內容數
你可能也想看
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
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
Thumbnail
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
ABLE 累積超過 2,000 個設計畫面的寶貴經驗,橫跨科技新創、文化出版和電子商務等多個領域。我們致力於協助客戶打造品牌網站和內部管理系統介面,並以實際操作經驗為基礎,打造符合國際主流 UI/UX 原則的網站設計模板,以提供使用便利且適合開發的解決方案。
Thumbnail
ABLE 累積超過 2,000 個設計畫面的寶貴經驗,橫跨科技新創、文化出版和電子商務等多個領域。我們致力於協助客戶打造品牌網站和內部管理系統介面,並以實際操作經驗為基礎,打造符合國際主流 UI/UX 原則的網站設計模板,以提供使用便利且適合開發的解決方案。
Thumbnail
Webflow是一個強大的網站建設平台,它提供了一個直觀且無需編碼的方式來創建精美的網站。無論您是一個新手還是一個有經驗的網站開發者,Webflow都可以滿足您的需求。 Webflow的主要特點之一是它的可視化編輯器。您可以通過拖放元素、設計佈局和編輯內容來建立網站,而無需編寫任何代碼。
Thumbnail
Webflow是一個強大的網站建設平台,它提供了一個直觀且無需編碼的方式來創建精美的網站。無論您是一個新手還是一個有經驗的網站開發者,Webflow都可以滿足您的需求。 Webflow的主要特點之一是它的可視化編輯器。您可以通過拖放元素、設計佈局和編輯內容來建立網站,而無需編寫任何代碼。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
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
前端工程師為了讓網頁呈現在使用者面前時更加美觀,經常需要透過圖表及文字的調整達到前述美觀目的。本篇文章將分別介紹測試圖片網站「Dynamic Dummy Image Generator」及測試文字網站「Lipsum generator:Lorem Ipsum」,讓身為前端工程師或有意成為前端工程師的
Thumbnail
前端工程師為了讓網頁呈現在使用者面前時更加美觀,經常需要透過圖表及文字的調整達到前述美觀目的。本篇文章將分別介紹測試圖片網站「Dynamic Dummy Image Generator」及測試文字網站「Lipsum generator:Lorem Ipsum」,讓身為前端工程師或有意成為前端工程師的
Thumbnail
Figma是一個主要用來設計網頁的矢量設計軟件,與Wordpress,Shopify, Webflow等不同,Figma做出來的並不是實際的網站,而是一個雛型(Prototype)。 那你或許會想:“為什麼不直接使用類似Wordpress的工具呢?’’ 試想想以下這一個情況: 你用Wordpress
Thumbnail
Figma是一個主要用來設計網頁的矢量設計軟件,與Wordpress,Shopify, Webflow等不同,Figma做出來的並不是實際的網站,而是一個雛型(Prototype)。 那你或許會想:“為什麼不直接使用類似Wordpress的工具呢?’’ 試想想以下這一個情況: 你用Wordpress
Thumbnail
今天要來整理 Figma的免費課程!傳送門 Figma 是個很好用的製圖工具, 但在真正用 Figma 畫 UIUX時,最重要的第一步是「知道這個專案的目的」。 Wireframes 產品框線圖 Figma 可以用來畫 Wireframes 就像在寫文章一樣先有大鋼,再填內容。在做產品
Thumbnail
今天要來整理 Figma的免費課程!傳送門 Figma 是個很好用的製圖工具, 但在真正用 Figma 畫 UIUX時,最重要的第一步是「知道這個專案的目的」。 Wireframes 產品框線圖 Figma 可以用來畫 Wireframes 就像在寫文章一樣先有大鋼,再填內容。在做產品
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News