mixinとスニペットを駆使してフォント情報を一気に入力しよう
Share
こんなことを説明しています!
- mixinを利用して、爆速でフォント情報を入力する方法
- 他のmixinの作り方と発想
- スニペット登録の仕方
動画の解説
コードの解説
登録している mixinはこちら!
XD.ver と Figma開発.verの両方を用意したので、カンプによって適宜使い分けていただけると良いかと思います!
// ================================= // フォント情報の一括入力 // ================================= //XD Version @mixin font($size, $height, $spacing, $weight) { font-size: calc($size / 16 * 1rem); line-height: calc($height / $size); letter-spacing: calc($spacing / 1000 * 1em); font-weight: $weight; } //Figma Version @mixin font($size, $weight, $height, $spacing) { font-size: calc($size / 16 * 1rem); font-weight: $weight; line-height: calc($height / $size); letter-spacing: calc($spacing / $size * 1em); }
ポイント (XDの場合)
以下の4つを①〜④の順に入力
@include font( ①, ②, ③, ④ );
※ ④は Bold -> 700 に変換する
下記の例だと、@include font(30, 41, 100, 700);
ポイント (Figmaの場合)
下記の例だと、@include font(80, 700, 80, 8);
スニペットに登録
下記を登録しておくと "font" と打つだけで自動出力されます!
動画でスニペット登録の方法に関しても解説しているので、登録の仕方がわからない方はぜひご覧になってください。
動画で使用しているサイトは下記になります。
"font": { "prefix": "font", "body": [ "@include font($1, $2, $3, $4);", ], "description": "" },