首頁 » » 如何從 Figma 導出 GIF

如何從 Figma 導出 GIF

您是否正在尋找一種方法讓您的開發者和設計遊戲更上一層樓？Figma 是一個令人難以置信的工具，它允許用戶創建充滿音頻、視頻和動畫效果的豐富原型。但是，要正確測試原型的感覺和功能，您應該能夠將其導出為 GIF 並查看實際效果。

如何從 Figma 導出 GIF

本指南將解釋如何使用 PC 或移動設備將 Figma 原型導出為 GIF。

設備鏈接

如何在 PC 上的 Figma 中導出為 GIF

從 Figma 導出動畫 GIF 的最簡單方法是使用 TinyImage 插件。在啟動和使用該插件之前，您需要登錄 Figma 帳戶並轉到“社區”部分。

下載插件：

  1. 在搜索框中輸入“TinyImage”。
    如何從 Figma 導出 GIF
  2. 在“插件”部分下，找到“TinyImage Compressor”圖標。
    如何從 Figma 導出 GIF
  3. 單擊圖標旁邊的安裝按鈕。
    如何從 Figma 導出 GIF

安裝插件後，打開要另存為 GIF 的設計項目。單擊屏幕上的任意位置以打開下拉菜單。選擇“插件”並點擊“TinyImage Compressor”啟動它。

使用插件創建 GIF 的步驟：

  1. 在插件窗口的頂部，按“創建 GIF”按鈕。
    如何從 Figma 導出 GIF
  2. 在 Figma 畫布上選擇圖層，作為您的 GIF 的框架。
    如何從 Figma 導出 GIF
  3. 在 TinyImage 窗口的底部，點擊“使用選定的圖層”選項。您會在窗口中央看到圖層的幻燈片。
    如何從 Figma 導出 GIF
  4. 在預覽下方，單擊圖層圖標，然後左右拖動切換圖層順序。
    如何從 Figma 導出 GIF
  5. 點擊幻燈片下方的小“播放”按鈕以調整播放速度。
    如何從 Figma 導出 GIF
  6. 設置 GIF 循環的次數，最多可設置為無限。
    如何從 Figma 導出 GIF
  7. 調整 GIF 的大小以符合需求。
    如何從 Figma 導出 GIF
  8. 確保透明邊框的可見性。
    如何從 Figma 導出 GIF
  9. 根據需要選擇 GIF 的圖像質量。
    如何從 Figma 導出 GIF
  10. 設置“抖動”選項。
    如何從 Figma 導出 GIF
  11. 按“導出 GIF”按鈕進行導出。
    如何從 Figma 導出 GIF
  12. 下載完成後，這些幀將合併並形成一個 GIF，自動保存在您的下載文件中。

關於分層和回放的注意事項

通過手動排序來控制 GIF 的最終外觀，並通過調整時間測量線上的按鈕來設置默認播放速度。

如何在移動設備上的 Figma 中導出為 GIF

因為 Figma 原型通常有高級動畫，移動應用程序不支持內建的導出功能。您可以屏幕錄製並使用轉換工具將視頻轉換為 GIF。

如何在 iPhone 上的 Figma 中導出為 GIF

  1. 使用手機的數位錄製功能，找到並啟動 Figma 應用程序，打開您需要的項目。
  2. 進入“設置”並選擇“控制中心”。
  3. 啟用“屏幕錄製”功能，然後返回並開始錄製。
  4. 完成後，錄音會存儲在照片應用中。

然後您可以使用快捷方式應用程序將錄製的視頻轉換為 GIF。以下是轉換步驟：從App Store下載。

  1. 啟動快捷方式應用程序，選擇“圖庫”卡片。
    如何從 Figma 導出 GIF
  2. 選擇“製作 GIF”並添加快捷方式。
    如何從 Figma 導出 GIF
  3. 選擇要轉換為 GIF 的視頻並選擇要包含的幀。
    如何從 Figma 導出 GIF
  4. 儲存您的新 GIF，它將保存到您的照片應用程序中。

如何在 Android 設備上的 Figma 中導出為 GIF

在 Android 上，您可以使用錄屏功能錄製原型並使用 GIPHY 的應用程序將其轉換為 GIF。以下是步驟：

  1. 啟動 Figma，開始錄製預覽，然後停止錄製。
  2. 安裝 GIPHY 應用程序並創建帳戶。
    如何從 Figma 導出 GIF
  3. 選擇視頻，調整長度並儲存為 GIF。
    如何從 Figma 導出 GIF

無限制導出 GIF

不論您是經驗豐富的開發人員還是業餘設計師，這些方法都可以方便地向他人展示您的作品。希望本指南能幫助您更好地了解如何從您的 Figma 創作中獲得高質量的 GIF，無論您使用的是哪種設備。

您使用 Figma 的網絡版還是移動版？您的 GIF 導出方式是什麼？請在下面的評論部分告訴我們。

(26) 評論

  1. 陳小雪 -

    謝謝這篇文章，讓我知道如何從 Figma 導出 GIF，加油，期待我的作品！

  2. 阿偉 -

    是不是在導出 GIF 的時候，必須要注意背景的顏色搭配呢？不然視覺上可能會不協調

  3. 小雪的夢 -

    這篇文章比我看過的所有參考都要好，謝謝你詳細的說明！

  4. 青蛙隊長 -

    我一直在找 Figma 的 GIF 教程，但大多數都很複雜，這篇簡單易懂，太好了

  5. 可可愛心 -

    感謝分享！Figma 的用法一直不太熟悉，這篇文章讓我對導出 GIF 有了新的認識

  6. 阿強 -

    這篇指導很清楚！其實我之前也有試過，但還是失敗了，這次一定按照你的步驟再試一次！

  7. 可樂筆記 -

    為什麼我在導出 GIF 時老是會卡頓，是不是電腦性能的問題？

  8. 阿湯 -

    分享一下我從 Figma 導出的 GIF，效果還不錯，推薦大家也試試看

  9. 阿敏 -

    我好久不更新 Figma，這篇文章讓我重新燃起了熱情，想開始動手做專案了

  10. 小天 -

    聽說 GIF 的配色很重要，我想試試用不同顏色組合，看看效果是否會改變

  11. 小明 -

    這篇文章真是太棒了！我一直在想怎麼從 Figma 導出 GIF，現在終於找到方法了，謝謝分享

  12. 小雨 -

    真的是太有用了！尤其是那個導出設定，讓我少走了很多彎路，之前一直不知道該怎麼設置

  13. 可樂Mao -

    最近我正在學習 Figma，這篇文章完全解決了我導出 GIF 的疑惑，謝謝！

  14. 小芳 -

    這篇文章真是暖心，導出 GIF 的細節講得很到位，我很開心能學到這些技巧

  15. Mimi -

    有試過用你們的方法導出過，效果真的不錯，我會給你的方法打個5顆星！

  16. 海豹小子 -

    提醒一句，GIF 文件太大會影響載入速度，要適度注意文件大小哦！

  17. 赤焰 -

    哈哈，我剛剛試過，真的很簡單！剛學 Figma 時替我省了很多時間！

  18. Huang Yihua -

    對了，這篇文章說的導出格式是否只適用於某些版本的 Figma 呢？有點疑惑

  19. Jessie Lin -

    我會把這篇文章分享給我的同事，他們一定也會感激你的

  20. 瑋婷 -

    有沒有大大可以告訴我，導出 GIF 時會不會影響質量呢？想做些高質感的作品，但一直擔心！

  21. Joyce Wu -

    真是有趣，我也想試試不同的出口選項，看看導出的光影效果如何

  22. Robbie Kang -

    這文章真厲害！剛學 Figma 時一直困擾 GIF 導出，現在徹底明白了

  23. Emily Chen -

    這真是極具啟發性的文章！讓我在 Figma 上學到了很多，也可以更好地提升我的設計技能

  24. 小綠草 -

    謝謝你的建議！我有時候對 GIF 的大小有點頭痛，你有沒有好的解決方法呢？

  25. 阿哲 -

    哈哈，我之前一直傻傻的用錯方法，這次終於找到正確的步驟，坐等成功

  26. 阿寧 -

    期待有更多 Figma 教學，特別是在動態設計方面，這次成功了下次想試試其他效果

留下評論

使用 occ 指令安全地清除 ownCloud 檔案版本

使用 occ 指令安全地清除 ownCloud 檔案版本

刪除一個帳戶或所有使用者的所有已儲存的 ownCloud Server Classic 檔案版本，並區分完全清除和基於保留期限的過期。

ownCloud 行動連線被拒絕？請檢查 URL 和可及性

ownCloud 行動連線被拒絕？請檢查 URL 和可及性

以正確的順序檢查伺服器 URL、手機網路、HTTPS 端點和伺服器日誌，即可追蹤 ownCloud 行動連線被拒絕的原因。

使用 Systemd 定時器可靠地執行 ownCloud 後台作業

將按需作業運行替換為 systemd 定時器，該定時器每 15 分鐘執行一次 ownCloud 支援的 occ system:cron 命令。

透過尋找故障路由來恢復 ownCloud WebDAV 同步

透過 Apache、Nginx 或反向代理程式追蹤 WebDAV 請求，然後使用經過驗證的 PROPFIND 測試確認 ownCloud 同步功能正常。

設定 Nextcloud 的公共 URL，以便它可以存取自身。

透過設定其規範 URL 並從伺服器本身檢查 DNS、HTTPS 和反向代理路由，修復 Nextcloud 缺少出站位址警告的問題。

在 Ubuntu 24.04 上設定 Nextcloud Redis 快取

在 Ubuntu 24.04 上設定 Nextcloud Redis 快取

透過本機 Unix 套接字配置 APCu 和 Redis，以實現 Nextcloud 快取和檔案鎖定，並提供目前和舊版 Nextcloud 的步驟。

使用 Systemd 定時器自動執行 Nextcloud Cron

檢查 Nextcloud 的 cron 模式，修復其 systemd 服務和計時器，並驗證後台作業在啟動後以及每隔五分鐘運行一次。

使用 Redis 清除 Nextcloud 的檔案鎖定警告

啟用可靠的 Nextcloud 檔案鎖定，選擇適當的 Redis 或 Valkey 後端，並驗證警告是否清除，同時避免並發檔案變更的風險。

如何才能獲得 Nextcloud A+ 安全評級

如何才能獲得 Nextcloud A+ 安全評級

使用最新更新、HTTPS 和 HSTS、精確的反向代理信任以及針對公共伺服器的檢查，修復 Nextcloud 掃描中常見的錯誤。

啟用 Nextcloud 伺服器端加密，並評估其影響

為需要加密的儲存配置 Nextcloud SSE，保護加密金鑰，並在加密現有文件之前測量傳輸和 CPU 影響。