【Figma Plugins】テキストノードを生成する

はじめに

FigmaのPluginを開発する際、テキストノードを生成したいなと思ったことはありますか？
そんな時に使うのが、「createText()」です。

この記事では、「createText()」について、解説しようと思います。

テキストノードを生成する

テキストノードを生成するのに最低限必要なコードは、以下のコードです!

createText.ts

const createText = async() => {
    /* テキストノードを生成する */
    const text = figma.createText();
    /* フォントをロードする（非同期処理） */
    await figma.loadFontAsync(text.fontName as FontName);
    /* テキストを決める */
    text.characters = 'Hello, world!';
}

1. figma.createText()を使って、オブジェクトを生成します
2. figma.loadFontAsync()でフォントをロードします
   • figma.loadFontAsyncは、Promiseオブジェクトなので、非同期処理をしています
3. text.charactersでテキストを決めています

すると、

座標が x:0, y:0 の位置に family: "Inter", style: "Regular" で rgb(0, 0, 0)のテキストが生成されます。

生成するテキストをカスタマイズする

○ テキストの色を決める

テキストの色を決めるのは、.fills に値を渡すことで色を決めることができます。

/* rgbのテキスト */
text.fills = [{type: 'SOLID', color: {r: 0, g: 0, b: 0}}];
/* rgbaのテキスト co*/
text.fills = [figma.util.solidPaint('#000000AA')];

○ テキストのサイズを決める

テキストのサイズを決めるのは、.fontSize に値を渡すことで色を決めることができます。

/* 20pxのテキスト */
text.fontSize = 20;

○ リンクテキストを生成する

リンクテキストを生成するには、.hyperlink に値を渡すことでリンクにすることができます。

/* https://qiita.com/ へのリンクテキスト */
text.hyperlink = {type: "URL", value: 'https://qiita.com/'}

○ テキストのAlignを決める

テキストのAlignを決めるには、.textAlignHorizontalに値を渡すことで、決めることができます。

/* CENTER | JUSTIFIED | LEFT | RIGHT を受け取る */
text.textAlignHorizontal = 'CENTER'

○ テキストを追加する

テキストを追加するには、insertCharacters()に値を渡すことで、テキストを追加することができます。

/* テキストの最後に world を追加する */
text.insertCharacters(text.characters.length, 'world', 'AFTER')

まとめ

この記事では、「テキストノードの生成の仕方」について解説しました。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。