Back to Plugins
iOS 日本語システムフォント サイズ計算

iOS 日本語システムフォント サイズ計算

<p>iOSでシステムフォントを指定して日本語のテキストラベルを表示した場合、実際に指定したフォントサイズよりも小さく表示されます。</p><p>この課題に関する詳しい話は記事にも書いています。</p><p><a href="https://spinners.work/posts/kudakurage-figma-ios-ja-system-font-size-plugin/" rel="noreferrer noopener nofollow ugc" target="_blank">iOSアプリのシステムフォントにおける日本語のフォントサイズとのギャップを減らす工夫</a></p><p><br></p><p>Figmaではこのようなシステムフォントを再現することができないため、Figmaで作成したテキストラベルと同じ大きさの日本語テキストラベルを表示するためのサイズを計算し、レイヤー名に追加します。</p><p><br></p><p>エンジニアはテキストのレイヤー名に表示されるフォントサイズを実装時に指定することで、同じ文字サイズを表示することができます。</p><p><br></p><h2>使い方</h2><ul><li>適用したいテキストオブジェクトを選択状態にします(グループを選択したり、複数選択した場合は、選択したすべてのテキストオブジェクトに適用されます)</li><li>iOS ja system font sizeプラグインのInteger/Floatをメニューから実行します</li><li>Integerは小数点以下を四捨五入し、整数で表示します</li><li>Floatは小数点第二位以下を四捨五入し、小数も含めて表示します(より正確にしたい場合にお使いください)</li><li>レイヤー名の先頭に<code>*</code>が入っている場合は、Figmaで指定した通りのフォントサイズを追加します(アルファベットや数字のみで表示される箇所など、実際の指定通りのサイズのままにしておきたい箇所にお使いください)</li></ul><p><br></p><p>GitHub: <a href="https://github.com/kudakurage/figma-ios-ja-font-size" rel="noreferrer noopener nofollow ugc" target="_blank">https://github.com/kudakurage/figma-ios-ja-font-size</a></p>

iosjapanesefont

Plugin Preview

iOS 日本語システムフォント サイズ計算 preview

About this plugin

iOSでシステムフォントを指定して日本語のテキストラベルを表示した場合、実際に指定したフォントサイズよりも小さく表示されます。

この課題に関する詳しい話は記事にも書いています。

iOSアプリのシステムフォントにおける日本語のフォントサイズとのギャップを減らす工夫


Figmaではこのようなシステムフォントを再現することができないため、Figmaで作成したテキストラベルと同じ大きさの日本語テキストラベルを表示するためのサイズを計算し、レイヤー名に追加します。


エンジニアはテキストのレイヤー名に表示されるフォントサイズを実装時に指定することで、同じ文字サイズを表示することができます。


使い方

  • 適用したいテキストオブジェクトを選択状態にします(グループを選択したり、複数選択した場合は、選択したすべてのテキストオブジェクトに適用されます)
  • iOS ja system font sizeプラグインのInteger/Floatをメニューから実行します
  • Integerは小数点以下を四捨五入し、整数で表示します
  • Floatは小数点第二位以下を四捨五入し、小数も含めて表示します(より正確にしたい場合にお使いください)
  • レイヤー名の先頭に*が入っている場合は、Figmaで指定した通りのフォントサイズを追加します(アルファベットや数字のみで表示される箇所など、実際の指定通りのサイズのままにしておきたい箇所にお使いください)


GitHub: https://github.com/kudakurage/figma-ios-ja-font-size

Plugin Details

Version3
CreatedMay 25, 2022
Last UpdatedMay 26, 2022
CategorySoftware development
CreatorKaz Motoyama @kudakurage
Stats198 installs, 42 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:code.js
  • Editor Types:
    figma