エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C

こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に

[norip44]

たいへんよいです！　Figma初心者にはちょっとだけ難しいんですけど、「オートレイアウト」を入れ子にする手法・考え方はみんなが採用してほしい！

[yarumato]

“Web版クックパッドのUIのリニューアル。実装しやすさも考えたUIレイアウトに。結論：ブロックで積むUI（UIのブロックをComponent Instance引用しつつ）、その要素をすべてAutoLayout（Figmaの便利な機能）で配列するのが最適解”