Amplify StudioとFigmaで遊ぶ

Transcript

1. ヤマダ Amplify StudioとFigmaで遊ぶ！ 2024/7/13 アイレット株式会社 アジャイル事業部 IoTセクション
2. 2 自己紹介
3. 3 自己紹介 名前：ヤマダ 所属：アイレット株式会社 趣味：プリンの絵を描くこと 好きなサービス： Figma、AWS Lambda、AWS FIS プロフィール ↑ Xアイコン
4. 4 1. 自己紹介（済） 2. LTで伝えたいこと 3. 関連サービスのおさらい 4. 環境構築！（割愛） 5. コンポーネントを作ってみる 6. まとめ アジェンダ
5. 5 LTで伝えたいこと
6. 6 LTで伝えたいこと • Amplify StudioとFigmaを連携し、コンポーネントを作成 • 環境構築は割愛 • Figmaでの操作（オブジェクトの配置など） • Amplify Studioでの操作（同期やアクション設定など） • Reactでコンポーネントを使用！ ※今回お話しするのはGen1の機能です お話しする内容について
7. 7 関連サービスのおさらい
8. 8 関連サービスのおさらい ブラウザ上で簡単にデザインができるツール Figma Webアプリなどを簡単に構築・配信できる Amplify Studio 世界的に人気なJavaScriptのフレームワーク React
9. 9 関連サービスのおさらい こんな感じで使います 連携 プル GUIでデザイン・UIを 簡単作成！ 作成したデザインを コード化！ コンポーネント 使い放題！
10. 10 環境構築！（割愛）
11. 11 コンポーネントを作ってみる
12. 12 コンポーネントを作ってみる 1. オブジェクトを配置し、コンポーネント化する 2. 文字などの置き換えたいものも配置する ※オートレイアウトを駆使する！ Figma
13. 13 コンポーネントを作ってみる 1. 「Sync with Figma」を押すと差分が検出される 2. 「Accept」する Amplify Studio
14. 14 コンポーネントを作ってみる 1. UI Libraryで選択 2. propertiesで諸々設定する 3. ラベルやアクションを設定可能（onMouseとか） Amplify Studio
15. 15 コンポーネントを作ってみる 1. プロジェクトの準備など（Studioにコマンド例あり） 2. コンポーネントがプルされてるので使う 3. いい感じに表示！（でかい） React
16. 16 まとめ
17. 17 まとめ • それなりにローコードを実現 • チーム運用はどうやるんだろう • そもそもFigmaを扱うのはデザイナーさんなのか？ • タスクとして同期する作業をPG側の誰かが担当？（面倒そう） • ブランチ毎にCI/CDとか勝手に作ってくれる • コンポーネント確認用ブランチがあると便利 Amplify Studioについて
18. 18 まとめ • Figmaを使いこなせるならかなり労力削減！？ • 結構難しい（作ったままの表示にならないこともしばしば） • 個人で使う分には課金などもなし • チームで利用時に制限あり Figmaについて
19. 19 まとめ • プルや初期設定は簡単！ • Studioにコマンド例があるのでそのまま叩くだけ • コードがやけに長い • 生成されたコードに触れるのは御法度（プルで消える） • 可能な限りはStudioでアクションなども入れるほうが良い • UIライブラリと併用もアリ • お試しでMaterial UIと併用してみた • Figmaで同じような雰囲気で作るのはきつい（自作が浮く） Reactについて
20. 20 まとめ • スピーディにオリジナルデザインを作りたい時に良い • 規模によってはUIコンポーネントと合わせて利用 • GUIで作ったコンポーネントがパッとコード化されるのが見 ていて楽しい！！ • これからもちょこちょこ触っていきます！ 総合的感想
21. 21 ご清聴ありがとうございました！