Figma Site 從設計到網站上線一條龍，不需要寫程式碼?
自從 Figma 被 Adobe 收購後，Adobe 帝國越來越無法動搖...喔不對，只在某個平行宇宙中吧? 在現在待的這個宇宙，Figma 根本沒有被收購，還漸漸成為第二個 Adobe 的樣子，也許在平面印刷用途還看不到 Adobe 的車尾燈，但是在數位設計領域絕對是不容忽視。
去年 2024 年 6 月底，Figma Config 2024 大會發表了一些 Figma Slide 簡報之類的新產品功能。
國外有人挖到 Figma 其中一支 js 程式中有 isDesignFile, isFigJamFile, isSlidesFile 之類的程式變數，這些都是現有的功能，但神秘的是還有一個 isSiteFile 的變數，這個變數的名稱讓人聯想到 Figma 會推出網站建置的功能。
當時心中想，如果還有科技新創在全心投入開發什麼...把設計稿轉換成某種網頁程式碼的 Figma Plugin? 讀取 Figma 檔案然後轉成網頁? 那要趕快逃呀...
等了快一年，這功能終於 2025 年 5 月初的 Figma Config 2025 正式發表了，名字還真的就叫 Figma Sites，簡單來說，它提供了一個網站編輯介面，延續了 Figma 的視覺設計編輯邏輯，然後可以把設計稿變成網站，直接發佈到網路上。
前一天晚上才在幫客人串物流 API，在網站的訂單管理後台和前台程式，加上各種資訊，睡前收工看到 Figma 發表會的新聞，雖然這產品對我做的事毫無任何幫助，但隔天還是來稍微探索一下這個功能，看看它的使用情境、優缺點、以及適合的對象。
2026 年才開始割韭菜
Figma 非常佛心，直接宣布今年不用為了自訂域名、流量費用、儲存空間多花錢，2026 年再說。
Figma Sites. Design and publish websites. Included on Full seat. No charges for custom domains, bandwidth, or storage until 2026—Enterprise and Organization plans get unlimited custom domains, Professional plans get 10. Limits subject to change after 2025.
一個有免費 HTTPS 域名，流量/空間/自訂域名都暫時免費的架站平台，在一些奇怪的用途或不法用途上，可能會讓有些人產生大膽的想法。
新創漲價套路
Figma 沒有公布以後這個自訂域名/流量/儲存空間的價錢會怎麼算，想用的人，明年最好有心理準備。
但是我們可以先看一下 Figma Sites 的其他科技新創競品們，近年如何展示絕妙的刀法或是銷售技巧?
例如 Webflow 在 2024 年 7 月宣布價格變動 Updates to Webflow’s Site and Workspace plans，它沒有漲價，只是減少每個方案的可用額度，例如 BASIC 方案，月流量額度從 50GB 限縮成 10GB 之類的，導致有些客戶的帳單費用暴增，Webflow 還要出來用各種說法滅火。
Framers 則是在 2023~2024 年間有一些花式調整，不直接漲那個數字，而是改方案名稱、Vistors 額度、版本紀錄限制、團隊多人協作限制、多語系功能等等，有在用才知道痛的細項功能，反正不爽不要用囉。
Figma 自己的套路之一則是:出了一個新產品，先免費公測讓大家用，後來那個產品改成要花錢訂閱，最後把那個產品塞進去現有的其他訂閱方案，造成本來的方案漲價。
Figma 官方還會說本來兩個分開訂閱比較貴，現在兩個包在一起更便宜囉! 可是對本來的使用者而言，明明沒有想用那個新產品，訂閱費用卻平白無故變貴，變相的綑綁銷售，為一些自己沒用的東西付費。
總之，選擇平台，確實能解決某些痛點，但有時候會痛到其他地方去了。
有些東西肯定比自己開發、自己去購買來得便宜，然而，每一項省下的開發成本，背後往往隱藏著功能彈性、長期費用，與供應商維護著搖搖欲墜的平衡。
不要盲目追求酷炫或最低成本，而是在目標、預算、後續擴充之間取得平衡，挑出最符合眼前需求的解決方案。或是不要想太多，人算不如天算！知足常樂吧。(怎麼變佛學頻道風格了?)
Figma Sites 沒有開放給免費仔使用
雖然 Figma 大發慈悲地把一些網站運作的必要成本費用，還有一些同性質線上服務常常會拿來當收費項目的東西，2025 年通通免費不用額外加價購買，但是用 Figma Sites 建網站本來不是免費的，要付費訂閱 Figma 才能用。
Sites is available on the Full seat for paid plans
Figma Sites 沒有開放給免費方案(Starter 方案)的帳號使用，必須要付費訂閱 Full Seat 方案才有得用，就是那個功能全部點滿、最高級的 Full Seat 方案。
沒錯，就是那個即使本來只有用到 Figma Design 畫圖，在 2025/3 月起硬是被塞了一些用不到的軟體，然後還漲價的 Full Seat 方案。(Updates to our pricing, seats, and billing experience)🥲🥲
只有 Full Seat 方案才能用 Figma Sites，其他方案都沒有，讓大家見識 Figma 刀法的厲害。不過這次還預告一個新的 Content seat 方案，預計每個帳號月費 $8–$25 美金，但還不知道何時推出。
可疑的是 Content seat 裡面包含的是 Figma Sites CMS，而不是 Figma Sites。
Figma Sites CMS 官方介紹只有寫說是一個:
Update website content dynamically with an easy-to-use no-code CMS
不過我覺得 Figma Sites 實際用起來還是繪圖軟體的邏輯，似乎不太適用於寫部落格文章、上產品規格表之類的用途，也許 Figma Sites CMS 就是拿來做那種純上稿用途的?
反正目前還沒推出，等真的出了再說。
聽說 Figma 教育版也不能用 Figma Sites，但我沒有教育版帳號，沒辦法親自求證。
Figma Sites 有哪些網站編輯功能?
Figma Sites 跟 FigJam/Figma Slides 一樣，Sites 又是另一個檔案類型，另一個編輯介面。不是像 Dev Mode 或 Figma Draw 直接在設計界面底下切換而已。所以如果 Figma Design 的一些功能在 Figma Sites 找不到，也不要太訝異。
(這個稿子是 Figma Sites 裡面提供的範本)
預設會配一個結尾是 figma.site，有 HTTPS 的免費網域，也可以綁定自己的網域。會提供一組 sites.figma.net 的 CNAME 和對應的 TXT 紀錄。之後可以到搜尋引擎 site:figma.site 看看大家做的網站都長怎樣。
沒有找到給人直接全站檔案打包下載的功能，其他有些大膽想法的人，看來要多費一些功夫。
除了 Figma 本身的視覺設計功能，每個網頁頁面還可以修改以下內容
- 頁面 Title 和 Meta Description
- 社群分享資訊
- 語系代號(html tag 的 lang 屬性值)
- 可以設定是否被搜尋引擎索引(meta noindex)
- 設定 Favicon
- 頁面的 url 名稱，但是不給用中文，反正只要輸入不允許的字元，完成後會自動被修掉
Figma Sites 目前頁面的 URL 看起來只能設定一層，例如 /about, /page，不知道怎麼作出第二層，例如 /en/about, /en/page, /cn/page。
如果想要拿 Figma Sites 來作多語系網站，頂多只能先用 en.domain.com, fr.domain.com 這種子域名的形式。
如果想要內文連結連到 PDF，只能放雲端硬碟連結，暫時看不出要怎麼直接上傳 pdf, zip 之類的。
Figma Sites 有一個 Publish history，可以「整個網站」回到之前某一次發佈的版本，但不是單一頁面，它也不會替每個版本生成獨立的公開網址，更無法同時把多個歷史版本掛在線上。
Figma Sites 的範本
在新增 Figma Sites 網站時，就會有一些範本清單給人選
- Simple Wedding
- Hip Fashion Sale
- Charming Natural Wedding
- Retro-Industrial Music Event
- Minimalist Art Gallery
- Dreamy Band EPK
- Group event
- Community Event
- Performance-Driven Gym
- Moody Dance Studio
- Sincere, Professional Legal Services
- Inclusive After-School Club
- Trustworthy App Download
- Modern Product Launch
- Friendly Accounting Services
- Sweet Flower Shop
- Modern-Retro Beverage Brand
- Sophisticated Vacation House Rental
- Elegant Landscaping Business
- Read.cv template
- Minimalist Model Portfolio
- Nature inspired visual essay
- Fresh Recipe Blog
- Minimalist Design Student Portfolio
- Clean personal resume
- Modern Brand Design Studio
- Personality-Driven Designer Portfolio
- Straightforward Brand Guidelines
- Personal Collectors Items
- Cozy restaurant
- Serene Wellness Coaching
- Classic dance studio
然後在編輯頁面時，又有另外一些範本區塊(如下圖)。
可以先背一下，以後看到設計，就知道是不是懶蟲業者拿 Figma 的範本做的。
Figma Sites 可以全站插入自訂的程式碼
如果想要做線上預約或聯絡表單型的網頁，Figma Sites 有個 Embed 嵌入式元件，可以塞 iframe 表單到個別的頁面上。
Figma Sites 有提供輸入 GA ID 的欄位，還有提供全站插入追蹤碼的欄位，可以放在這 4 個位置:
- Start of <head>
- End of <head>
- Start of <body>
- End of <body>
實測放一些 js script 或是外部連結，都沒有被擋掉。
不過這個是全站設定，不能在個別頁面設定。也沒辦法直接插 HTML/CSS/JS 到頁面任一區塊中間，這很重要嗎? 我懶得說了，反正真的碰到問題了就知道。
Figma Sites 的動態特效
在 Publish your designs on the web with Figma Sites 中用了好幾段篇幅和 demo 影片，講了 Figma Sites 的特效功能。
如果從 Figma Sites 的操作介面，可以看到又是熟悉的 Scroll behavior 的 Interactions 選單，這個在 Figma Design 的 Prototype 也有，但是 Figma Sites 這邊的選單細項跟 Prototype 那邊的完全不一樣。
很湊巧的是 Figma Sites 的競品架站工具，剛好背後各有其他動畫庫扶持，像是 Webflow 有 GSAP (2024年收購 GreenSock)，Framer 有 Framer Motion，就算沒用他們的平台，一般開發者也是能在合理範圍內使用他們的套件，幫自己的網頁加上特效。
但是 Figma 目前似乎沒有和誰有這種關係，也許 Figma 以後也會跟哪個知名套件合作，勾選即用(開始幻想、畫餅)。
話說這年頭常在網路廣告看到一堆網頁課程，宣傳中也很愛放某幾種吸睛的網頁特效，但是學員可能不知道，依照老師給的教材，或是平台的功能，只要依照固定的步驟，很簡單就能做出那個特效。但是比如說一個捲動時移動背景場景的效果，要開始調整前景內容的 RWD ，讓前景的圖文不要跟背景內容重疊、干擾、互相打架時，這才是最花時間的...
然後在現實中，老闆可能會驚覺：為了那幾段炫技動畫，製作時間長了、報價高了、頁面載入時間也增加了、維護換內容還很麻煩，有可能綁死在某個架站平台上；但最終成交率、註冊數，全都紋風不動。酷炫歸酷炫，KPI 卻毫無起伏，這份落差，才是最讓人苦笑的現實。
在 Figma Sites 中實做一些常見的網頁元件
在剛剛 Figma Sites 的範本區塊，可能已經有人發現疑點，在範本區塊中並沒有一些網頁設計常見的元件，像是頁籤(tab)、收合選單、輪播(Carousel)、對話視窗(Modal/Dialog)，那要怎麼在 Figma Sites 中實現這些效果?
從目前 Figma 官方的免費範本中，可以找到製作了這些效果的區塊，我們可以從中學習，以下列舉幾個:
(按箭頭會左右切換文字內容的 carousel)
(按箭頭會左右切換圖片內容的carousel)
(常見的手機收合選單)
基本上就是要對於 Figma 的紫色圖層相關功能，還有 state、component property、interactions、component instances 等功能，有一定程度的認知和熟練度。
不然一些稀鬆平常的網頁效果，搞不好在 Figma Sites 根本做不出來。或是網頁上的效果不好時，這下可不能說自己的設計稿做得很完美，是工程師做的不夠絲滑、跟手、使用者體驗不佳。
Figma Sites 生成出來的前端頁面是用 React
Figma Sites 這種功能架構下，當然也沒有什麼站內內容搜尋、資料篩選器、會員登入、購物車之類的功能。
這邊我們來檢查它生成的網頁，是用什麼技術架構? 打開 Devtools 的 Console，前台會有一支 sites-runtime.js 報一堆 React 錯誤。
sites-runtime.js 裡面可以找到 __REACT_DEVTOOLS_GLOBAL_HOOK__然後 React Devtools 的 components 可以看到物件結構，看起來應該是用 React 無誤。
不過整個產品發布會的 Figma Sites 相關報導，卻隻字未提 React，可能畢竟產品客群還是設計人員，講這些沒什麼幫助。
Figma Sites 產出的網頁，CSS Class 名稱是像 class="css-c7ar6c css-7js8wp css-v27th6，這種 CSS-in-JS 的產物，沒什麼可讀性，也不是 TailwindCSS 的那種，但至少結構還算相對單純(跟某些 WordPress 第三方的頁面編輯器排出來的東西相比的話)。
Figma Sites 的 SEO 設定
Figma Sites 做出來的網站預設是禁止被搜尋引擎索引，全站跟每一個頁面都有 Exclude webpages from search engine results 的勾選設定。如果發布後發現原始碼還是有 meta noindex 禁止索引，要去每一頁個別檢查設定。
每一頁都能改 Title 和 Meta Description、社群分享資訊、語系代號(html tag 的 lang 屬性值)，基本的功能都有。
Figma Sites 可以把物件改成各種 heading tag，少了一個被 SEO 廠商挑毛病的機會。
Figma Sites 產出的網頁，可以正常讓搜尋引擎爬蟲看到內文文字，不像 Flutter web 之類的某些異端，內文是一大塊 canva element，讓一堆正常網頁的功能都武功全廢。也不像那種表面上翻來覆去有好多頁，實際上網址永遠停在同一個位置的網站。
整體來說，Figma Sites 把基本的 SEO 功能都做了，sitemap.xml 也會自動產生，讓使用者專注在製作內容。
內容管理政策
本文一開始有提到，提供某些功能的架站工具，容易讓不法之徒有大膽的想法，別人有大膽的想法是他的事，但是平台為了扼殺這些大膽的想法，而做的防禦措施，可能影響到我們這些正常的使用者。
Figma Sites 目前的內容管理政策應該還是繼續沿用本來的:
上傳的素材會自動被掃描，其他人也可以寫信去檢舉。不可以色色，不可以發布仇恨內容等。
用平台最怕被管了，祈禱 Figma Sites 不會哪天突然開始用安全理由亂刪大家的東西，或是會阻擋使用者放其他網站的連結?
Figma Make
看完這些可能覺得 Figma Sites 是款非常落後的產品，社群網站上的行銷神棍，只要用 AI 出一張嘴下指令，幾分鐘就做好一個網站，為什麼這個 Figma Site 做網站還要自己動手操作，用到滑鼠跟鍵盤?
Figma 也有這種出一張嘴做設計的功能，去年 2024 年 Config 大會上有個 Make Designs 功能，就是輸入文字下 prompt 讓 AI 畫 UI 的功能，雖然沒有全面開放，但因為發生一些爭議，例如叫 AI 設計一個天氣 APP，但 AI 怎麼畫，都跟某些市面上的 APP 相似度很高，還有不少爭議，於是 Figma 官方把功能下架了。
幾個月後 2024/9，Figma 又重新推出另一個叫 First Draft 的功能，幫助使用者從空白頁面發想，並宣稱內容不會被拿去訓練(First Draft doesn't train on customer content. It uses off-the-shelf AI models (like OpenAI’s GPT-4 and Amazon Titan))。
這次 2025 年又重新發表一個 AI 畫 UI 功能，叫做 Figma Make，有一個 AI 聊天對話視窗可以跟設計稿互動，使用的 AI 模型是 Claude 3.7。
Introducing Figma Make: A new way to test, edit, and prompt designs
Figma Make currently uses Claude 3.7 Sonnet; we will begin introducing other models in the future.
目前官方是說會逐步推送給 Full Seat 的付費用戶，要先去團隊設定中，把 Let your team use Figma’s AI features 的設定打開，然後耐心等待。(Adjust access to AI features across Figma)
拿設計稿去訓練(Content training:Let Figma use your team’s content to train AI models. Figma takes steps to de-identify data and protect your privacy.)的開關就在那個設定下面，至少還有開關，已經很有良心了。
所有人都適合用 Figma Sites 做網站?
研究到這裡就覺得，Figma Sites 有些情況可能很好用，但好像有些情況並不合適。首先網頁編輯人員自己要先買一個 Full Seat 才能使用 Figma Sites 做網站。
看是買 Professional/Organization/Enterprise 哪個方案的 Full Seat，每個帳號每個月 $16~$90 美金(每年台幣 6 千多 ~ 3 萬多)，這還要訂閱預繳一年才有這個價錢，如果每個月單買的話更貴。
然後碰上「要多開一個管理帳號」這回事，例如客人想要自己上去改網頁內容，如果客人自己有 Figma Full seat 的付費帳號還好，如果要幫客人多買一個甚至 N 個 Full seat，不管是買單月、還是一次買一年，一個帳號每年台幣快 6000 多甚至 2~3 萬起跳。
這件事要是從某些人口中說出來，可能會變成「咦？我只是想自己改兩行文字，結果每年還要多付幾萬塊買一個帳號？！」。
Figma 官方在宣傳這個產品時，特別點名三種適合拿來用 Figma Sites 做的網站:
- 個人作品集(personal portfolio)
- 活動網站(event site)
- 產品登陸頁(product landing page)
但我不禁想吐槽一下...
- 作品集或簡歷? 如果不是 UI 設計師，不是本來就很會用 Figma 的人，那還不如用 Canva...。
- 本來有付費訂閱 Adobe 的，Adobe 也有一個專門用來放作品集或簡歷的網站功能，就是 Adobe Portfolio。或是考慮 Behance 平台，上面還有追蹤、留言等功能，自帶社群曝光屬性。
- 活動網站? 一個只有顯示活動資訊，其他活動報名或各種功能都沒辦法做，要嘛塞 iframe，或是另外再次跳轉到其他網站，然後一個月還要 $20 美金起?
- 一個沒辦法直接結帳，也沒有會員功能，要購物還要另外跳去別的網站的...產品頁? 到時候成效不好，追蹤數據跑掉，又準備被廣告投手或其他人甩鍋。
- 維護 landing page 或活動資訊，基層人員會用 Canva 做一張圖，上傳到後台就不錯了，現在改用 Figma Sites 做網站倒好了，還要教別人操作這個全部都是英文的 Figma 介面?
結語
這場發表會的亮點當然不只 Figma Sites，我忍痛只討論這個網頁功能，結果還是寫成一篇沒人想看完的長文。
講完一些小坑之後，要把「哪些網站可以／不可以用 Figma Sites 做」說得讓所有人秒懂? 坦白說，我放棄了。
因為規模差太大，三頁效果豐富的介紹站、百頁內容站，多語系電商、SEO 急救案，用到的功能完全不同；一句「可以」或「不行」，只會誤導。
因為產品永遠都在更新，今天說不能怎樣，明天可能就上線一個完整的功能。
期待很快就會把功能做完整，結果等了好幾年就是遲遲不上，平台不給的，我們不能要。
我不是賣線上課程，也不是搞速成的，所以不會用「如何用 Figma Sites 只花 5 分鐘做出銷售頁」之類的誇張標題，也不太討論其他超出 Figma Sites 功能範疇的，還得回到傳統全端網頁程式客製化開發，或使用專門用途的 SaaS 平台。
我可不想跟一些畫餅大師一樣，說未來一定可以怎樣、一定會有怎樣的功能。只希望這篇筆記能替大家少踩幾顆雷。以後有用到什麼再來繼續補充。