こんにちは。BASE株式会社（以下、BASE）の棟近です。ネットショップ作成サービス「BASE」のUI/UXデザインを担当しています。
前回までの連載では、Figmaの基礎知識や他ツールとの違い、Figmaをさらに便利にする機能や実務への活用例を紹介しました。今回からは少し方向を変え、チームメンバーがFigmaを使いこなすためのフォローなど、Figmaの運用に関するBASEの考えかたや取り組みをお伝えしていきます。
Figma歴ゼロでBASEに入社 同僚たちの会話が呪文に聞こえ困り果てた
私はUI/UXデザインに従事して5年ほど。前職まではAdobe Photoshop、Adobe XDでUIデザイン開発を行っており、BASEに入社して初めてFigmaを使用しました。今ではそれなりにFigmaを活用できるようになりましたが、入社当初はFigmaが使えず困り果てました。
Figmaはパッと見ただけでは、ほかの制作ツールのインターフェイスとそう大きくは変わらないように感じました。私は「なんとなく使えるだろう」とたかを括っていましたが、いざ実務で触ってみるとまったく使えない。とても困り果ててしまいました。
見よう見まねで何とか見た目の要件を満たす成果物を作ったものの、ほかのデザイナーたちから「Auto Layoutの設定がおかしいですよ」「ステータス差分はVariantsで作り分けしましょう」「ComponentのDetachは絶対やめてください」とのフィードバックが。これらもまるで呪文のように聞こえ、何が問題なのか理解することすらできませんでした。
Figmaの価値は「チームワーク」にこそあり
Figmaにはいくつもの独自概念や用語が存在します。そしてFigmaは単なるデザインツールではなく公式に「コラボレーションインターフェースデザインツール」と称されるほど、チームワークに特化したツールです。概念を正しく理解し、それをチームのメンバーと共通理解のもとで活用しているか否かで、生み出せる価値は大きく変わってくるのです。
先述のとおり、BASEに入社した当初の私は「Auto Layout」や「Detach」すら何のことかわかりませんでした。しかし、ある程度Figmaを使えるようになった人でも、Auto Layoutの「Fig / Hug / Fixed」の違いやComponent Propertiesの「Variant / Boolean」「Swap Instance / Nested Instance」「Variables / Styles」の使い分けについて説明することは難しいのではないでしょうか。
これらは明確な違いがあるものの、多くの人が「なんとなく」使用しているように思います。Figmaはチームでのコラボレーションに特化したツールだからこそ、それぞれが「なんとなく」で使用してしまうと、作業のプロセスやデザイン構造に少しずつズレが生じ、効率悪化や成果物の品質低下につながる恐れもあるのです。
