社内にFigmaを導入しました！

こんにちは、WEBデザイナーの田村です。

今回は社内に新しくFigmaを導入したことについての記事になります！制作時の様々な課題を解決してくれるFigmaの魅力についてご紹介したいと思います。

Figmaについて

Figmaはクラウドベースのデザインツールで、デザイナーがリアルタイムでデザインを作成、共有、協働することができます。ベクター編集、デザインプロトタイプ作成、コラボレーションツールを1つのプラットフォームに統合したデザインツールです。Figmaの使いやすいインターフェースと強力な機能は、世界中のデザイナーにとって必須のツールとなっています。

Figmaの公式サイトはこちら（https://www.figma.com/ja/）

Figma導入までの背景

弊社では従来、ワイヤーフレームはパワーポイント（以下：PPT）で作成し、UIデザインはAdobeXD（以下：XD）を使用していました。

そこでは以下のような課題がありました。

複数のツールを切り替えるコスト

ワイヤーフレームをPPTで確認し、XDでUIデザインを作成することになるとデザインや組み込み時に２つのデータを確認しなければならないといった手間がありました。XDでワイヤーフレーム作成を試みましたが注釈を入れたり書き出しのやり方がXDだと限界があり断念しました。

増え続けるPPTのファイル

ワイヤーフレームを更新するたびにPPTの最新のファイルはどこにあるのか、また該当するワイヤーフレームはどこにあるのかが分かりづらいといったことが発生していました。

手間のかかるデザインデータの共有

XDでデザインデータを共有するときにデザインデータを更新したら毎回手動で共有リンクも更新しなければならない手間がありました。クライアントに共有するときにも共有リンクが更新できておらず更新前のデザインデータを共有していたということも度々ありました。

デザインデータとコーディングのズレ

XDはテキストのLine-hightの設定がコーディング時と同じような余白の設定になっていませんでした。デザイン上で見た目を揃えるとコーディングする際の数値がずれて、デザイン上で数値を合わせると見た目がずれるといったことが起きていました。この問題を解消してくれるプラグインなどもありましたが、それなりに作業コストがかかってしまい効率的ではありませんでした。

これらの課題を解決するには新しいツールが必要と判断し、Figmaの導入に至りました。

導入したことのメリット

実際にFigmaを導入してみて以下のメリットがありました。

一つのツールでデータを作成し時間短縮に

ワイヤー作成からデザインまでをFigmaで行うことによりPPT↔XDといった複数のツール間を行き来することがなくなり、時間の短縮や情報の一覧性が向上しました。FigmaはXDに比べてデータの作り方に拡張性があるので注釈を入れたり色々なデザインデータの作り方に対応しています。

デザインデータの数値・余白がコーディング時と同じに

FigmaはLine-hightを設定するとコーディング時と同じ余白の設定になっているためデザインデータとコーディングしたページの差異がほとんどありません。XDで考慮できていなかったところもしっかり配慮されていてデザイナー・コーダーにとってはかなり助かります。

豊富なプラグインで拡張性が格段にUP

URLをコピペするだけでWEBサイトがそのままFigmaデータ化するプラグインなどXDの比にならない拡張性がFigmaにはあります。XDではできなかったことがFigmaでは色々できるようになりました。XDにもプラグインはありますがFigmaのプラグインの豊富さはXDと比べてもやはり差が大きいです。

まとめ

今回Figmaを導入して今までの課題がかなり解決しました。Figmaを使うことのメリットは上記にはないこともたくさんあります！Figmaは現在世界で一番使われているUI/UXデザインツールなので新機能が搭載されるなど進化し続けています！上記のような課題を持っている方はFigmaを導入すれば解決でき、制作がスムーズにいくと思いますのでぜひご検討してみてください！

スタッフ積極採用中

ジェイオンラインではスタッフを随時募集しております。
採用情報ページよりお気軽にお問い合わせください。