Figmaだけで実現するグラフィックデザインテクニック | SPIDERPLUS Tech Blog

UIUXチームのデザイナーのKimiです。

Adobe IllustratorやPhotoshopを使わずに、Figmaのみでプロフェッショナルなグラフィックワークを仕上げることができます。
特にUIデザインでは、開発者やクライアントと簡単に制作物を共有でき、効率の良い作業フローが求められる場面が多いかとおもいます。

私自身、長年Adobe製品に慣れ親しんできましたが、最近はFigmaにシフトして、あらゆるデザインを一つのツールで完結させることで大幅な作業効率の向上を実感しています。
今回は、IllustratorやPhotoshopを使わずに、Figmaのみで質の高いグラフィックワークを実現するための具体的なテクニックを紹介します。

1. ベクター描画ツールを駆使する

Figmaのベクター描画ツールは、Adobe Illustratorほどの多機能ではありませんが、実はシンプルで使いやすいのが特徴です。
直線や曲線の操作がとてもスムーズで、アイコンやロゴの制作も意外と直感的にできます。
ペンツールのアンカーポイント操作も分かりやすく、不要な機能がない分、スピード感を持って作業を進められます。
例えば複雑な図形を作成する時は、基本的な図形を組み合わせてパスを合成するだけで十分です。

2. グラデーションと影で質感をプラス

Figmaのグラデーション機能はシンプルですが、UIデザインでは十分な表現力をもっています。
例えば、ボタンに微妙なグラデーションを加えるだけで、さりげない立体感を出すことができます。
また、シャドウもUIデザインでは欠かせない要素です。
Figmaのシャドウ設定は細かくカスタマイズできるので、余計なフラットさを回避しつつ、柔らかく馴染む影を表現することが可能です。

3. コンポーネントとスタイルの徹底活用

コンポーネントとスタイルを活用すると、デザインの統一感を保ちやすくなります。
私の場合、頻繁に使用するアイコンやボタン、色・テキストスタイルはすべてコンポーネントとして保存しています。
これにより、デザインの修正が発生した際も一括で反映できるので、特にUIのリソースが多いプロジェクトでは欠かせません。
また、クライアントが後から変更を希望しても、効率よく対応できます。

4. プラグインを賢く取り入れる

Figmaのプラグインには作業を助けてくれるツールが豊富に揃っています。
例えば、パスファインダー機能の代わりに「Unite」や「Subtract」などのプラグインを使うことで、図形の合成やカスタマイズが容易になります。
また、Iconifyのようなアイコンプラグインも非常に重宝します。
Adobe製品ほど多機能ではないFigmaでも、こうしたプラグインの工夫次第で効率よく作業が進められるのです。

5. マスク機能で画像のトリミングを簡単に

Figmaのマスク機能を活用すれば、円形の画像やカスタムシェイプの画像トリミングも簡単です。
Photoshopを使わずにシンプルなマスクでの切り抜きができるため、デザイン内の画像処理もスピーディーに行えます。
例えば、プロフィール写真やサムネイル画像なども、Figma内でトリミング・配置をすべて完結できます。

6. スマートアニメーションで動きをつける

Figmaのプロトタイプ機能に含まれる「スマートアニメーション」は、UIの動きをシミュレートするのに便利です。
プロトタイピングだけでなく、クライアントへのプレゼンにも活用しています。
アニメーションを加えることで、UIのインタラクションが伝わりやすくなり、クライアントや開発チームとのコミュニケーションもスムーズになります。