エンジニアのためのFigma超入門

エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。 具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。 デザイナーの意図を汲み取ることができる デザイナーと共通言語で話せる 実装の観点からデザイナーにFigmaの修正依頼ができる ↑の打ち返しを待たずに自分で軽微な修正ができる というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。 スタイル Figmaで

[stibbar]

https://zenn.dev/poteboy/articles/4739b882e22961

[securecat]

Variantsやデザイントークンを駆使するとそのまま仕様書にも…と思いきやFigmaの階層とHTMLのDOM構造が必ずしも一致しないという留意点や、プロパティ名をコード側の規約に合ってないことによる混乱などの懸念も一応。

[ysync]

そういや木彫熊のfigmaはもう発売されたんだっけ？

[ketancho_jp]

やっていきたい

[oh-kaz]

we

[pekee-nuee-nuee]

知らなかった