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

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

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

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

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

熊貓頭

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

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

Smart Animate（智能動(dòng)畫）好用在哪里？

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

自動(dòng)填充中間幀

制作一個(gè)有趣的笑臉表情包

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

魔性人臉動(dòng)畫

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

繪制一個(gè)正方形 Frame

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

繪制臉部

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

繪制眼睛

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

繼續(xù)繪制眼睛

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

繪制眼珠

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

復(fù)制右眼

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

繪制嘴巴

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

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

動(dòng)畫的兩幀

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

連接兩幀

點(diǎn)擊播放按鈕，將會(huì)啟動(dòng)一個(gè)原型播放界面，點(diǎn)擊笑臉，它將自動(dòng)過渡到第二幀。

動(dòng)起來了

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

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

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

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

立即跳轉(zhuǎn)

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

從第二幀返回

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

有趣的笑臉

如何輸出為表情包？

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

Giphy Capture

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

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

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定