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

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

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

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

Split shape

Figma

Figma

https://www.figma.com/community/plugin/746565487016656360/Split-Shape

Figma 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...

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

基本的な使い方

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

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

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

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

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