Figmaのプラグインを利用しての感想
記事作成日：2022/12/06
/icons/hr.icon
https://prtimes.jp/data/corp/97201/logo/pc-ba73dcad1c8c92d765091e6fd83fc4e3-88fb7045f47ae4f406460e5843e27be4.jpeg
はじめに
おはようございます！タニシTanishi.iconと申すものです。
今回は多くのWebデザイナーが使うFigmaというツールに関してプラグインを利用しての感想を話したいと思います！
まずFigmaとは？
Figma は、ブラウザベースのコラボレーション・インターフェース・デザイン・ツールである。MacOSまたはWindows用のデスクトップアプリケーションでオフラインでも利用できる。AndroidとiOSで使用するモビルアプリはモバイルとタブレットデバイス上でリアルタイムにFigmaプロトタイプを閲覧、インタラクションすることが可能である。Figmaの機能セットは、UIとUXのデザインにフォーカスされており、リアルタイムでのコラボレーションに重点を置いている。ベクターグラフィックのエディターとプロトタイピングツールを活用している。
ちょっとwikipediaでは、めんどくさく記入されていますね。
まぁ簡単にいえばブラウザ上でデザイン制作が行える、Webデザインに特化したデザインツールです。
Figmaの需要って？
ここまでFigmaに関して話していますが、どのくらい人気があるのかって重要ですよね...
そこで、「2022年に使用されたデザインツール調査」を海外の人が行っているみたいなので見てみましょう！
以下のアンケートには4,260件の回答が得られています。
https://scrapbox.io/files/639050a9102a39001e5aea6d.png
圧倒的なFigmaの使用率！！！
次は、「2023年に試してみたいと思うツールはどれですか？」というアンケートに関してものです。
https://scrapbox.io/files/639051d8b7659c001d131e35.png
これもFigmaが圧倒的！！！
これは使うしかないっていうことで、次からFigmaに関してのプラグインについて利用しての感想をさせていただきます。
Figmaのプラグイン10選とその感想
まず私はYoutubeにあるHIRO.CODE.ヒロコードさんの以下の動画を参照させてもらいました。
プラグインの使い方まで乗っているのでおすすめです！
https://www.youtube.com/watch?v=loP9yAc-EY0
それではやっていきましょう！
01 Unsplash
これは「無料で高品質な写真を挿入できる」機能です。
確かにデザインする際にいちいち写真探すのってめんどくさいな～って個人的に思います。
実際利用しての感想
https://scrapbox.io/files/6397f85c4786d5001d7b039c.png
こんな感じに表示されますね。
一応Advent Calendarなのでクリスマスの写真にしてみます。
打つ文字は「クリスマス」と「christmas」で試してみます
https://scrapbox.io/files/6397f97e777083001e44876d.pnghttps://scrapbox.io/files/6397f99b9157e7001d21beb2.png
日本語：results 5
英語：results 10,003
日本語だとあまり対応してないのか少ないですね...
英語だとかなり多いですね！
あと便利だと思ったのが「複数選択し、それをボックスに挿入できること」
https://scrapbox.io/files/6397fabe79fa6f001ef7a6f5.png
https://scrapbox.io/files/6397fb28b9d034001d87aa49.png
画像を決めたら「Insert 4 images」を押します。
Presetsもあるのですが、ランダムなので自分の気に入った画像が出るのか微妙なのです。
自分で探すことをお勧めします。
ですが、いちいち一個づつ挿入しなくていいのが便利でした。
02 Remove BG
これは「画像の背景を透過してくれる」機能です。
Photoshopとの差がとても気になりますね...
実際利用しての感想
まず、アカウント作成しないといけないらしいです。
アカウント作成～API Key取得までの工程を上記のサイトで教えてくれます。
そして月に50枚までは無料らしいです。
制限があったのか...
それでは試してみましょう
https://scrapbox.io/files/6397fd9123fe7c001daf1fd1.png
元の画像
https://scrapbox.io/files/639800ed3359f1001dfcaf61.png
Remove BGを利用したときの画像
精度もスピードも性能高すぎて、びっくりしました。
月50枚って制限があるけどすばらしいくらい使い勝手がいい機能でした。
03 Find and Replace
これは「テキストを検索したのちに置き換える」機能です。
私はまだデザインが初心者で実務的なことをおこなっていないので、実用性に関してあまり実感がわかりません。
実際利用しての感想
「クリスマス」を「 christmas」に変えてみましょう。
https://scrapbox.io/files/639805113359f1001dfd05c3.png
https://scrapbox.io/files/639805d959295d001d7977d4.png
https://scrapbox.io/files/63980600d64657001e277757.png
全部変わるのは便利ですね。
しかし、日本語→英語に関しては文字数の違いでごちゃごちゃになってますね。
日本語は日本語、英語は英語で置き換える必要がありますね
でも一気に変更できる点では便利な機能なのではないでしょうか。
04 Mockup
これは「デバイスのモックアップ素材」に関しての機能です。
これは見てもらった方が早いので早速やってみましょう。
実際利用しての感想
https://scrapbox.io/files/63980fb93e4b4d001e47ac94.png
見てもらえばわかると思いますが、Frameに対してモックアップに挿入できるというやつですね
ちゃんとどこを表示したいのかも出してくれるので、加工がとても楽です。
ですが有料のものもあるので、Find→Free Onlyで探しましょう！
05 SkewDat
これは「オブジェクトを垂直・水平方向に変形する」機能です。
オブジェクトを垂直・水平方向に変形することで、デザインの印象を変えることできます。
それではやってみましょう
実際利用しての感想
https://scrapbox.io/files/639811bd59295d001d7a7310.png
https://scrapbox.io/files/6398122e2aa94e001e7a2d19.png
ちょっとわかりづらいですが、傾いてますね。
Illustratorで行えた作業ですが、Figma上でも行えるので、ちょっとお得感がでますね。
06 Blobs
これは「流体シェイプを生成する」機能です。
やわらかい印象を与えるときなどに有効だと感じます。
実際利用しての感想
https://scrapbox.io/files/63981ba4cea9e0001d6cd4a9.png
割と自由に形を決めることができるので、気に入った形にして画像挿入しても楽しそうですね。
https://scrapbox.io/files/63981c38280727001d1b079c.png
柔らかい印象になりましたかね？
06 Better Font Picker
これは「フォント表示を見ながら選べる」機能です。
フォントってどんな感じにするか悩みますよね。
フォント名だけ見てもわからないし...
それではやっていきましょう！
実際利用しての感想
https://scrapbox.io/files/63981d9d98507d001ee711ca.png
これは、Figmaの従来からあるフォント名で決めるものです。
しかし、先ほど言った通りフォント名だけ見てもあまりわかりません...
次を見てみましょう。
https://scrapbox.io/files/63981e13c4b05a001dfff7e0.png
フォントが全部変わっているのでわかりやすいですね。
いちいち「これどんなフォント？」って試すこともなく便利でした。
08 Google Sheets Sync
これは「Google Sheetsと連携ができる」機能です。
これも見てもらった方が早いかもしれないですね。
それではやってみましょう。
実際利用しての感想
https://scrapbox.io/files/6398269d0188b5001e889bf5.png
これを実際に連携させて変化させてみましょう。
https://scrapbox.io/files/63982700a5499a001d13e615.png
実際に変化されてますね。
https://scrapbox.io/files/639827638b660a001e813a9f.png
https://scrapbox.io/files/6398276e9d8df9001e8ac13b.png
まぁこのプラグインは便利は便利なのですが、設定に＃を使わないといけないので忘れずにという感じですかね。
今までの記録を残すときには便利なのかな？それとも統一感を出すときに重要なのかな？っと思いました。
Google Sheetsの内容を変更した際にボタン1つで変更できる容易さ、便利だと思います。
個人的には正直実務等で利用する場面があるのかは、経験がないのでわかりません。
09 Content Reel
これは「ダミーテキストや画像を一括反映させる」機能です。
これは会議でのペルソナ資料等で役に立ちそうですね
実際利用しての感想
https://scrapbox.io/files/639866764ac157001d505753.png
適当に画像とテキストを用意しました。
それでは画像とテキストを変えてみましょう！
https://scrapbox.io/files/6398672f13ce97001d5be0fd.png
割と素早く表示されました。
ランダムに何かするときにはいいかもしれないですね。
他にも画像には食べ物などもあり、割と面白い内容だと思います。
仮のイメージとして役に立つのではないでしょうか。
10 Time Machine
これは「パーツごとのバックアップができる」機能です。
パーツのバックアップなどは実際に、気に入ったパーツを残すときなどの需要がありそうですね。
それでは、やってみましょう！
実際利用しての感想
https://scrapbox.io/files/63987bf1b3ba86001eedabfa.png
実際に上記の２人をパーツとして残してみました。
https://scrapbox.io/files/63987c14e0f968001e63ab9a.png
ページにTime Machineが残ってますね。
https://scrapbox.io/files/63987c6b3d1add001d03069f.png
これはパーツの保存もでき、保存した日付もわかりますね。
これは、気に入ったものを残すという点において優れていますね。
デザインする際に、前に作ったものと現在作ったものと比較できるので、自分の成長過程も見れるし、良いデザイン悪いデザインもわかることでしょう。
おわりに
みなさんいかがだったでしょうか。
拙い文章で読みづらいところもあったと思います。
申し訳ないです。
Figma初心者だったので、変化の具合がわからなかったなどもあるでしょう...
そういう人は是非、Figmaを試してみてはいかがでしょうか？
それではみなさん最後まで読んでいただき...
ありがとうございました！
それではみなさんまたどこかでお会いいたしましょう！