Figmaのブール演算機能の使い方
今回は、Figmaのブール演算（Boolean Operations）機能について、基本的な使い方から実践的な活用方法まで解説します。ブール演算を使うと、複数のシェイプを組み合わせて複雑な図形を効率的に作成できるようになります。
Figmaのブール演算は、複数の図形を論理演算で組み合わせて新しい形状を作り出す機能です。結合（Union）、減算（Subtract）、交差（Intersect）、除外（Exclude）という4つの演算と、それらを完全に統合する統合（Flatten）を使いこなすことで、アイコンやイラストレーションの制作が格段にスムーズになります。
この記事の内容は次の順番で展開します。まず、ブール演算の基本概念と4つの演算タイプについて説明し、次に実際の使い方を具体的な手順で紹介します。そして、ブーリアングループを完全に統合する「Flatten」機能や、UI3での場所の変更点、実践的な活用例についても触れていきます。
この記事のターゲット
Figmaでアイコンやイラストレーションを制作する方
複数のシェイプを組み合わせた複雑な図形の作り方を知りたい方
ブール演算と統合の違いが知りたい方
1. ブール演算とは
ブール演算（Boolean Operations）は、複数の図形やオブジェクトを論理演算で組み合わせて、新しい形状を作り出す手法です。もともとは数学やコンピューターサイエンスの概念ですが、デザインツールでは図形合成の機能として広く使われています。
Figmaでは、この機能を使って複数のベクターシェイプを柔軟かつ効率的に組み合わせることができます。例えば、三角形と四角形を組み合わせて矢印の形を作ったり、大小異なるサイズの円同士でくり抜いてしてドーナツ型を作ったりすることが可能です。
Figmaのブール演算の特徴
Figmaのブール演算には、他のデザインツールと比べて大きな特徴があります。それは「非破壊的」であるという点です。
Illustratorのパスファインダーでは、演算を実行すると図形が完全に統合されて1つのパスになってしまいますが、Figmaでは「ブーリアングループ」という形で管理されます。これにより、演算を実行した後でも、内部の個別のシェイプを選択して位置やサイズを調整することができるのです。
2. ブール演算の基本的な使い方
ブール演算を適用する基本的な手順は次のとおりです。
操作したい複数のシェイプ（重なっている部分があること）を選択します。
画面上部中央のツールバーにある、2つの四角が重なった「ブール演算」アイコンをクリックします。
表示されたメニューから、目的の演算方法を選択すると、シェイプが結合されます。
これでブーリアングループが作成され、選択した演算が適用されます。
UI3での場所について
2024年のConfig以降、FigmaはUI3という新しいインターフェースに刷新されました。それに伴い、ブール演算の場所も変更されています。
現在は、対象となるシェイプを選択した状態で、右側のプロパティパネルのヘッダー部分を確認する必要があります。ここに小さなアイコンが並んでおり、その中にブール演算のボタンがあります。もしヘッダーに表示されていない場合は、「More」メニュー（・・・）の中から「Boolean operations」を選択することもできます。
正直なところ、この非破壊的な編集ができる点は、デザインの試行錯誤を繰り返す際に非常に便利だと思います。一度作った図形を後から微調整したくなることは頻繁にありますからね。
3. 4つのブール演算タイプ
Figmaには4つのブール演算が用意されており、それぞれ異なる結果を生み出します。
結合（Union）
Unionは、選択した複数の図形を1つの形状に結合する演算です。重なった部分は統合され、外側の輪郭線だけが残ります。
例えば、2つの円を重ねてUnionを適用すると、2つの円が融合したような形になります。ストロークやエフェクトは、統合された図形の外側の輪郭線に対してのみ適用されるでしょう。
減算（Subtract）
Subtractは、上のレイヤーの図形を使って、下のレイヤーの図形から形を切り抜く演算です。クッキーの型抜きをイメージするとわかりやすいのではないでしょうか。
レイヤー階層の一番下にある図形が基準となり、その上に重なっている図形の部分が切り抜かれます。結果として内側と外側の両方にエッジができる場合、ストロークやエフェクトは両方のエッジに適用されます。
交差（Intersect）
Intersectは、複数の図形が重なっている部分だけを残す演算です。つまり、すべての図形に共通する領域だけが新しい図形として作成されます。
重なっていない図形にIntersectを適用すると、キャンバス上から図形が消えたように見えますが、実際には見えない状態で存在しています。図形を移動させて重なりを作ると、再び表示されるでしょう。
除外（Exclude）
Excludeは、Intersectの逆の動作をする演算です。複数の図形が重なっている部分を削除し、重なっていない部分だけを残します。
結果として内側と外側の両方にエッジができる場合、ストロークやエフェクトは両方のエッジに適用されます。
4. ブーリアングループの編集
個別のシェイプを編集する
ブーリアングループを作成した後も、内部の個別のシェイプを選択して編集することができます。
編集可能な項目は次のとおりです。
サイズ（幅・高さ）
位置
回転
角丸の半径
一方で、個別のシェイプの塗り、ストローク、エフェクト、不透明度は変更できません。これらのプロパティは、ブーリアングループ全体に対して適用されます。
ブーリアングループを解除する
ブーリアングループを解除して、元の個別のシェイプに戻すこともできます。
ブーリアングループを右クリックして「グループ解除（Ungroup）」を選択する
または、ショートカットキー「⌘ + Shift + G」（Windowsでは「Ctrl + Shift + G」）を使用する
これで、再び個別のシェイプとして編集できるようになります。
5. 統合（Flatten）機能について
統合（Flatten）とは
統合機能は、ブール演算とは処理が根本的に異なる機能です。ブール演算がブーリアングループとして非破壊的に図形を管理するのに対し、Flattenは完全に1つのベクターパスに変換する破壊的な操作になります。
レイヤーリストを確認すると、ブール演算を適用した図形は内部に個別のシェイプが残っているのに対し、Flattenを実行した図形は「Vector」という単一のレイヤーとして表示されます。
統合の使い方
統合を実行する方法は次のとおりです。
ブーリアングループまたは複数のシェイプを選択する
右クリックして「Flatten」（または「統合」）を選択する
または、ショートカットキー「⌘ + E」（Windowsでは「Ctrl + E」）を使用する
ブール演算と統合の違い
この2つの機能の最も重要な違いは、編集の可逆性です。
ブール演算（非破壊的）
内部のシェイプが個別に残っている
後から位置やサイズを調整できる
ブーリアングループの解除が可能
試行錯誤しながらデザインを進めるのに適している
統合（破壊的）
完全に1つのベクターパスに変換される
元の個別のシェイプには戻せない
ベクターの頂点レベルでの編集が可能になる
スケーリング時の安定性が向上する
したがって、一度統合してしまうと、バージョン履歴から復元するか、Undoするしか戻す方法がありません。
統合を使う場面
統合は、次のような場面で使用することが効果的です。
アイコン作成のフィニッシュワーク
アイコンセットを作成する際、最終的な形状が確定したら統合することで、レイヤー構造がシンプルになり管理しやすくなります。大手企業のアイコンライブラリでも、統合された状態で公開されていることが多いようです。
SVG出力の最適化
SVGとして出力する際、統合しておくことでファイルサイズが小さくなり、コードの可読性も向上する傾向があります。
スケーリングの安定性向上
ブーリアングループは、場合によってはスケーリング時に意図しない表示になることがあります。Flattenすることで、より安定したスケーリングが可能になるでしょう。
複雑な図形の完成 試行錯誤が終わり、もう変更しないと確信できる図形については、Flattenしてレイヤー構造を整理することも一つの選択肢です。
統合を使う際の注意点
統合は取り消せない操作であるため、慎重に使用する必要があります。
「まだ調整するかもしれない」という図形に対しては、できるだけ統合を避けるようにした方が良いです。後から「やっぱりあの部分だけ調整したい」となったときに、ゼロから作り直しになってしまうのは避けたいです。
基本的な方針としては、次のように考えるとよいでしょう。
制作中はブール演算のままにしておく
最終的な調整が完了してから必要に応じて統合する
統合する前に、念のため別のコピーを残しておく
6. 実践的な活用例
検索アイコンの作成
ブール演算の実践例として、よく使われる検索アイコンを作ってみましょう。
大きな円を作成する
小さな円を作成し、大きな円の右下に重ねる
小さな長方形を作成し、回転させて検索アイコンの持ち手部分を表現する
大きな円と小さな円を選択し、Subtract演算を適用する（虫眼鏡のレンズ部分が完成）
結果と長方形を選択し、Union演算を適用する
形状が確定したら、必要に応じてFlattenを実行する
これで、シンプルな検索アイコンが完成します。
複雑な図形への応用
ブール演算は、より複雑な図形の作成にも活用できます。
複数の円を組み合わせてロゴマークを作成する
図形を重ねてドーナツ型やリング状のデザインを作る
Excludeを使って特殊な形状のフレームを作成する
また、ブーリアングループ全体に角丸を適用することで、有機的で柔らかな形状を表現することもできるでしょう。これは、個別のシェイプに角丸を適用するのとは異なる、滑らかな結果を生み出します。
アイコンセットの管理
アイコンセットを作成する際の効率的なワークフローは次のとおりです。
制作段階ではブール演算のままにしておき、調整を繰り返す
全体の統一感が取れたら、コンポーネント化する
最終的な確認が終わってから、必要なものだけFlattenする
または、プラグインを使って一括でFlattenとOutlineを実行する
正直なところ、大規模なアイコンセットでは、すべてをFlattenするかどうかは判断が分かれるところだと思います。編集性を保ちたい場合はブール演算のまま、パフォーマンスや出力の最適化を優先する場合はFlattenする、という使い分けが効果的でしょう。
7. ブール演算と統合を使う際の注意点
対象となるレイヤーの制限
ブール演算は、すべてのレイヤーに適用できるわけではありません。適用可能なのは次のレイヤータイプです。
シェイプレイヤー
ベクターパス
テキストレイヤー
一方で、フレームやセクションなどのコンテナ要素には適用できません。
レイヤーの順序
減算や交差では、レイヤーの階層順序が結果に影響します。特にSubtractでは、どのレイヤーが上にあるかによって、切り抜かれる部分が変わってきます。
意図した結果が得られない場合は、レイヤーの順序を確認してみるとよいでしょう。
インスタンス内での制限
コンポーネントのインスタンス内にあるオブジェクトに対しては、ブール演算もFlattenも適用できません。これらの操作を行いたい場合は、まずインスタンスからオブジェクトを取り出す必要があります。
スマートアニメートとの互換性
プロトタイピング機能のスマートアニメートを使用する場合は注意が必要です。ブーリアングループは複数のパスを組み合わせた「疑似的な」形状であるため、頂点情報を正しく読み取れず、滑らかな変形アニメーションが適用されない場合があります。
パス自体を変形させたいアニメーションを作成する場合は、ブール演算をかける前の単純なパスとして扱うか、統合を使用することを検討しましょう。
複雑な図形での表示問題
場合によっては、ブーリアングループが意図しない表示になることがあります。特に複雑な図形や回転した円などを組み合わせた場合、予期しない結果になることがあるようです。
そのような場合は、統合することで問題が解決することがありますが、前述のとおり破壊的な操作であるため、実行前にコピーを取っておくことをお勧めします。
