Figma を使ってみた。

はじめまして。今回はfigma についての説明、使ってみての感想などを書いていきたいと思います。

ー なぜFigmaを使おうと思った？

きっかけは些細なことですが、最近人気を高めているデザインツールがあるというのを聞いて、興味を持ちました。そして以前からadobeのデザインツールをよく使用していたのですが、”どんなデザインツールでも触れるようにしておこう”と考え勉強することにしました。

ー Figmaとは？

figma 社からリリースされた製品で、オンライン上で操作できることが特徴です。なので、”デザイナー以外の人でも” 簡単に操作することができ、"チーム体制での作業" がスムーズです！！！

ー 他のデザインツールとの比較

デザイナーの使用率

日本ではadobeXDがよく使用されていますが、世界ではsketchが多く使用されているみたいです。

それぞれの特徴と個人的見解

やはり一番世界で使われているツール、sketch。使いやすさが一番！！！sketch自身私も使いはじめたばかりでまだ不慣れですが、世界に愛されているデザインツールだけあって最近少し愛着が湧いてきました（笑）そんなsketchさんの使用レポについてまた記事にしたいと思います。

お次にfigma。 figma の強さはやはりオンライン上で全て完結すること。そして、デザイナー以外の人でも簡単に操作でき、チームで共有するときに便利なことです。実際私自身もITのエンジニアチームと制作時に使用しており、連絡のやりとりがスムーズで使いやすいです。英語版しかないので共有した後に”英単語がわからんわい！”と言われたこともありますが、まぁそこさえクリアできたら文句なしです。

最後に”adobe XD”。一番最初に使ったデザインツールであり、日本語版もあるのでなおさら使いやすい。他のadobeの製品Illustratorやphotoshopもずっと使っていたので、使用方法もすぐに覚えられたイメージがあります。新機能を毎月リリースしているので、どんどん便利になっているイメージがあります。

ー 実際に使用

まずは英語を訳するところから

英語の意味はなんとなくはわかるのですが、イメージがつかみにくかったのでまずは訳することに。

Bring Forward：前面へ
Bring to Front：最前面へ
Send Backward：背面へ
end to Back：最背面へ
group selection：グループ選択
frame selection：フレーム選択
Outline Stroke：パスをアウトライン化する
use as mask：クリッピングマスク作成
add auto Layout：テキストの長さや要素の数によって、自動的にそのオブジェクトのサイズが変わる便利な機能
create component：コンポーネントを作成する
コンポーネントとは：デザイン全体で再利用できるUIの部品のこと。ボタン、アイコン、モーダル
Show/Hide：表示/非表示
Flip Horizontal：水平方向に反転
Flip Vertical：垂直方向に反転

慣れる為にUIトレースをする

最近食べ物系のアプリデザインをしている為、その共通点を研究する為、マクドナルドアプリとmacaroni、31cLub、モスバーガー、ケンタッキー、サンマルクカフェなどいろんなアプリのデザインをトレースしました。

実際にデザインする

私は日頃デザインのアウトプットとしてcocodaと言うデザイン勉強サービスを使用しています。今回はcocodaでの課題をfigmaを使ってやってみることにしました。

ーfigma を使ってみての感想

最初は英語しかなくて難しそうだと感じましたが、意外と難なく使うことができました。後個人差にもよると思いますが、ペンツールがfXDよりigmaの方が使いやすかったです。またデザイナーとしての武器が一つ増えてとても嬉しいです。皆さんもぜひ、一度使用してみてはいかがでしょうか。