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

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

デザインでよく見かけるあしらいに「流体シェイプ（Fluid Shape）」があります。

液体が垂れているような曲線で出来ている円形のことで、配色によって様々な表現に使えます。

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

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

## Blobmaker

![Blobmaker](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_1-7.png)

[![](https://www.google.com/s2/favicons?domain=www.blobmaker.app)www.blobmaker.app![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/d343bb512bdafc0afc03f5c2ac6a5dc965ec0711ca0862e28cf93999d31a22e8.webp)Blobmaker - Make organic SVG shapes for your next designhttps://www.blobmaker.appMake organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.](https://www.blobmaker.app/)

Blobmakerは流体シェイプを簡単に生成できるサイトです。

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

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

![「Copy SVG to clipboard」](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-12.png)

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

## Figmaプラグイン：Blobs

![Figmaプラグイン「Blobs」](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_3-11.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F739208439270091369%2FBlobs?w=160)Figmahttps://www.figma.com/community/plugin/739208439270091369/BlobsFigma 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.](https://www.figma.com/community/plugin/739208439270091369/Blobs)

Figmaの場合はプラグインの「Blobs」を使うと簡単に生成できます。

インストールしたら［Plugins］→［Blobs］を選択して「Blobs」パネルを開きます。

![Blobs](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_4-8.png)

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

- Complexity：頂点の数

- Uniqueness：曲線の変化率