如何從 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 導出方式是什麼?請在下面的評論部分告訴我們。

Sign up and earn $1000 a day ⋙

4 Comments

  1. 陳小雪 -

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

  2. 阿偉 -

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

  3. 小雪的夢 -

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

  4. 青蛙隊長 -

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

Leave a Comment

iSpring 設計課程時的常見錯誤

iSpring 設計課程時的常見錯誤

在本文中,教學手冊將指導教師在設計電子學習課程時克服 iSpring 中的常見錯誤。

如何使用Animal 4D +創建在手機上移動的4D動物

如何使用Animal 4D +創建在手機上移動的4D動物

Animal 4D應用程序使用虛擬現實技術來識別極其逼真的4D動物,從而非常直觀地學習英語。

如何將USB HUB連接到LG Smart TV WebOS操作系統

如何將USB HUB連接到LG Smart TV WebOS操作系統

在下面的文章中,WebTech360將通過簡單步驟指導您如何將USB HUB連接到運行WebOS的LG Smart TV。

如何選擇購買便宜,優質的迷你冰箱

如何選擇購買便宜,優質的迷你冰箱

選擇購買迷你冰箱時,除了品牌,價格和產品功能外,還需要注意尋找可靠的購物場所,讓您享受最佳的優惠與品質。

在Zalo上發送和接收1GB文件

在Zalo上發送和接收1GB文件

最近,使用最新版本的Zalo Web,我們可以發送最大1GB的附件,這為用戶提供了便利的文件傳輸體驗。

如何在 Telegram 上恢復固定消息

如何在 Telegram 上恢復固定消息

如果每天都有大量新消息傳入,則在群聊中固定一條消息會非常有用。了解如何恢復 Telegram 中的固定消息以及相關操作。

如何使用谷歌照片修復閉眼問題

如何使用谷歌照片修復閉眼問題

探索如何利用Photoshop等工具修復照片中的閉眼問題,讓您的合影更加完美。

2020 年 10 個最佳代理服務器服務提供商站點

2020 年 10 個最佳代理服務器服務提供商站點

您在尋找最好的代理服務器提供商嗎?以下是目前 Internet 上的 10 個最佳代理服務器服務提供商。

如何恢復出廠設置的松下電視

如何恢復出廠設置的松下電視

學習如何將Panasonic TV恢復出廠設置,重置應用程序及其他設置的步驟。

如何合併 Google 試算表中的選項卡

如何合併 Google 試算表中的選項卡

學習如何合併 Google 試算表中的選項卡,用以更有效率地管理您的數據和信息。

如何為LG Smart TV NetCast操作系統設置IP和網絡DNS

如何為LG Smart TV NetCast操作系統設置IP和網絡DNS

在下面的文章中,當電視連接到網絡時,WebTech360將引導您完成為LG Smart TV NetCast操作系統設置IP地址和DNS的步驟。

在 CapCut 上更改视频声音的说明

在 CapCut 上更改视频声音的说明

在 CapCut 上修改视频声音的简单步骤,帮助用户轻松编辑视频音效并添加新音轨。

如何修复 Google Meet 上的屏幕共享错误

如何修复 Google Meet 上的屏幕共享错误

如何修复 Google Meet 上的屏幕共享错误,如果 Google Meet 上不共享屏幕该怎么办?了解解决方案与实用技巧,确保在线会议顺利进行。

如何在手機、電腦上更改 Google Meet 的名稱很簡單

如何在手機、電腦上更改 Google Meet 的名稱很簡單

Google Meet 是用於學習和團隊合作活動的流行應用程序。CloudO3 將幫助您如何重命名 Google Meet,讓您的虛擬會議更加專業。

您是否應該從 Windows 10 禁用雲提供的保護?

您是否應該從 Windows 10 禁用雲提供的保護?

深入了解 Windows 10 的雲提供的保護功能,以及自動樣本提交的影響,幫助您做出明智的決定。

Sign up and Earn ⋙
Sign up and Earn ⋙