デザイナーの三谷です。
今回はFigmaについて書こうと思います。
というのも、社内でWEBデザインを作るときは皆んなPhotoshopを使用していましたが、エンジニアさんやクライアント様とのやり取りを考え、Figmaを使っていこうとなりました。
そこで、Figmaを実際に使用しながら使いやすいと思ったところ、逆に使いにくいと思ったところをいくつか紹介したいと思います。
使いやすい点
テキストやカラースタイルの管理ができる
この機能は大規模サイト制作の際に特に重宝される機能だと思います。
エンジニアさんにデザインを共有する際、今まではデザインとは別で詳細をまとめていましたが、Figmaではスタイルを適用するだけで自動的に管理されます。デザイン作成時もどこでどのカラーを使用しているか、フォントは何を使用していたかなど一目でわかります。
使いやすいですね。
複数で一緒に作業ができる。
同時編集ができるので毎回プレビューに書き出してFBをもらわずとも、URLを共有するだけで同じデータを触れるため時間短縮にもなります。
自分的には修正前と修正後の違いをすぐに見ることができるのでありがたいです。
コンポーネント機能
複数ページで使用するパーツやレイアウトをコンポーネントとして１つにまとめておくと簡単にそこから持って来られるため大規模サイトの時には特に使いやすいです。
また、コンポーネントをまとめておくことでエンジニアさんに共有する時にもスムーズにできます。
以前社内でエンジニアさんからデザイナーに向けて、わかりやすいコンポーネントの使い方のレクチャー会も開かれました。
とても勉強になりました。
使いにくい点
PhotoshopやIllustratorのデータをそのまま持って来られない
画像やイラストを入れたときに、修正が必要になった時に今までだと同じデータ上で編集できたのですがFigmaだとそれができないため少し不便さを感じました。
アートボードの高さを変更するとシェイプがそのままついてくる時がある
Commandを押しながら変更しないと触っていない箇所までシェイプが変わったりレイアウトが変わるため気をつけないと行けません。つい忘れてそのまま変更した後、後から全体を見た時に気づいて修正する時がありました。
ガイドラインがロックできない
ほとんどのデザイナーはデザイン前にガイドを作成してそれを基準としてレイアウトを作成していくと思うのですがFigmaではそのガイドのロックができません。知らない間に触ってしまって意図せず移動させてしまうリスクがあるため気をつける必要があります。まだプラグインなどもなさそうなので早く実装されてほしいです。
まとめ
今回はFigmaを使っていて実際に感じた使いやすい点と使いにくい点をいくつか紹介しました。と言っても全体的に見ると自分が慣れさえすれば作業効率は上がると感じました。WEB制作はデザイナーだけではなくエンジニアさんとも協力して進めていくため、Figmaはそれに適したツールだと思います。
今後はもっとFigmaでの作業が増えていくので手を動かしながら色々覚えていきたいと思います。
