弊社では近ごろFigmaでのデザイン制作・管理を推進しており、コーディングのための変換作業もこちらを使う機会が多くなりました。Figma、Webベースで作られているだけあって便利です。
なお私事ではありますが初めてまともに触ったデザインツールは言わずとしれたAi……いや人工知能の方ではないAdobe Illustrator（ややこしいので以降「イラレ」と呼びます）で、むかしむかし学生の頃はしばらくこればかり使っていたので「イラレでできる」ことをFigmaでどうやるのか？の切り替えにいまだ少し戸惑ってしまうイラレマンなのですが、ルールさえ分かってしまえばなーんだ簡単じゃんと思うことも多いです。
ただしFigmaはFigmaでクセのある挙動があるので、今回は画像書き出しに必須な「クリッピング」についてまとめておきたいと思います。
※大前提：座標やサイズに小数点が入ると出力画像がズレます
（ラスター）画像というのは 1px単位のピクセルに変換されるので、基本的に小数点を扱うことができません。 CSSで配置を小数点単位でズラすように見せることは理論上可能……ですが、少なくとも画像においては「座標」（X,Y）または「サイズ」に小数点が含まれた状態で書き出しを行ってしまうと、ズレた部分が丸められ想定より大きいサイズや端に余白が生まれる原因になります。
PNG／WebP等の透過対応形式であれば1pxぐらい余っていてもほぼ人の目には気にならないレベルですが、厳密に言えば本来書き出したい状態とズレていることには変わりありません。むしろJPGなどは余白が文字通り白く出てしまうので影響が分かりやすく見える反面、なぜズレてしまうかの原因はきちんと書き出し側で座標やサイズ設定を見返さないといけず、分かりづらいです。
（ただでさえドロップシャドウなどのアピアランスなどが入ると適切なサイズにならないので……）
そのためWeb用に書き出すことを想定した画像は ピクセルグリッドに沿って作成することが大前提です。 デザインツール上で何となく拡大・縮小とかするとすぐに小数点のやつが現れやがるので、その状態のデータからpixel perfectを実現することはそもそも不可能です。 デザインの時点でもうズレている自覚を持ちましょう。 というか、いずれにせよコーディング用の書き出しという手順を挟むことでピクセルに丸まってしまうので、コーダー側で勝手に丸めていることも多々あります。
なお、イラレであればWebデザイン作成時に「ピクセルにスナップ」をONにしてから作成するだけでほぼ解決できます。Figmaなら「基本設定」→「ピクセルグリッドにスナップ」した上で、仕上げとして「配置」→「ピクセル単位に四捨五入」を行っておくのがなんとなく良さそうですが、既に小数点を含むサイズにしてしまったものを一括変換するにはプラグイン導入が必要そうです。詳しくはまたの機会に……。
……なぜこのような小言を事前につぶやいたかというと、イラレにおける「アートボード」とFigmaの「フレーム」という考え方の違いに触れるためです。
クリッピング方法の違い
Illustrator（アートボード）
Illsutratorには「アートボード」という概念があります。これは絵画における「キャンバス」のようなもので、イラレのデザインは基本的にこのアートボードのサイズを決めてから作成します。
新規作成→プリセット→Web(大)を選択すると、1920 × 1080pxのアートボードが作成されます。
このアートボードはあくまでデザインを作成する上での基準となるもので、領域をはみ出した状態でもそれぞれのオブジェクトは配置できますが、イラレに存在するオブジェクトは必ずいずれかのアートボードに属します。
アートボードは1つの .ai ファイル中に複数作ることもできますが、どこにも属さない位置にオブジェクトを置いてしまうとどのアートボードに所属しているかが分かりづらくなるだけなので、セオリーとしては基本いずれかのアートボードに収まるように配置するのがベストです。
意図的にボードをはみ出したいようなデザインを設置した場合も、（Web用に保存）「アートボードサイズでクリップ」や（書き出し形式）「アートボードごとに作成」を適用した状態にすれば、自動的にアートボードからはみ出した部分を裁断（クリッピング）した状態で画像を書き出すことができます。
なお、このアートボードもイラレのデータ上においては「座標」「サイズ」を持つため座標が小数点ズレを起こしてしまうことがあるのですが、ことアートボードごとの書き出しに関しては「アートボード自体のサイズ」さえ整数であればきちんとズレることなく書き出しが可能です。
（むしろアートボードのサイズさえあっていればよい仕様が中身は小数点でめちゃくちゃにしてもよいという誤解を生み出している気もしますが）きちんと出力サイズが決まっているものについてはアートボードサイズを事前に整えておくだけで解決するのは明確にイラレの利点かと思います。
余談：クリッピングマスク・不透明マスク
（余談ではないレベルで頻繁に使う機能ではあるのですが）イラレのアートボード内部で任意のクリッピングを行いたい場合に使うのが「クリッピングマスク」機能です。使い方はカンタンで、「切り抜きたい形」のオブジェクトを「切り抜きたい要素」の上に置き、その2オブジェクトを選択した状態でクリッピングマスクを作成することで要素が形に沿ってクリッピングされます。
レイヤー上の扱いとしてはこの結果「クリップグループ」が作成されており、上側の「形」はクリッピング用のパスに変換され、下側の 「要素」はクリッピング以前の状態のままグループ内に属する 形となります。そのためカラーなども「切り抜かれた要素」側のものが適用されます。
イラレに慣れきってしまった身としてはこのマスク方法以外がなかなか考えられません。
具体的にはPhotoshopのマスクで毎回困惑するのですが、いちおうそちらに近い「不透明マスク」という機能もイラレにあるためそちらで「クリップ」をチェックすることで切り抜きも可能です。
ただしこちらの機能はどちらかというとグラデーションやぼかしの表現を取り入れながらマスクすることが主なので、クリッピング目的であればクリッピングマスクのみでよいでしょう。
Figma（フレーム）
Figmaではイラレにおける「アートボード」や「クリッピングマスク」（クリップグループ）に近い考えで扱うことができ、かつそれよりも広範な「フレーム」という概念が用いられます。
新規作成したてのFigmaデータはまっさらなので、まずは基準となるフレームを作成します。
いずれかのフレームのプリセットを選択すると、レイヤーにフレームが作成されます。
※イラレのWeb（大）と同じサイズ＝1920 × 1080pxに該当するものが「プレゼンテーション」→「スライド16:9」だったのでそちらを選択しています。
この初回作成時のフレームは以下の特徴を持ちます。（素人の知見なので参考程度に……）
- 位置（座標）はX: 0・Y: 0に設置
- レイアウト→サイズは指定した通りだが、「コンテンツを隠す」がチェック済み
他にもデフォルトで白塗り（ #FFFFFF ）・不透明度は100%……などいかにも「アートボード」といった状態のフレームです。ただしアートボードと違いフレームはFigmaのレイヤー上にきちんと存在するため、あくまでFigma上の１オブジェクトとしての扱いです。つまりフレームを移動すると座標が小数点にあっけなくズレる可能性があるのも同様です。複数のフレームを活用するプロジェクト（がほとんどな気もしますが）移動や整理の際には気に留めてもらえればと思います。
余談：セクション
Figmaにはもう一つ「セクション」と呼ばれるより上位の概念が存在します。
フレームと同じ🔽から選択でき、先ほど作成したフレームなどを包み込むように設置できます。
Figmaデザインのセクションは、デフォルトでキャンバス上のトップレベル要素になっています。セクションには他のセクションを含むすべてのレイヤータイプがありますが、フレームやグループ内に含めることはできません。
この特徴を見る限りセクションの方が「アートボード」っぽいですが、イラレのアートボードはレイヤー上に存在しませんし、別のアートボードを入れ子にすることもできないため別の概念です。
また、どちらかというこのセクションという機能はデザイン作業上の整理・外部へのプロトタイプ共有のための機能というフシが強く、ここから直接画像を書き出すには向いていません。
（なんか左上にセクション名が入った状態で書き出されるのでサイズの指定も無に帰します。謎）
↓セクションから書き出した画像。なんかいる……！
あくまでFigma上では「アートボード」の代替といえるものは「（最上位に存在する）フレーム」と考えるべきでしょう。
「コンテンツを隠す」チェックボックス
Figmaのフレームの話に戻りますが、先ほど初期に置いたフレームは以下の特徴を持ちます。
レイアウト→サイズは指定した通りだが、「コンテンツを隠す」がチェック済み
これは（疑似アートボードとしての）初期のフレームだけでなく、Figma上に配置されている全てのフレームがそれぞれにこのチェックボックスを持ちます。
先ほどのようにフレームから「はみ出した」位置のオブジェクトの例を用意して、「コンテンツを隠す」がONの状態のフレームの中に入れれば、Figma上でも自動的にクリッピングされます。
この「フレーム」＋「コンテンツを隠す」機能がイラレでいう「クリッピングマスク」に代替されると考えて感覚的にはあまり相違ないかと思います。※なお「マスク」機能については後述します
ただしこの「コンテンツを隠す」機能がFigmaのクセが強いところで、フレーム全体を画像として書き出す場合はほぼアートボードとして使えて違和感がないのですが、これにより隠されたフレーム内のオブジェクトはフレーム内に見えている範囲のみが書き出しの対象となります。
例として水色のボックスの上にザ・ダミーテキストを追加してみましょう。
水色のボックスと同じサイズのフレームで囲んでからテキスト単体を画像に書き出してみます。
※なお、ここでいう「見えている」とはあくまで前に別レイヤーのオブジェクトがあって隠れているとか、背景に色が溶け込んで見えないといった「人の目に見えない」は全く影響がありません。あくまでテキスト単体を画像で書き出すと以下の状態です。（さんざんみたことのあるぶんしょう）
ここで先ほどのFrameの「コンテンツを隠す」をONにした状態で再度テキスト単体を書き出すと以下のようになります。ちょうど水色のボックス＝フレームが切れたところでクリッピングが効いていることがわかります。
フレームはFigmaのオートレイアウト機能を利用するため必須の概念なので使わないFigmaデータはないといっても過言ではありません。そのためこの「コンテンツを隠す」設定が親のフレームでONになっていた場合、配下のオブジェクトやフレームはすべてクリッピングの影響を受けます。
実際のデザインデータでは大量のフレームが存在するためこの機能の使い方がまちまちなことも多く、たとえば端っこがはみ出した背景装飾画像を書き出したい時に画像が見切れてしまう場合などはこちらの設定をチェックしてみましょう。
余談：マスク（とフレームの違い）
Figmaでもう一つ範囲に応じたクリッピングを行う方法としてオブジェクトを「マスク」にする機能があります。「クリッピングマスク」の代替としては本来こちらのはずなのですがどちらかというとこれはAi（Adobe Illustrator）というよりPs（Photoshop）的な機能で、「フレーム」＋「コンテンツを隠す」とほぼ同じ効果を得られるのですがレイヤー上の順序が逆の考え方になります。
- 「フレーム」＋「コンテンツを隠す」：クリッピングするフレームが親（上）、される方が子（下）
- 「マスク」：クリッピングされる方が上、する範囲（マスク）が下（マスクの範囲を絞るためどちらも同じグループの子である必要がある）
どちらを使うべきか？というのはそれこそまちまちで、個人的にはフレーム自体がマスク用のグループであると考えた場合、結局（マスクの影響範囲を決めるために）グループで囲む必要があるマスクよりもスマートに感じるのでやはり「フレーム」＋「コンテンツを隠す」が好みに合います。
下からクリップする範囲を決めるよりも上（親）から覆い隠す、という考え方がクリッピングマスクと同じで、レイヤー上の関係もCSSでいう overflow: hidden; の考え方と一致しているので自然に感じますが、これは単純に慣れの問題かと思います。シンプルなクリッピング目的であればどちらを使っても構いません。
ただし、デザイン上の扱いや書き出しとなると微妙な差異があります。
なぜならマスクは「形」という外見（厳密には不透明度なども含む）のみを条件としますが、フレームは親グループとして使える概念であるかつ、それ自体もレイヤー上の「オブジェクト」として扱えるので、塗りや線・エフェクトといった情報をフレーム自体にも適用することができます。
つまりデザイン上（表側に）見えるもので隠すのが「フレーム」で、（裏側で）見えないもので隠すのが「マスク」という区分けになります。
またいわゆる画像を「角丸」にするデザインについて、マスクによるクリッピングなら「マスクグループ」または「マスク」レイヤーに角丸、フレームによるクリッピングなら「フレーム」自体に角丸情報を持たせることで同じデザインが得られるとともに、書き出しにおいても画像レイヤーを直接書き出すことで角丸のないクリッピングのみが効いた画像を得ることができるため、コーディング側にも使いやすいデザインデータになります。
https://www.irasutoya.com/2014/06/blog-post_7712.html
イラレのクリッピングマスクではマスク内のオブジェクトは個別にアセットに登録できないため一度マスクを解除する必要があり、これは明確にFigmaを使うメリット（イラレには出来ない芸当）と言えるでしょう。ただし角の位置がちょうどよいからといって画像自体に角丸情報を持たせるのは避けてください。後生ですから本当にやめてください。
画像自体が角丸になってしまうと当然ながら「角の丸くなった画像」として書き出されてしまうため、コーディング上では透過情報を扱える画像形式で書き出すことを強制されたり、意図しないスキマが生まれたりとかなり取り扱いのしづらい画像になってしまいます。
また、先ほどの通りマスク自体は見えないものなので、「マスク」レイヤーを選択した場合は画像の書き出し（エクスポート）が表示されませんのでそこは注意点になります。また、角丸を外側のマスクグループに付けても、内側のマスク自体に付けても同じ効果が得られてしまうため、作成いただいたデータを見る側からするとここの実装が揺れていることは混乱につながりかねません。
その点でも、角丸を含むクリッピング処理はフレームで外から覆い隠す方がレイヤー上もシンプルかつ、実際のCSS実装の考え方とも一致していてスムーズかなと個人的には思うところでした。