いたってシンプルな、上下トリミングされたテキストを検索するFigmaプラグインをリリースしました。
「誤ってトリミング設定したままデザインしてしまった」等、ピンチの時にご使用ください。
Vertical Trim Cap Height Scanner
記事の内容
この記事では、簡単な使い方と、作成した背景をご紹介します。
使い方
使い方は、ボタンをクリックして、表示されたテキストを修正するだけです。
修正後は、再度ボタンを押して、検索結果に現れないことを確認してください。
修正のコツ
先に「メインコンポーネント」タグのついたテキストから修正して、ボタンを押すと、一気に検索結果を減らすことができます。
そもそも、上下トリミングについて
コーディングする際、文章部分に上下トリミングが設定されていると、上下余白部分が数値通りにコーディングできません。
（Xでも度々話題に上がっています）
コーダーの調整の手間になり、またデザイナーが修正する際も、「使い方」画像のようにテキストの高さが変わってしまったり、他要素の配置が崩れたりするので、修正時は見た目を確認しつつ修正していく必要があります。
上下トリミング自体は、バナーやアイコン、ボタンなどの位置調整には便利で、CSSでもtext-box-trimで調整できるようですが、「流し込む文章」等サイト全体には当てない方がよいと思われます。
参考：CSSでテキストの上下余白が調整可能に！text-box-trimの使い方
作成した背景①
私自身がやらかしました
。
Webデザインでトリミングに気づかずだいぶ作り進めてしまい、「時間がかかってもいいから全部直して
（←優しい）」と言われた時は、「テキストをひとつひとつ開いて確認･･･！？」と絶望しました。
その時は、AIに頼んで、なんとか検索ツールを作り、なんとか効率よく解決できたのでした。
作成した背景②
現在フロントエンド勉強中で、JavaScriptとTypeScriptを学んだのち、実践して身につけるため作成しました。
Figma公式ドキュメントや、プラグインを作成された方の記事を読み、AIに頼らず2くらいから作りました。（前回AIによる解決方法をうっすら知っていたため）
10にする前に、AIにレビューしてもらいました。
前回AIに作ってもらったものは世に出せる状態では無かったので、今回ちゃんとコードを理解し、エラー時の処理も入れて作成する機会が出来てよかったです。
審査も無事通りましたので、安心してご使用いただければと思います。
最後に
ご要望や改善案などありましたら、コメント欄やFigmaコミュニティからお気軽にお問い合わせください。
またGitHubリポジトリも公開しておりますので、初学者へのアドバイスもお待ちしております！よろしくお願いいたします。
参考記事
作成の際、大変お世話になりました！