液体が垂れているような図形「流体シェイプ」の作り方

デザインでよく見かけるあしらいに「流体シェイプ（Fluid Shape）」があります。
液体が垂れているような曲線で出来ている円形のことで、配色によって様々な表現に使えます。

今回はそんな流体シェイプを作る方法についてまとめておきます。

ちなみに、流体シェイプは英語で「Fluid Shape（流動的な形）」や「Blob（インクのしみ）」と言います。

Blobmaker

www.blobmaker.app

Blobmaker - Make organic SVG shapes for your next design

https://www.blobmaker.app

Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.

Blobmakerは流体シェイプを簡単に生成できるサイトです。
使い方は画面下のツールバーで設定して、生成されたシェイプをSVG形式でダウンロードしたり、コードとしてコピーして使用します。

ちなみにIllustratorなどで使用するときは「Copy SVG to clipboard」でクリップボードにSVGをコピーしてペーストすれば貼り付けられます。

わざわざダウンロードする必要がなくなるので便利です。

Figmaプラグイン：Blobs

Figma

Figma

https://www.figma.com/community/plugin/739208439270091369/Blobs

Figma Community plugin — Create organic blob shapes with the click of a button. Every shape that is generated is unique to the last. You can control how unique a shape is along with how many points it has.Shapes are created using SVG, so you get those oh-so-sweet bézier curves.

Figmaの場合はプラグインの「Blobs」を使うと簡単に生成できます。
インストールしたら［Plugins］→［Blobs］を選択して「Blobs」パネルを開きます。

あとはバーを左右に動かして設定を調整し、「Insert」でアートボード上に追加します。

• Complexity：頂点の数
• Uniqueness：曲線の変化率