Figmaでテキストをカーブに合わせて変形させるプラグイン「arc」

ちなみに、プラグインインストールページのアイキャッチ画像内や、パネルタイトルは「Arc」のようにAが大文字になっています。

しかし、ページタイトルやメニューバーの表記は「arc」と小文字になっています。
ページタイトルを優先した方がいいと思い、この記事では上記特定の箇所を除いて「arc」の小文字で統一します。

arc

Figma

Figma

https://www.figma.com/community/plugin/762070688792833472/arc

Figma Community plugin — One of the most desired text features has just come to Figma with our Arc plugin! Curve your text upward, downward or into a circle. Adjust the slider and preview the result.1) Select a text layer2) Run the Arc plugin3) Adjust the slider & click applyNOTE: Once the curve is applied, you can...

このプラグインは、以前紹介した「SkewDat」と同じ作者のプラグインです。

Webrandum

Figmaのテキストやオブジェクトを斜めに変形・旋回させるプラグイン「SkewDat」

https://webrandum.net/figma-plugin-skewdat

Figmaではオブジェクトを斜めに変形させることができません。Illustratorであれば［効果］→［ワープ］→［旋回...］で斜めに変形できるので、わざわざ一度Illustratorで編集してからFigmaに持ってくることになります。今回紹介する「SkewDat」を使うと、このIllustratorの旋回と同じような効果をFigmaだけで完結できます。SkewDatインストールするとメニューバーに［Plugins］→［SkewDat］が追加されます。基本的な使い方テキストやオブジェクトを選択した状態で、Figmaメニューバーの［Plugins］→［SkewDat］を選択するとパネルが表示...

基本的な使い方

まずはテキストレイヤーを選択して、メニューバーの［Plugins］→［arc］を選択します（選択するテキストは1つ）。

パネルが表示されるので、弧の設定をして「Apply」をクリックで適用するだけです。

真ん中には選択したテキストが入力されて、右のバーを動かすか、右下の「Bend Strength」で弧の強さを調節します。

奇数は入力できないので注意が必要なのと、「0%」を指定するとリセットされずに表示がおかしくなりました（文字がすべて1箇所で重なるような表示になる）。
リセットしたい場合は左下の「Reset」をクリックするようにしましょう。

生成されたテキストの構造

「Apply」をクリックすると、選択したテキストとは別に要素が生成されます（コピーして生成のような形になる）。

生成されたテキストは、1文字1文字分解されて、それぞれ位置設定や回転された状態でグループ化されています。

そのため、修正が入るとまた生成し直しになってしまいます。
修正に弱いデータになってしまうので、生成元のテキストを非表示にして一緒にグループ化しておくなどの工夫は必要です。