Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AWS Amplify Studioと Figmaの連携によるLP開発の効率化

AWS Amplify Studioと Figmaの連携によるLP開発の効率化

【3/24@オンライン開催】エイチーム×レバレジーズ フロントエンド勉強会
https://ateam.connpass.com/event/276968/

での発表資料

## 技術

AWS Amplify studio, Figma, React, TypeScript, html, css

Avatar for Tech Leverages

Tech Leverages

April 03, 2023
Tweet

More Decks by Tech Leverages

Other Decks in Technology

Transcript

  1. 自己紹介 河村 勇樹(28歳) • 経歴: ◦ 2019年4月 大手Web企業 新卒入社 ◦

    2021年1月 レバレジーズ株式会社 中途入社 • 出身: ◦ 東京都町田市(シティボーイ) • 趣味: ◦ お酒、ゴルフ • 2023年の目標: ◦ ゴルフのスコアを90台にのせること • 好きなAWSサービス: ◦ Amplify、CloudFront、ECS、Aurora
  2. Amplify Studioの特徴 Figmaと連携してコードを自動生成 • AWS Amplify Studio と Figma との連携

    • Figma 上のデザインを AWS Amplify Studio にインポート • React などで利用できる Component としてコードを生成
  3. Amplify Studioの特徴 メリット • CSSを書くことなくデザインされたWebアプリを開発 • デザインとシームレスに連携したシステムの構築 • 導入が簡単 ◦

    公式から AWS Amplify UI Kit というコンポーネントライブラリが提供されている ◦ 自作コンポーネントを組み込むのも簡単
  4. Amplify Studioの特徴 デメリット • React に依存してしまう ◦ Amplify UI とFigma

    との連携に関する公式ドキュメントも React のみしか存在しない ◦ ※ 2023/03/24現在 • Amplify Studio に取り込む上での制約がある ◦ 決められたルール上でデザインを作成する必要がある • スタイルを override しないと実現できないデザインもある ◦ ヘッダー固定、アンカーリンク、ボタンのホバー、カルーセル、アニメーションなど
  5. 実際にAmplify Studioを導入してみて... 辛かったこと • 今までのデザインルールを変更するコスト ◦ Amplify Studioの制約に基づいてルールを変更する必要がある ◦ 取り込み時にエラーが発生することも

    ...(割愛) • ディレクトリ構成を柔軟に変更できない ◦ “ui-components”というディレクトリにフラットに吐き出される ◦ パーツとして利用したいコンポーネントなどのグルーピングが難しい ...
  6. 実際にAmplify Studioを導入してみて... これから取り組みたいこと • デザインシステムとして拡張 ◦ 共通 Component も社内ライブラリとして活用したい •

    Figma → Amplify Studio → React Component をさらにシームレスに ◦ Figma のデザインが完了したら React の Component までの流れを自動化したい • Amplify Studio の機能をさらに活用してノーコードに ◦ 非エンジニアでも開発・運用ができる状態にしたい
  7. Leverages スライドテンプレート 基本カラー 基本フォントサイズ アイコン(欲しいモノがあれば言ってくださいませ!) #333333 #fbfbfb #95100e メインタイトル :

    42 サブタイトル : 24 本文 : 16 (あくまで基本なのでご自身でカスタマイズしてもらって大丈夫です :D)
  8. 目次 • 始めに • 内容1 ◦ 1の内容 • 内容2 ◦

    2の内容1 ◦ 2の内容2 • 内容3 • まとめ • さいごに