コーディング担当がFigma推しになりそうな話

先日、社内でFigmaの勉強会が開催されるとのことで、最近デザインからはめっきり離れているのですが、コーディングでも使い方が分からないといろいろ困るので参加させていただきました。
Figmaのことはこれからもっと情報共有されるはずなので、気になる方はこちらからいろいろ見てみてくださいね。

で、デザイナーではない私がなぜFigma、Figma言っているのかというと…
コーディング担当としては、XDの重さが気にならないデザインデータにも、画像の書き出しにも、PhotoshopやIllustratorとの連携にも、かゆいところに手が届くブラグインにもほどよく満足していました。
ついこの間XDだ～と言っていたのに！デザイナーだけじゃなくでコーダーにも優しくしてくれるよね…？と思って調べていたら、もうFigma推しになりそうだったので、ひとつみなさんと共有したいと思います。

line-heightに悩まされない

IllustratorでもXDでも、行間の高さや余白をデザイン通りにしたはずなのに、なんだか合わない…という状況はよくありますよね。
これはline-heightが原因で、デザインの数値からコーディングに反映するには、見た目の余白からline-height分の高さを引いて…と計算する必要がありあました。
分かっているはずなのに、ちょっとしたときに忘れて、気付いて、計算して、修正する…という一連の流れは、どこにもぶつけようのないなんとも言えない時間です。。

Figmaはそんな時間を解消してくれます。
テキスト自体がline-heightの高さを持っており、余白の数値そのままをcssで書くだけでデザイン通りに再現できると言うのです。
Figma、優しいやん。

もっと使っていいところを見つけていきたいと思います。