# Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」

URL: https://webrandum.net/figma-plugin-split-shape/
公開日: 2022-08-26
更新日: 2022-08-25
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

たとえば横並びのレイアウトを作成するときに、なんとなく長方形を並べるのではなく、「コンテンツ幅が1000pxで、ボックス間のマージンが20pxで3カラムにするから、1つのボックス幅は320px」という風に計算して出すと、マージンが統一できます。

今回紹介する「Split shape」を使うと、Figma上で指定した数値にそってオブジェクトを均等に切り分けてくれます。

デザイン段階でCSS Gridを意識できますし、ワイヤーフレームをつくるときにも使えます。

## Split shape

![Split shape](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_1-14.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/2af1a6ef276edf5644bfb2120a7c1eddd8250449456bcb1e148119e98945e87e.webp)Figmahttps://www.figma.com/community/plugin/746565487016656360/Split-ShapeFigma Community plugin - Split your shapes, text layers, groups and frames into multiple instances. It's useful for when you need to generate columns and/or rows in a specific container without having to calculate the size manually. • Works with normal shapes, text layers, groups and frames• Add gutter in between thos...](https://www.figma.com/community/plugin/746565487016656360/Split-Shape)

Split shapeは選択したオブジェクトを、列・行数やオブジェクトの間隔を指定して、それに合わせて分割してくれる拡張機能です。

## 基本的な使い方

オブジェクト（長方形）を選択した状態で「Split shape」を起動してパネルを開きます。

パネルを開いたら、分割の設定を入力して「Split」を選択すれば設定した内容ですぐに分割されます。

![Split shapeパネル](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_2-12.png)

| 項目 | 内容 |
| --- | --- |

| Columns | 分割する列数 |
| --- | --- |

| Rows | 分割する行数 |
| --- | --- |

| Gutter | 分割したオブジェクト間の距離 |
| --- | --- |

| Margin | 一番左端と右端のマージン幅 |
| --- | --- |

実際に「Columns」は「3」で、「Rows」は「2」で試してみます。

![分割前](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_5-5.png)

それぞれ設定を入力して「Split」を選択すると、無事問題なく3列と2行で分割されました。

![分割後](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_6-2.png)

「Margin」は上下には影響がないので注意が必要ですが、横幅が変わると混乱してしまいますし、そもそもあまり利用することはなさそうです。