【2020年総復習】Figmaに関するツイートまとめました！

もち | デザイナー・経営者

2020年12月31日 13:55

今年はFigmaに関するツイートやコンテンツをいっぱい発信しました！一気にまとめて見たいというお声もチラホラもらっていたので、2020年のうちに記事としてまとめてみました。是非年末年始の空いた時間に復習がてら見てもらえると嬉しいです♪

⭐2020年リアルに使いまくったプラグイン10選

⭐figmaのショートカット早見表（完全版DLリンク付き）

▼完全版のDLはこちらからどうぞ！

⭐figmaのブレンドモード適用一覧

イマイチブレンドモードを使いこなせていない方に、ひと目で効果がわかる早見表を作成しました。

⭐figmaで出来る文字デザイン一覧

プラグインを使えばこれくらいのことはできちゃいます！

⭐figmaでつくるデザインTips動画集

■ニューモフィズム文字の作り方

⭐Figmaでニューモフィズムっぽい文字をつくる方法⭐

プラグインは必要なし！Figmaの標準機能のみ！

①文字を背景よりちょい明るい色に
②ドロップシャドウで濃い影つける
③インナーシャドウで光を入れる
④ドロップシャドウを足して上に光を足す

位置調整がちょい面倒だけど慣れれば余裕かと👍 pic.twitter.com/RoSMH7tVvU
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 22, 2020

■立体ストローク文字の作り方

文字デザインに使えるFigmaプラグイン紹介⭐

今回使用しているプラグインは「Blend」

パスに沿って選択したオブジェクトを自動で量産してくれます。コピペでも頑張れば同じことが出来るけど、このプラグインを使えば超高速で出来るようになるのでオススメです💛 pic.twitter.com/HlWrSqEDsd
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 18, 2020

■マスクをつかったデザインのやり方

⭐Figmaでマスクを使った画作りのやり方⭐

今回はマスク機能を使った画作りを動画にしてみました🥳
簡単だけどちょっと不思議で印象的な画作りができるので覚えておいて損はないと思います✨ pic.twitter.com/WX8MrzNut2
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 13, 2020

■ストライプ文字の作り方

⭐Figmaで即席ストライプ文字をつくろう⭐

①ストライプ柄にしたい文字を用意
②細長い四角をつくる
③1つとなりにコピー
④⌘＋Dで量産
⑤角度と大きさを整える
⑥文字をアウトライン化
⑦マスクして完成！

割と簡単にできちゃうので是非試してみてね🥳
もっと簡単な方法あったら教えてくださ〜い！ pic.twitter.com/Lkepkk6n7t
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 4, 2020

■写真を使ったテキストの作り方

⭐Figmaで写真を使ったテキストをつくろう⭐

Exclude機能を使えば簡単に写真を使ったテキストがつくれちゃいます！普通にテキストを打つよりも印象的な絵作りができるので是非試してみてね🥳✨ pic.twitter.com/mYhS0R5pPZ
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 11, 2020

■デュオトーンデザインの作り方

⭐Figmaでデュオトーンデザインをつくろう⭐

今回はFigmaのプラグインを駆使してちょっとオシャレな即席デュオトーンデザインをつくってみました🥳

Figmaだけでもプラグインを使えばこんなこともできちゃいます👍✨

▼使用プラグイン
・素材写真：Unsplash
・切り抜き：RemoveBG
・色付け：Duotones pic.twitter.com/teythp5ox5
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 5, 2020

■簡単に可愛いグラデーションをつくる方法

⭐Figma豆知識⭐
可愛いグラデーション背景を簡単につくる方法！

①Pinterestでつくりたい雰囲気のカラーパレットを探す
②４つ四角を置いてスポイト機能で色を付ける
③かぶせるように大きい四角を作って透過させる
④Background blurをMAXでかける

これで完成🥳試してみてね✨ pic.twitter.com/LmGaYiU4au
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 2, 2020

■ちょっと複雑なグラデーションの作り方

⭐Figmaで少し複雑なグラデをつくってみよう⭐

昨日紹介した技より更に複雑なグラデーションがつくれます🥳

①アートボードにカラーをつける
②マルをつくってLayer blurかける
③マルをコピペで増やす
④マルに色をつけてOverlayにする
⑤サイズや色味を微調整して完成！

動画早すぎたかも💦 pic.twitter.com/ruSiyp8n2u
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 3, 2020

■ロゴやイラスト画像の色味を変更する方法

⭐Figma豆知識⭐

Figmaでロゴやイラスト画像の色味を変更する方法！

イラストやロゴの色味を変えたいけどpng画像だからできない…そんな時はこのテクニックを試してみてください👍 pic.twitter.com/b3Rwq9QgvW
— もち | WEB・UIデザイナー (@makiko_sakamoto) November 12, 2020

■プロトタイプモードでお気に入り機能を再現する方法

⭐Figmaでお気に入り機能を再現してみよう⭐

今回はよくある♡マークを使ったお気に入り機能の再現チュートリアルです！

①元画像からWhile Hovering + Open overlayでリンク
②hover時からクリック後をClick + Swap withでリンク
③クリック後はClick + Close overlayを追加

これで完成です！ pic.twitter.com/D7XmpS3XnT
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 9, 2020

■ページ内リンク（アンカーリンク）の再現方法

実際にページ内リンク機能を使ってみました！
LPのメニューをクリックした時の動きが再現できてとても良いです✌️✨

スクロール秒数や飛び先の位置調整（リンクさせたレイヤーの100px上の位置を指定など）も出来るのでいい感じ！ pic.twitter.com/4li5oqZccd
— もち | WEB・UIデザイナー (@makiko_sakamoto) December 9, 2020