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

デザインでよく見かけるあしらいに「流体シェイプ(Fluid Shape)」があります。
液体が垂れているような曲線で出来ている円形のことで、配色によって様々な表現に使えます。
今回はそんな流体シェイプを作る方法についてまとめておきます。
ちなみに、流体シェイプは英語で「Fluid Shape(流動的な形)」や「Blob(インクのしみ)」と言います。
Blobmaker

Blobmakerは流体シェイプを簡単に生成できるサイトです。
使い方は画面下のツールバーで設定して、生成されたシェイプをSVG形式でダウンロードしたり、コードとしてコピーして使用します。
ちなみにIllustratorなどで使用するときは「Copy SVG to clipboard」でクリップボードにSVGをコピーしてペーストすれば貼り付けられます。

わざわざダウンロードする必要がなくなるので便利です。
Figmaプラグイン:Blobs

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

あとはバーを左右に動かして設定を調整し、「Insert」でアートボード上に追加します。
- Complexity:頂点の数
- Uniqueness:曲線の変化率




Figmaのバージョン管理機能を使って、デザインの変更点を管理する
Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法
Figmaでテキストをカーブに合わせて変形させるプラグイン「arc」
コーダー目線で理解するIllustratorのアピアランス機能
Figmaの画像書き出し方法
Figmaでチーム共有用のメモや注釈素材が使える「Annotation Kit 2.0」
Figmaでカラーやテキストのスタイルをまとめて登録するプラグイン「Styler」
Figmaのスタイル入門|何度も使い回す色や文字設定を管理する方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理