前言
眾所矚目的2024 Figma 發表會終於來了，這次為大家整理了發表會上Figma所展示的重大改變，以及新功能。
其中包含藏金量強大的Figma AI、卓越的動態簡報工具 Figma Slide、以及Figma近年來一直在努力建立更貼合開發者Work Flow的 Dev Mode更新。
除此之外在介面設計上，這次 Figma 也做出了相當大的改變，是出了全新的 UI3 介面，更平易近人、適用性更強。
最後也針對許多現有的功能進行優化，讓你原本已熟知的功能變得更強大、更順手，對於工作效率可以有巨大的提升。
Figma AI
影像搜尋功能
這個功能有兩大應用場景
場景一：
想像一下今天你在一個大型團隊中工作，處理的專案量可能有上百個，每個專案當中又有好幾十個畫面，這個時候就會增加了協作的困難度。
而影像搜尋功能在這個時候就發揮了作用，如果你的同事傳了一張團隊製作的 App截圖，針對該畫面希望做進一步的調整或溝通，您要如何從上千個設計稿中找到相對應的畫面呢？
這個時候，你只需要把該截圖丟給 FigmaAI，不到幾秒鐘的時間，就可以找到一堆文件當中相對應的畫面、Component等。
場景二：
今天你想要從Figma Community中找到可以使用的UI Kit，您可以直接對AI輸入關鍵字或是丟一張圖，即可在資料量龐大的Community中找到相對應的圖層或是Component，您也無需將整個文件打開，
直接可以從找到的結果中拖曳想要的檔案進入你的文件。
智慧圖層命名
圖層命名一直是設計工作者一項非常重要的任務，完整的圖層命名可以幫助自己與團隊在未來文件管理起到至關重要的工作，但同時要準確的命名每個圖層也是具有一定難度的工作。
不過 Figma AI 現在可以針對人工智能的判斷，針對圖層的內容及屬性，直接一秒將所有文件中的圖層命名，再也不需要看到 Frame 32847 這種令人困惑的圖層名了，也節省掉了每新增一個圖層就必須停下來命名的時間。
自動生成相對應內容
在設計當中，我們可能常常遇到許多重複的元素，例如表格、清單、Card等等。 而每項元素雖然重複，但內容雖然規律但不一定一樣。
這個時候Figma AI 可以自動偵測內容，您只需要一鍵拖曳，就自動幫你生成好所有的內容，再也不需要使用 lorem ipsum ，讓你的設計更貼近最終成果。
自動去背
過去在設計中遇到需要去背的場景時，往往得使用另外的軟體進行協作，如Adobe photoshop
現在在Figma中，只需要一個按鍵，就可以完成此項任務，節省了大量的時間。
自動生成多語系內容
在設計中我們可能會遇到需要生成不同語系的狀況，以往可能需要透過第三方軟體、人員等進行翻譯的工作，翻譯後還需要慢慢更改設計稿。
現在 Figma AI 直接將設計稿轉換成你所選擇的語系，相當方便。
自動生成設計稿
最後，也是此次Figma AI 最強大的地方！自動生成mockup及Prototype
您只需要對AI輸入Prompt，如：Make a form with filter for receipt app，下一秒AI就會根據你描述的內容直接產出可調整的設計稿。
中途如果遇到想要增加、刪減或調整的地方，也只需要再對ＡＩ下新指令，就可以直接生成您想要的內容，是不是非常強大呢？
另外，現在您也只需要一個按鍵，AI 就可以自動判斷設計稿內容，直接相Prototpye都拉好，大幅提升Prototype製作效率
Figma Slide
Figma 推出的超強簡報製作工具，可以讓你直接在簡報中展示prototype、根據brand voice或其他需求產生不同語調的文字、快速設定主題色及強大的Smart animate 功能。
展示 prototype
在過去簡報製作中，如果想展示產品的prototype，通常只能透過螢幕錄影的方式，非常耗時間外，也無法針對簡報當下的情境做調整。
現在Figma Slide可以直接將你的Prototype搭配上裝置的mockup，在簡報中直接機動性地做展示。
智慧內容生成
利用AI生成文字內容，還可以針對不同應用場景，選擇文字語調
Dev Mode 優化
Code Connect
這次最強大的優化莫過於 Code Connect的功能了，雖然目前還處於Beta版，但 Code Connect 可以讓開發人員直接將你的 component codebase上傳到 Figma的Dev Mode當中
如此一來可以快速的統一所有Component的寫法，並且公佈於figma當中方便其他的開發人員直接使用。
安裝方式：
若要在 React 專案中本地端安裝 Code Connect，您可以遵循React README中的指示。
對於其他平台，首先需要在您的電腦上安裝 Node.js v16 或更新版本。您可以通過運行 node -v 來檢查是否已經安裝 Node.js 以及其版本。如果需要安裝 Node.js，所有平台的安裝說明都可以在 Node.js 官網上找到。
安裝 Node.js 後，您可以全域安裝 Code Connect，使其可以在您的電腦任何地方運行，方法是運行以下指令：
npm install --global @figma/code-connect
現有功能優化
Suggest auto layout
以往在使用Auto Layout 設計較複雜的版面時，設計師需自行判斷元素該如何分類，以包裹子層的方式使用不同方向Auto layout來達到最終期望的效果。
現在有了Suggest auto layout，系統直接針對設計稿編排的位子，建立好全部的Auto layout，節省設計時間。
Prototype for any screen size
現在在預覽Prototype時，可直接以拖拉的方式更改視窗大小，來檢視不同裝置下響應式網站的樣式。
總結
2024的Figma在AI上有了重大的突破，在許多小細節上面都可以看到AI協作的影子，對於介面設計來說絕對是一個重大的里程碑。
也希望未來在開發者模式當中能加入更多對於開發者更友善的設計，以此來無痛銜接設計端與開發端。
也期待在Figma AI在未來訓練後，能夠更精準的協助設計師完成工作。
此次的改版非常有感，也需要設計師加緊腳步，對於新的介面及功能更快上手。
