こんにちは。最近ARCHECOにJOINしました木村です！
ついにアツい夏が来ましたね！原宿駅から会社が近くてよかったなと思う日々です。
さて、熊澤さんがARCHECO社長に就任し世間がざわつく中、新たな“ざわつき”がARCHECOで起こりはじめています。
それはARCHECO女子たちが毎日ラジオ体操をしていることではなく、
コンサル吉田さんが愛妻弁当を持ってこなくなったことでもなく、
熊澤社長が「H&M」を「ハム＆メロン」と読んだことでもありません。
それは「Figma（フィグマ）」を導入したことなんです！
最近UIやプロトタイプの制作に関するツールが増えている中で、じわじわと人気の出てきているデザインツール、それがFigma。
ARCHECOデザイナーは基本的にIllustratorでデザインをしているのですが、データの共有や共同作業がなかなか面倒です。また修正が何度か入ると何が最新ファイルかわからなくなったりなどの問題も発生しがち…
そこで最新ツールの伝道師おみきさんが、Figmaを使うことでそれらの問題が多少なりとも解決するのではないかと考え、我々Figma勉強中のデザイナーに向けて講習会を始めてくださいました！
講習会の様子とともに、皆様にもFigmaについてご紹介していけたらと思います！
そもそもFigmaとは？
Figmaとは、世界初のリアルタイムコラボレーションができるデザインツールです。
つまり、複数のデザイナーが同じファイルを同時に編集することが可能なのです！
Figmaの特徴
では、Figmaがどんなデザインツールなのか、特徴を紹介していきたいと思います。
①複数人で同時に作業ができる
始めにも書いたとおり、Figmaでは複数人が同時に同じファイルで作業ができます。
Googleのスプレッドシートを想像するとわかりやすいかもしれません。
シェアされたURLにアクセスするだけで同時に確認や編集が可能になるので、チームでの共同作業に優れています。
②ブラウザ上で作業ができる
Figmaはブラウザ上で作業を行うデザインツールです。ソフトやアプリケーションをダウンロードする必要はなく、いつでもどこでもブラウザ上からアクセスしてログインをすれば制作することができます。
また、編集はブラウザ上に自動保存され、データが常に最新に保たれるので「保存し忘れたままページを閉じちゃった！」なんてことがあっても安心です。
③デザインとプロトが同時にできる
Figmaにはプロトタイピング機能がついているので、ワイヤーフレームの作成からデザイン、そしてプロトタイピングまでの全てをFigmaのみで行うことができます。
DesignタブをPrototypeタブに切り替えるだけでプロトタイプができ、修正箇所を見つけたらすぐにまたDesignタブに戻って微調整をすることが可能なので、とっても便利です。
④コメント機能がある
コメントを残したい場所にピンを立てて簡単にページ内にコメントを残すことができます。
また、そのコメントへの返信もできるので、スムーズにフィードバックができます。
⑤バージョン管理ができる
複数人で編集するからには、簡単に使えるバージョン管理機能が必須ですね。
Figmaではヒストリー機能を使って簡単にバージョン管理を行うことができます。
⑥エンジニアフレンドリー
Figmaではタブを切り替えるとコードが表示され、デザインした画面の情報を簡単に確認することができます。
Illustratorなどのアプリを持っていない人であってもブラウザ上で登録するだけで簡単に見ることができるので、デザインデータをエンジニアに渡すときにスムーズにデータ共有ができます。
また、情報を確認したいオブジェクトを選択すればそのオブジェクトのサイズや位置、色などのデータが表示されるのもエンジニアフレンドリーなポイントです。
Figmaの残念なところ
ここまでFigmaの便利な特徴を何個もお伝えしてきましたが、その反面でちょっと残念なところも…
①UIが英語のみ
Figmaは全て英語表記になっており、日本語に対応していません。
あの機能、どこにあるんだ？と探すときに英語の解読に苦戦する場面も…。
英語に馴染みのない方は「うっ！」となるかもしれませんね。（そんな時はバイリンガルのおみきさんに聞きましょう）
しかしショートカットキーは他のデザインツールと共通しているものも多いので、慣れてしまえばそんなに困ることはありません。
②ネット環境に依存する
FigmaはWebベースのツールなので、ネット環境がないところでは動作しません。
③チュートリアルが少ない
Figmaは主に英語圏で使用されていることもあり、日本人向けのチュートリアルはまだまだ少なめ。
しかしこれは、国内での認知度が上がれば解決される問題と言えるでしょう。時間の問題です！
まだまだ続く、Figma講座…
ここまでFigmaとは何か？について長々とお話ししてきました。
次回からはFigmaで知っておくべき便利機能についてドンドンご紹介していこうと思います。
お楽しみに！
