文字故障如何用Figma實作

以下步驟跳得比較快,如果有看不懂可以發問,或是未來有空我在做成影片教學

步驟 1:準備工作

  1. 先做出文字:使用 T(文字工具) 在第一個 Frame 中輸入「潮流」。
  2. 設定字型、大小,確保位置符合你想要的視覺

步驟 2:把文字切割成上下兩層

  1. 把文字複製成兩份一個當上層一個當下層
  2. 把兩個文字各字用Frame包起來
  3. 再利用Frame的clip content功能切割出上層和下層

步驟 3:做成Component

此步驟非必要,主要是方便再使用

步驟 4:設定Prototype

1. 正常變成故障的動畫設定如下

      2. 故障變成正常的動畫設定如下

      3. 下層文字同理