「上下トリミングされたテキストを検索する」Figmaプラグインを作成しました

Last updated at 2025-05-24Posted at 2025-05-04

いたってシンプルな、上下トリミングされたテキストを検索するFigmaプラグインをリリースしました。

「誤ってトリミング設定したままデザインしてしまった」等、ピンチの時にご使用ください。

記事の内容

この記事では、簡単な使い方と、作成した背景をご紹介します。

使い方は、ボタンをクリックして、表示されたテキストを修正するだけです。
修正後は、再度ボタンを押して、検索結果に現れないことを確認してください。

先に「メインコンポーネント」タグのついたテキストから修正して、ボタンを押すと、一気に検索結果を減らすことができます。

上下トリミング自体は、バナーやアイコン、ボタンなどの位置調整には便利で、CSSでもtext-box-trimで調整できるようになりました。
参考：CSSでテキストの上下余白が調整可能に！text-box-trimの使い方

しかし、流し込む文章やサイト全体に当ててしまうと、line-heightのみで実装できるところに調整が必要になります。
また、デザイナーがトリミング無しに修正する場合も、「使い方」画像のようにテキストの高さが変わってしまい、続く他要素の配置が崩れたりします。

私自身がやらかしたため作りました。
トリミングに気づかずだいぶデザインを作り進めてしまい、「時間がかかってもいいからデザイン全部直して」と言われた時は、「テキストをひとつひとつ開いて確認･･･！？」と絶望しました。

その時は、AIに頼んで、なんとか検索ツールを作り、なんとか効率よく解決できたのでした。

現在フロントエンド勉強中で、JavaScriptとTypeScriptを学んだのち、実践して身につけるため作成しました。

Figma公式ドキュメントや、プラグインを作成された方の記事を読み、AIに頼らず2くらいから作りました。（前回AIによる解決方法をうっすら知っていたため）
10にする前に、AIにレビューしてもらいました。

前回AIに作ってもらったものは世に出せる状態では無かったので、今回ちゃんとコードを理解し、エラー時の処理も入れて作成する機会が出来てよかったです。

審査も無事通りましたので、安心してご使用いただければと思います。

ご要望や改善案などありましたら、コメント欄やFigmaコミュニティからお気軽にお問い合わせください。

またGitHubリポジトリも公開しておりますので、初学者へのアドバイスもお待ちしております！よろしくお願いいたします。

作成の際、大変お世話になりました！