Figma

Figmaで文字やシェイプを曲線にそって配置するプラグイン

最終更新日:2024.08.30編集部
Figmaで文字やシェイプを曲線にそって配置するプラグイン

Figmaでデザイン作成しているときに、文字を曲線にそって配置したりシェイプを曲線に配置したいことはありませんか?

そんなときは、プラグイン『To Path』が便利です。

使い方は、

  1. 『To Path』のプラグインを選択

  2. 沿わせたいテキストと曲線を選択し「Link」をクリック

ちなみに、波線や曲線を作るプラグインは以下の記事で解説しています。

『To Path』では、複数のオプションによってデザインの調整が可能です。

  • Vertical Align:テキストと曲線の距離(0~1)

  • Horizontal Align:文字同士の距離(0~1)

  • Offset(px):テキストの配置(始点からの距離)

テキストの配置は以下の2つの方法での調整が可能です。

  • 左揃え、中央揃え、右揃え

  • 始点からの離れ具合(px)

  • characters follow curve rotation:テキストを曲線に合わせて傾けるか

  • reverse direction of text:テキストを配置する方向

この機能を使ってデザインの幅を広げましょう!

この記事の関連シリーズ
Figma

関連記事

Related Articles

  • Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
    Figma2025.05.08
    Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
  • Figmaのオートレイアウトの基本的な使い方
    Figma2024.10.16
    Figmaのオートレイアウトの基本的な使い方
  • Figmaで画面遷移図やフローチャートをつくる方法
    Figma2024.10.10
    Figmaで画面遷移図やフローチャートをつくる方法
  • Figmaのコンポーネント化を解除してフレームに戻す方法
    Figma2024.10.08
    Figmaのコンポーネント化を解除してフレームに戻す方法

最新の記事

Latest Articles

  • DMMに聞く、AI時代のデザインシステムの設計と実装
    インタビュー2026.04.28
    DMMに聞く、AI時代のデザインシステムの設計と実装
  • AIが「それっぽいデザイン」を出せる時代に、私が向き合ったふたつのこと
    エッセイ2026.03.31
    AIが「それっぽいデザイン」を出せる時代に、私が向き合ったふたつのこと
  • 無料で商用利用可能!Adobe Fireflyの使い方と画像生成のコツを紹介
    Adobe2026.03.26
    無料で商用利用可能!Adobe Fireflyの使い方と画像生成のコツを紹介
  • 仕事のやり方って200色あんねん。プレイスタイル「マネジメント」を発見するとき
    エッセイ2025.12.17
    仕事のやり方って200色あんねん。プレイスタイル「マネジメント」を発見するとき

デジタルデザインの最新情報をお届け!

unprintedのメールマガジンにご登録いただくと、デジタルデザインの最新情報をメールで受け取ることができます。今までに配信したバックナンバーも公開中!

※登録ボタンを押すと利用規約に同意されたものとします。