Figma(フィグマ)の特徴や基本と便利な日本語化のやり方簡単まとめ


こんにちは!ユキックス(@MILKIT_DESIGN)です!
Webデザインやアプリデザインを、お客様と制作側の間でタイムリーに共有するための便利なプロトタイピングツールであり、UIデザインツールとしても(主にAdobe製品、Xdなどの他に)いま現場での使用率が徐々に上昇しているのが、Figma(フィグマ)です。
自身も2020年から実際にお仕事で頻繁に使うことが増え、その便利さと操作性の良さに驚いたと共に、機能の柔軟さや表現の自由さも手伝って短期間で馴染むことができました!
ご覧になっているWeb担当者さまの中には、Figmaの共有機能で依頼しているデザインや構成を確認することもあるのではないかと思います。
▼ デザイナーとクライアント間で実際に使用してみた際のFigma使用感を率直にご紹介した記事はこちら
今回は、そんなFigma(フィグマ)の特徴や基本と便利で簡単な日本語化のやり方についてまとめました。
Figmaの良いところと、できること
- デスクトップアプリだけでなくブラウザ上(オンライン環境があれば)閲覧やデザインが可能
- データはすべてオンライン上に生成されるため、軽くて軽快な操作性
(要素や容量が多いクリエイティブの場合は、読み込みに多少時間が掛かることもある) - 更新がリアルタイムで即時反映
- ひとつのURLでスピーディーに共有できる
- プラグインが豊富で、使いこなせば表現の幅が無限に広がる
- プロトタイプ機能(インタラクションや画面遷移、アニメーション)が充実している
- アセット(書き出し)も程良く長けている
- webpの拡張子も変換要らずでpngやjpg、svg同様にドラッグ&ドロップで即時に反映される
- デザイン以外にオンライン上のドキュメント作成などプロジェクト全体に使用でき汎用性高い
- Zeplin(プラグイン)を使えばCSSが自動で出力され、コードの確認が素早くできる
Figmaにできないこと
- オフライン環境でFigmaは使えない
- psd・ai・epsなどの拡張子は開けない
- 細部まで調整が必要なクリエイティブや紙物・印刷物はIllustratorを使う
- 写真のレタッチなどは最低限の機能のみ(Photoshopの方が細部まで調整できる)
この半年でFigmaにはできなかったことがどんどんプラグインの開発やアップデートが進み可能になったり実現していって、最近では制作でFigmaの機能に困ることはほぼなくなりました。
(Photoshop、Illustratorも必要に応じて効率良く使い、適材適所の使い分けがベターです!)
初めて使うときはFigmaを日本語化するとわかりやすい
Figmaの使い始めの頃は英語に慣れずどの機能がどこにあるか予測しながら使っていましたが、Google Chromeの拡張機能を使ってFigmaを日本語化したことで使用感が劇的に使いやすく変化したので、ツールの英語の表記に壁を感じている方に、全力でおすすめします。
Figma 日本語化 を有効にするだけでOK!!
Chrome ウェブストア内、拡張機能にある、Figma 日本語化 を有効化するだけで、ChromeのブラウザからFigma閲覧時に(FigmaアプリとChrome以外の閲覧環境及びブラウザでは日本語化は無効)ツールなど一部が日本語表記に変わり劇的に使いやすくなるのです。

▼ こんな感じで、英語表記だったものが日本語で表記されます

英語表記で分かりにくかったツールも、各プロジェクトページ内で日本語で表示されます ▼

プラグインの名前など、一部は英語のままですが、英語が得意ではない私でもこの機能のおかげで(わからない英語が出てきたら調べて覚えるタイプ)すぐにFigmaと仲良くなり、概ね問題なくスムーズに扱えるようになりました。
まとめ
ご覧になっているWeb担当者さまも、是非このFigma 日本語化 を入れて改善すると、Figma上のデザインに対する返信やフィードバックのコメントなどが、やりやすくなるのではないでしょうか。
今回はFigmaと仲良くなるための、いちばん最初の基本的な設定のお話しでした!Figmaはおすすめしたいプラグインがいくつもあるので、またの記事でご紹介できればと思います。
最後まで読んでくださって、ありがとうございます!
執筆者は、ユキックスでした!