figma-to-path-plugin
公開日: 2021.08.06  | 更新日: 2021.08.06

Figmaで曲線パスに沿って文字やシェイプをはわせる方法

今回はFigmaで曲線パスに沿って文字やシェイプ(パーティクル)を配置させる方法を紹介します。Figmaの標準の機能では手作業で一つずつ配置する必要があるので、「To Path」というプラグインを使用します。

この記事のターゲット

  • Figma初心者〜中級者

  • Figmaで波線に沿って文字を配置したい方

  • Figmaで文字やシェイプを角度をつけて繰り返し配置したい方


1. プラグイン「To Path」をインストールする

install-to-path

「To Path」プラグインのページに移動して、右上にある「Install」をクリックすると、自動でインストールされます。インストールは無料です。

アプリやブラウザで開いていても、上のインストールボタンを押して「Installed」になればその時点から利用できるようになります。ファイルのダウンロードや設定ウィザードもありません。

2. 曲線パスと這わせたい文字・シェイプを用意する

「To Path」が適用できるのは曲線パス、または楕円パスのみです。

直線パスには対応していないので、三角形や四角形のシェイプを選択しても適用することはできません。

add-text-and-path

フリーハンドの曲線はPenやPencilツールを使うと簡単です。

figma-pencil-tool

正弦波のような規則的な波線を使用したい場合は、以下の記事を参考にしてください。

Figmaで簡単に波線・ジグザグのパスを作る方法

今回は、イラレでよく使われているような波線のパスを、Figmaで簡単に再現する方法の紹介です。おまけで、シンプルなジグザグのパスを作る方法も最後に載せています。 ... 続きを読む

figma-wave-and-curve

3. パスに文字・シェイプをはわせる

用意した曲線に文字をはわせる手順は次の通りです。

  1. 右クリックメニューのPluginから「To Path」を選択する

  2. 曲線とはわせたい文字(Text)を選択する

  3. プラグインメニューの右下の「Link」をクリックする

以下の例では、パスの枠線(Stroke)を消してい流ので、パスに沿うようにテキストが並べられました。

create-to-path

このプラグインで何が起こっているかをざっくり説明すると、Textが1文字ずつ分解されて、設定値に従ってパスの傾きごとに1文字ずつ切り出して配置し、一つのグループとしてまとめる、という処理が実行されています。

「To Path」で設定できるオプションは次の通りです。

  • Vertical Align:パスと文字(パーティクル)の離れ具合

  • Horizontal Align:文字(パーティクル)同士の離れ具合

figma-to-path-align
  • Offset(px):パスの始点に対してどのように配置するか

    • 左揃え、中央揃え、右揃えから選択する

    • 数値は始点からの離れ具合(px)を指定できる

figma-to-path-offset
figma-to-path-offset-values

Rotation:

  • characters follow curve rotation:パスの傾きに合わせて文字を傾けるかどうか

  • reverse direction of text:文字(パーティクル)をはわせる方向を反転するかどうか

figma-to-path-rotation

注意として、プラグインメニューが開いている(プラグインが起動している)時に、不意に別のシェイプを選択したり、すでに処理されたグループなどをクリックしてしまうと、配置関係が崩れてしまうことがあります。

プラグインの処理の仕方で、オブジェクトの名前に[Linked]や[Copy]というSuffixが付与されていることから、この名前によってオブジェクトを区別して制御していることが原因と考えられます。

必要のない時以外は、プラグインを閉じておくことをおすすめします。

4. To Pathの応用

円形パスに配置する

円に対して綺麗に文字を配置するには、大きさを多少調節する必要があります。

figma-to-path-circle

シェイプ(矩形・多角形・星形など)を配置する

曲線パスには文字以外にもシェイプを配置することもできます。

シェイプを配置する場合、次のオプションが追加されます。

  • Count:繰り返し配置するシェイプの数

  • Spacing(px):配置するシェイプ同士の距離

figma-to-path-shape
13

いかがだったでしょうか。

パスに沿って並べるのはAdobe Illustratorなどでよく見かけますが、Figmaでも実現する方法があるよという紹介でした。

うまく活用すれば、サムネイルのようなグラフィックを効率的に作れるようになるので、おすすめです。ぜひ試してみてください。

この記事を読んだ方におすすめの記事

Figmaの「Noise」でざらざらした質感を表現する方法

今回は、ざらざらした紙のようなマットな質感を、Figmaの「Noise」というノイズ画像を生成してくれるプラグインを使って表現してみようと思います。フリー素材を探してもなかなかいいテクスチャが見つからない時などに、試してみてください。 ... 続きを読む

figma-noise-tool-plugin

Figmaで簡単になめらかな角丸の「スーパー楕円」を作る方法

今回は、デザイナー界隈で話題になったトークルームアプリ「Clubhouse」のプロフィールのアバターに使用されている、なめらかな角丸のシェイプ、いわゆる「スーパー楕円」をFigmaで簡易的に再現する方法をまとめました。 ... 続きを読む

figma-super-ellipse

Figmaでテキストを縦書きに対応する方法

今回はFigmaでテキストを縦書きに対応する方法を紹介します。和風のWebサイトや広告バナー・フライヤーなどをデザインする際に、縦書きのテキストを配置したりできるようになるので、制作の幅も広がると思います。 ... 続きを読む

figma-text-vertical-alternates

Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう

今回は、商品紹介やイベントの告知など、顧客にリーチするためのコンテンツマーケティングで利用するベーシックなバナー画像(ヘッダー画像)を、Figmaを使って作ってみようという試みになります。 ... 続きを読む

figma-basic-banner-design

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告