WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

Split shape

Split shape

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

基本的な使い方

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

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

Split shapeパネル

項目内容
Columns分割する列数
Rows分割する行数
Gutter分割したオブジェクト間の距離
Margin一番左端と右端のマージン幅

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

分割前

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

分割後

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね