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

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

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

しかし、ページタイトルやメニューバーの表記は「arc」と小文字になっています。

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

## arc

![arc](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_1-2-1-scaled.jpg)

[![](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%2F762070688792833472%2Farc?w=160)Figmahttps://www.figma.com/community/plugin/762070688792833472/arcFigma 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...](https://www.figma.com/community/plugin/762070688792833472/arc)

このプラグインは、以前紹介した「[SkewDat](https://webrandum.net/figma-plugin-skewdat/)」と同じ作者のプラグインです。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/03/eyecatch-3.jpg)Figmaのテキストやオブジェクトを斜めに変形・旋回させるプラグイン「SkewDat」https://webrandum.net/figma-plugin-skewdatFigmaではオブジェクトを斜めに変形させることができません。Illustratorであれば［効果］→［ワープ］→［旋回...］で斜めに変形できるので、わざわざ一度Illustratorで編集してからFigmaに持ってくることになります。今回紹介する「SkewDat」を使うと、このIllustratorの旋回と同じような効果をFigmaだけで完結できます。SkewDatインストールするとメニューバーに［Plugins］→［SkewDat］が追加されます。基本的な使い方テキストやオブジェクトを選択した状態で、Figmaメニューバーの［Plugins］→［SkewDat］を選択するとパネルが表示...](https://webrandum.net/figma-plugin-skewdat)

## 基本的な使い方

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

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

![Arcパネル](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-3.png)

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

![arcの使用例](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_3-3.png)

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

リセットしたい場合は左下の「Reset」をクリックするようにしましょう。

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

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

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

![実際にarcで生成された要素](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_4-2.png)

そのため、修正が入るとまた生成し直しになってしまいます。

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