【Figma】たった2分! プラグインで作る立体アイコンの作り方 | アイソメトリックデザイン

Figmaで立体的なアイコンやアイソメトリックなデザインを作りたいと思ったことはありませんか？
この記事では、Figmaのプラグイン「Skew」と「oblique」を活用して、立体的なアイコンや立体文字をわずか2分で作る方法をご紹介します。

✅ このチュートリアルでできること

• Figmaで立体アイコンを作成する方法がわかる
• Skewとobliqueという2つの無料プラグインの使い方を習得できる
• アイソメトリック風の立体文字や図形に応用可能

使うのはこの2つのプラグイン

Figmaには標準で立体表現をする機能はありませんが、以下のプラグインを使えば簡単にできます。

Skew

オブジェクトに斜めの角度をつけられるプラグイン。

---

oblique

シンプルに斜め方向へ立体的な奥行きを作れるプラグイン。

まずはFigmaのプラグイン検索から「Skew」をインストールしてみましょう。

手順①：元となるアイコンを用意

Figmaで通常通り、ベースとなる平面的なアイコン（例：Figmaロゴや図形など）を配置します。

アイコンを選択した状態でプラグインを起動します!
⌘ (command) + Pでプラグインを検索しましょう!

手順②：「Skew」で斜めパースを追加

1. 対象のオブジェクトを選択
2. プラグイン「Skew」を起動
3. 適用する角度を設定（例：30°など）
4. オブジェクトが斜めに変形されます！

※この時点で軽くアイソメトリック風に見えてきます。

手順③：「oblique」で奥行きを追加

続いて、変形したオブジェクトに「oblique」で奥行き（立体感）を付けます。

1. 変形後のオブジェクトを選択
2. プラグイン「oblique」を起動
3. 奥行きの深さや角度を調整
4. 自動的に立体構造が生成されます！

手順④：パスを結合して色付け

最後にベクターパスを調整し、必要に応じて以下を行います：

• 重なりを整理
• パスを結合（Command or Ctrl + E）
• グラデーションや影を追加
• 色分けして視認性を高める

これで立体的なアイコンや立体文字の完成です！

🎨 応用：UIパーツやロゴにも活用できる

この方法は、FigmaでのUIデザイン、ロゴ制作、SNS用グラフィックにも応用可能。
特に立体感を出したいときや、Web3系のデザインとの相性も抜群です。