フロントエンドエンジニアがFigmaのオートレイアウトを駆使して、実装に直結するUIを設計した話

はじめに こんにちは、フロントエンドエンジニアのOkumaです。 現在、私が所属する開発チームではフロントエンドエンジニアである私が簡単なUIデザインの作成から実装までを一貫して担当しています。 今回は、デザインとコードをシームレスに繋ぐことができるこの体制を活かし、自身のマークアップ業務のしやすさを意識してFigmaでデザインを作成しています。その際、「オートレイアウト（Auto Layout）」を徹底的に活用してより実装のしやすいデザインに改善した体験について、今回まとめたいと思います。 エンジニア視点でFigmaをどう構築したのか、一つの参考になれば幸いです。 以前のデザインが抱えていた課題：固定値（Fixed）デザインの罠 これまでのデザインデータを見ていて一番困ったのが、ボタンなどのコンポーネントの高さや幅が「固定値（Fixed width / height）」で作られていること