激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

用 Figma 輕松制作屬于自己的表情包

發(fā)布時間：2024-08-22 10:38:03 瀏覽量：262次

發(fā)表情包也是一種情感表達(dá)方式，能夠化解尷尬，我超喜歡發(fā)表情包，但又不想老是發(fā)那幾個，所以偶爾會自己動手制作一些，來回饋廣大網(wǎng)友。

熊貓頭

以前我通常使用 Photoshop 的幀動畫來制作表情包，就是一幀幀地修改圖片，最后導(dǎo)出Gif。比如下面這個表情包，就是我在蘋果發(fā)布新的 AirPods 時用 Photoshop 制作的。

然而，最近我發(fā)現(xiàn)在使用 Figma 時，其 Smart Animate 功能也非常適合制作表情包，于是嘗試做了幾個。一做就停不下來，現(xiàn)在甚至覺得 Figma 是最好的表情包制作工具了。因為 Figma 基于 Web，無需繁瑣的安裝步驟，而且上手快速，所以我決定給大家展示一下我如何使用 Figma 做表情包，感興趣的讀者也可以嘗試一下，動手豐衣足食。

Smart Animate（智能動畫）好用在哪里？

如果你對 Figma 不熟悉，可以查看以下文章《網(wǎng)頁設(shè)計？你也可以——Figma入門》和《我用 Figma 做設(shè)計這一年》。去年，F(xiàn)igma 推出了一個叫 Smart Animate 的特性，是 Figma 動效制作的一種方式。Smart Animate 的「智能」之處在于，你只需繪制起始和結(jié)束狀態(tài)，然后在它們之間連接并添加觸發(fā)事件，F(xiàn)igma 就會自動填充中間幀，生成自然的動畫效果。

自動填充中間幀

制作一個有趣的笑臉表情包

百聞不如一見，我們直接動手做一個簡單的，最終效果像右邊這個有趣的笑臉。它其實是一個只有兩幀的循環(huán)動畫，左右切換會顯得特別有趣。

魔性人臉動畫

現(xiàn)在讓我們開始吧，首先繪制最左邊的臉，實際上是組合各種圖層。Figma 中有一種特殊的圖層叫 Frame，它可以理解為一種容器，里面可以放置其他圖層，甚至另一個 Frame，外層 Frame 就是畫板，而我們要連接的線也在畫板之間。

繪制一個正方形 Frame

接下來，畫一個圓盤，也就是下面的臉。選擇形狀工具，選圓形，在剛才的 Frame 中繪制出一個圓。

繪制臉部

接著，我們來畫眼睛，每只眼睛由一個圓形和一條長條組成，先繪制長條。選擇矩形工具，在 Frame 中繪制一個長方形。

繪制眼睛

眼睛的顏色要和圓形一樣，在右側(cè)將其設(shè)置為白色，并添加圓角。顏色選擇白色并給予圓角效果。

繼續(xù)繪制眼睛

接下來，畫一個圓形的眼珠。繪制一個和長條一樣高的圓形，并設(shè)置為黑色，移至長條左側(cè)。

繪制眼珠

現(xiàn)在，左眼完成了，右眼只需要復(fù)制一下。選中眼球，按下 Shift 再點擊長條，然后按住 Alt（Option）拖動即可復(fù)制右眼。

復(fù)制右眼

最后，繪制嘴巴。嘴巴是一個圓弧，在 Figma 中制作圓弧也很簡單。首先畫一個圓形，然后移動中心 Arc 控制點，形成弧形；之后再向外拖動，將其變?yōu)榄h(huán)狀。

繪制嘴巴

現(xiàn)在，我們繪制了第一幀，第二幀只需要復(fù)制第一幀并對其稍作調(diào)整。選中 Frame，按住 Alt（Option）拖動，即可復(fù)制第二幀。在第二幀中，將眼球向右移動，嘴歪向右邊。

選擇兩個眼球，向右移動，并旋轉(zhuǎn)嘴巴使其傾斜。

動畫的兩幀

現(xiàn)在，將這兩幀連接起來即可完成這個表情包。選擇 Prototype，選中左側(cè) Frame，在上方會出現(xiàn)連接點，將其連接到右側(cè) Frame。選擇 Smart Animate 動畫以實現(xiàn)平滑過渡。

連接兩幀

點擊播放按鈕，將會啟動一個原型播放界面，點擊笑臉，它將自動過渡到第二幀。

動起來了

盡管現(xiàn)在有動畫了，但只能播放一次，還需要手動觸發(fā)，我們希望能循環(huán)播放，所以需要做些調(diào)整。當(dāng)前觸發(fā)條件是點擊事件，現(xiàn)在改為 After Delay，即延遲幾秒后自動觸發(fā)。

點擊連接線，設(shè)置觸發(fā)條件為 After Delay，時間設(shè)為 1 毫秒。

設(shè)置觸發(fā)條件

在右側(cè)會出現(xiàn)一個時間輸入框，默認(rèn)是 800ms，我們需要立即觸發(fā)，輸入 1ms。雖然不能輸入 0，但是輸入 1 就能實現(xiàn)立即跳轉(zhuǎn)。

立即跳轉(zhuǎn)

現(xiàn)在，我們需要讓它從第二幀跳回第一幀，實現(xiàn)循環(huán)播放效果。點擊 Frame 2，從連接點拖出一條線連接第一幀，同樣設(shè)置觸發(fā)為 After Delay，并將時間調(diào)整為 1ms。

從第二幀返回

這樣，再次轉(zhuǎn)到原型播放界面，這個循環(huán)動畫就完成了。

有趣的笑臉

如何輸出為表情包？

如果想轉(zhuǎn)換為表情包，F(xiàn)igma 本身不支持導(dǎo)出 Gif，通常我會使用 Giphy Capture 進(jìn)行錄制。它支持多種參數(shù)調(diào)整，還可裁剪片段，點擊 SAVE AS 即可保存 Gif，非常方便。

Giphy Capture

制作更復(fù)雜的表情包

上面的案例雖然簡單，但包含了 Figma Smart Animate 功能的各個方面。掌握原理后，你可以制作更復(fù)雜的表情包，如下面的「靈感啟示連擊」和「漢堡+6」

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定