Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amplify StudioとFigmaで遊ぶ
Search
ヤマダ(北野)
July 13, 2024
Technology
0
6
Amplify StudioとFigmaで遊ぶ
ヤマダ(北野)
July 13, 2024
Tweet
Share
More Decks by ヤマダ(北野)
See All by ヤマダ(北野)
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
3
170
カップラーメンタイマーで感じる生成AIの進化
yamada_r
0
4
Amazon Lexに感じる無限の可能性
yamada_r
0
33
JAWS DAYS 2025 re:Chrees 広報担当の振り返り
yamada_r
0
110
それ、AWS Step Functionsで置き換えれん?
yamada_r
0
12
はじめてのすくらむ
yamada_r
0
10
新米CBの自己紹介
yamada_r
0
7
Lambda Layerを作る時に沼った話
yamada_r
0
8
CFnのプロジェクトをCDKにしてみたい
yamada_r
0
9
Other Decks in Technology
See All in Technology
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
930
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
2
510
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
280
「Verify with Wallet API」を アプリに導入するために
hinakko
1
220
KMP の Swift export
kokihirokawa
0
310
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
190
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
110
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
680
いまさら聞けない ABテスト入門
skmr2348
1
190
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
450
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
How GitHub (no longer) Works
holman
315
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Site-Speed That Sticks
csswizardry
11
870
Code Reviewing Like a Champion
maltzj
525
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Building Applications with DynamoDB
mza
96
6.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fireside Chat
paigeccino
40
3.7k
How to train your dragon (web standard)
notwaldorf
96
6.3k
How STYLIGHT went responsive
nonsquared
100
5.8k
Transcript
ヤマダ Amplify StudioとFigmaで遊ぶ! 2024/7/13 アイレット株式会社 アジャイル事業部 IoTセクション
2 自己紹介
3 自己紹介 名前:ヤマダ 所属:アイレット株式会社 趣味:プリンの絵を描くこと 好きなサービス: Figma、AWS Lambda、AWS FIS プロフィール
↑ Xアイコン
4 1. 自己紹介(済) 2. LTで伝えたいこと 3. 関連サービスのおさらい 4. 環境構築!(割愛) 5.
コンポーネントを作ってみる 6. まとめ アジェンダ
5 LTで伝えたいこと
6 LTで伝えたいこと • Amplify StudioとFigmaを連携し、コンポーネントを作成 • 環境構築は割愛 • Figmaでの操作(オブジェクトの配置など) •
Amplify Studioでの操作(同期やアクション設定など) • Reactでコンポーネントを使用! ※今回お話しするのはGen1の機能です お話しする内容について
7 関連サービスのおさらい
8 関連サービスのおさらい ブラウザ上で簡単にデザインができるツール Figma Webアプリなどを簡単に構築・配信できる Amplify Studio 世界的に人気なJavaScriptのフレームワーク React
9 関連サービスのおさらい こんな感じで使います 連携 プル GUIでデザイン・UIを 簡単作成! 作成したデザインを コード化! コンポーネント
使い放題!
10 環境構築!(割愛)
11 コンポーネントを作ってみる
12 コンポーネントを作ってみる 1. オブジェクトを配置し、コンポーネント化する 2. 文字などの置き換えたいものも配置する ※オートレイアウトを駆使する! Figma
13 コンポーネントを作ってみる 1. 「Sync with Figma」を押すと差分が検出される 2. 「Accept」する Amplify Studio
14 コンポーネントを作ってみる 1. UI Libraryで選択 2. propertiesで諸々設定する 3. ラベルやアクションを設定可能(onMouseとか) Amplify
Studio
15 コンポーネントを作ってみる 1. プロジェクトの準備など(Studioにコマンド例あり) 2. コンポーネントがプルされてるので使う 3. いい感じに表示!(でかい) React
16 まとめ
17 まとめ • それなりにローコードを実現 • チーム運用はどうやるんだろう • そもそもFigmaを扱うのはデザイナーさんなのか? • タスクとして同期する作業をPG側の誰かが担当?(面倒そう)
• ブランチ毎にCI/CDとか勝手に作ってくれる • コンポーネント確認用ブランチがあると便利 Amplify Studioについて
18 まとめ • Figmaを使いこなせるならかなり労力削減!? • 結構難しい(作ったままの表示にならないこともしばしば) • 個人で使う分には課金などもなし • チームで利用時に制限あり
Figmaについて
19 まとめ • プルや初期設定は簡単! • Studioにコマンド例があるのでそのまま叩くだけ • コードがやけに長い • 生成されたコードに触れるのは御法度(プルで消える)
• 可能な限りはStudioでアクションなども入れるほうが良い • UIライブラリと併用もアリ • お試しでMaterial UIと併用してみた • Figmaで同じような雰囲気で作るのはきつい(自作が浮く) Reactについて
20 まとめ • スピーディにオリジナルデザインを作りたい時に良い • 規模によってはUIコンポーネントと合わせて利用 • GUIで作ったコンポーネントがパッとコード化されるのが見 ていて楽しい!! •
これからもちょこちょこ触っていきます! 総合的感想
21 ご清聴ありがとうございました!