はじめに

宮本です。以前Facebookにも挙げていたのですが先日Figmaの参考書を購入しました。
私はコーダーなので業務では滅多にデザインをすることはないのですが細かなレイアウトとかの配置や配色は自分で決めたりするのでデザインについてもある程度は知識として自分の中に入れるようにしたいという背景とここ最近のAdobe製品の値上げで気軽にphotoshopなどを使えなくなるかもしれないことです。
個人でも契約はしているのですが月額9000円近くするのはけっこう痛いです…
※使わない機能やソフトも多いので流石に使用するソフトを絞ろうかなと思います。

そういうことで他のデザイン系のソフトをマスターまでいかなくとも触るだけ触ろうと思いまず手につけたのがFigmaでした。

まずは本を読みながらFigmaをさわってみた

Figmaはブラウザ上で動作するUIデザインツールで、複数人で同時編集したりコメントで意見を交わすことも可能な“コラボレーションデザインツール”です。ブラウザで使えるのでソフトをインストールする必要がなく、WindowsもMacも問わずログインするだけで使い始められる手軽さに驚きました。（ソフト版もありますがWeb版とそこまで大差はない印象でした。）

例えば、Photoshopはソフトが重く長大なページでは動作が遅くなりがちでしたが、Figmaは通常使いで動作が遅く感じることはほとんどありません。ファイルを分割したり端末によってフリーズする必要も処理時間の無駄もなく、ストレスフリーな作業ができたのは印象的でした。

また、Figmaでは1つのファイル内にページを統合して多数のデザインカンプを管理できます。例えばサイト全体のデザインを一緒に表示して、レイアウトを対応するPC版やスマホ版をそれぞれ同一ファイル上で編集できたりするので、複数ファイルを行き来する手間もありません。それとすべてクラウド上に自動保存されるので、データ消失やファイル保存し忘れを防げるのは大変ありがたいです。

これらの基本機能に加えて、複数人で同時にデザインを編集できる便利さもFigmaの大きな魅力です。
デザイナーとコーダーが同じファイルを開いて意見を語り合ったり、リアルタイムでデザインが更新される様子を一緒に確認出来るのは、不思議な体験でもありました。
また、URLを直接共有するだけでいつでも最新のデザインを共有できるため、ファイルを添付して送る手間なども省けます。

コンポーネントとオートレイアウト

Photoshopでは、ボタンやなど同じデザイン要素、共通化したパーツをを複数のページにわたって表示するとき、次々にコピー・ペーストしたり、修正が出ても一緒に修正して回る等、手間がかかっていました。Figmaでは「コンポーネント」機能により、一度作った要素を再利用し、複数ページにわたって一括管理できるため、同じデザイン要素を何度も作成する必要がなく、サイト全体で素早く統一感のあるUIを構築できます。

例えば共通のボタンをコンポーネント化し、複製します。複製した子要素（インスタンス）ボタンのテキストを変更した後にボタンの色とpaddingを変更したくなった際、親であるコンポーネントを編集することで一括してレイアウトを変えることができます。

コーダー的に「オートレイアウト」が分かりやすい

個人的にFigmaの「オートレイアウト」機能も凄く便利でした。

例えば、ボタン内のテキストが変わったとき、Photoshopでは背景の固定シェイプを同じ数値に手動で調整し直す作業が必要でしたが、Figmaではオートレイアウトを設定するだけで文字に一致してシェイプのサイズが自動変更されます。まさにコーディングでレイアウトが自動調整される感覚で、凄く画期的です。文字量に応じて余白を保ってくれるので不意にズレも起こりにくく、また文字変更が発生しても修正による手間を大幅に削減できました。オートレイアウトの概念はCSSのFlexboxにも似ており、デザインの段階でHTML/CSSを意識したようなレイアウト調整が可能です。個人的には感覚的に使いやすいので一番使いやすい機能かなと思いました。

開発モードでWebコーディングが改善

Photoshopでは、デザインカンプからコーディング用の情報を調べる際に、レイヤー間のピクセル値やカラーコードをツールで測ったり、目視で確認する必要がありました。Figmaにはデベロッパー向けの「開発モード」というものがあります。開発モードに切り替えるとレイヤー間のマージン値やパディング値などが視覚化され、マウス操作なしでCSSコードが表示されるので、Webコーディング時の参照に非常に役立ちました。例えばデザイン上でPaddingが設定されていれば、Figmaのインスペクト機能で「padding: 20px 10px 40px;」とコードが自動出力され、そのままコピーできます。いちいち距離を測って値を読み取る必要がないため、コーディング作業のスピードの向上につながりそうだなと感じました。

さらに開発モードではVS Code（Visual studio Code）の拡張機能で連携することができるのでこれもうまく使いこなせば効率化も図れそうだなと感じました。

おわりに

Figmaを初めて使ってみて、多くの利点に気付かされましたが、Photoshopとはまったく異なる性質のツールであることも改めて実感しました。特にWeb開発のワークフローを意識した設計になっているのでコーダーの私から見ると感覚的に使える印象でした。

Photoshopにしかできないことももちろんありますがコーディングをする上で今後いろんな形でデザインファイルをもらうことがあるかもしれないのでFigmaを活用したWeb制作も自分の武器になるように勉強も頑張りたいなと思いました。