Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
たとえば横並びのレイアウトを作成するときに、なんとなく長方形を並べるのではなく、「コンテンツ幅が1000pxで、ボックス間のマージンが20pxで3カラムにするから、1つのボックス幅は320px」という風に計算して出すと、マージンが統一できます。
今回紹介する「Split shape」を使うと、Figma上で指定した数値にそってオブジェクトを均等に切り分けてくれます。
デザイン段階でCSS Gridを意識できますし、ワイヤーフレームをつくるときにも使えます。
Split shape
Split shapeは選択したオブジェクトを、列・行数やオブジェクトの間隔を指定して、それに合わせて分割してくれる拡張機能です。
基本的な使い方
オブジェクト（長方形）を選択した状態で「Split shape」を起動してパネルを開きます。
パネルを開いたら、分割の設定を入力して「Split」を選択すれば設定した内容ですぐに分割されます。
| 項目 | 内容 |
|---|---|
| Columns | 分割する列数 |
| Rows | 分割する行数 |
| Gutter | 分割したオブジェクト間の距離 |
| Margin | 一番左端と右端のマージン幅 |
実際に「Columns」は「3」で、「Rows」は「2」で試してみます。
それぞれ設定を入力して「Split」を選択すると、無事問題なく3列と2行で分割されました。
「Margin」は上下には影響がないので注意が必要ですが、横幅が変わると混乱してしまいますし、そもそもあまり利用することはなさそうです。
