中川 小雪
中川 小雪

necco Note

Figmaでテキストスタイルを早く登録する方法「Register Text Styles Super Duper Fast !!!」をFigma Communityに公開しました。

  • Design

デザイナーの中川です。

neccoではいつもFigmaでデザイン作成にとりかかる前にテキストスタイルを登録して利用しています。事前に登録しておくと、後でまとめてフォントやウェイトを変更できるし、統一したルールでつくることができるので便利です。

しかし毎回テキストスタイル登録するの、意外と時間や手間がかかって大変!

そこで、プラグインを利用して速く登録する方法を思いついたのでブログとコミュニティに公開しました。

Register Text Styles Super Duper Fast !!!



必要なプラグイン

今回テキストスタイルを速く登録する際に必要なプラグインは以下のこちらになります。

「Styler」

選択したテキストやカラーを、一括でスタイルに登録してくれます。

「Batch Styler」

テキストやカラーのスタイルを一覧でみることができます。一括で名前を変えたり設定を変えることができてとても便利です。

テキストスタイルを早く登録する方法

1.上記で紹介したプラグインをインストールする
2.Register Text Styles Super Duper Fast !!!」ファイルを複製
3.登録したい文字スタイルを複製して選択、「Styler」>Generate Styles でテキストスタイルをまとめて登録

4.「Batch Styler」を起動し、テキストスタイルが登録されていることを確認

上部の検索バーで名前で絞り込みができます。

5.フォントやウェイトを一括で変更

6.スタイル名を置き換えることも可能です

7.左下のUpdate stylesのボタンを押して適用完了!

「Batch Styler」を使いこなすと、フォントやウェイトなどの変更が簡単にできます!

neccoでは文字スタイルを日本語と英語のフォントで分けて登録することが多いです。
フォント名、ウェイト名、見出しの大きさなど好きな階層でつくってみてください。

最後に

Figma Community公開までのフローは下記のふゆなさんの記事を参考にしました!

Figma Communityにファイルを公開する方法

デザイナーのふゆなさんがFigmaでのコミュニケーションをスムーズにするため、昨年に「necco memo」を作成してFigma Communityに公開しました。こちらも良かったらみてみてください。

他にいい方法があれば、ぜひぜひ教えていただけると嬉しいです。

ご感想や改善案をいただける場合は、Twitterアカウント @necco_nakagawa にDMを送っていただくか、メンションをつけてツイートしてくださいませ!

neccoのFigma Communityページ


📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか?

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

  • フロントエンドエンジニア
  • アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

株式会社necco ダウンロード資料へのバナー画像

(2024年11月時点)

中川 小雪

中川 小雪

Koyuki Nakagawa

神奈川県生まれ。三兄弟の末っ子。中央大学で社会学を学び、2019年10月からneccoでインターンを始める。 2020年4月にアシスタントデザイナーとして入社。一人前のデザイナー目指して修行中。 好きなものはアイドル、可愛いもの、可愛い人、ご飯、布団、こたつ、小説、旅行。好きな食べ物は、小籠包、餃子、牛乳寒天、ちくわぶ。早起きが人生の課題。

SHARE

Other Note

necco Note

【実績紹介】neccoが制作したロゴマーク実績まとめ12選