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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
ヤマダ(北野)
July 13, 2024
Technology
0
17
Amplify StudioとFigmaで遊ぶ
ヤマダ(北野)
July 13, 2024
Tweet
Share
More Decks by ヤマダ(北野)
See All by ヤマダ(北野)
「Kiroってどうなの?」 リアルな使い勝手と最新の料金ガイド
yamada_r
0
86
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
3
280
カップラーメンタイマーで感じる生成AIの進化
yamada_r
0
10
Amazon Lexに感じる無限の可能性
yamada_r
0
49
JAWS DAYS 2025 re:Chrees 広報担当の振り返り
yamada_r
0
140
それ、AWS Step Functionsで置き換えれん?
yamada_r
0
21
はじめてのすくらむ
yamada_r
0
23
新米CBの自己紹介
yamada_r
0
13
Lambda Layerを作る時に沼った話
yamada_r
0
14
Other Decks in Technology
See All in Technology
新規事業における「一部だけどコア」な AI精度改善の優先順位づけ
zerebom
0
420
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
17k
全員が「作り手」になる。職能の壁を溶かすプロトタイプ開発。
hokuo
1
630
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
genda
0
130
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
66k
ファシリテーション勉強中 その場に何が求められるかを考えるようになるまで / 20260123 Naoki Takahashi
shift_evolve
PRO
3
410
Regional_NAT_Gatewayについて_basicとの違い_試した内容スケールアウト_インについて_IPv6_dual_networkでの使い分けなど.pdf
cloudevcode
1
180
AI時代にあわせたQA組織戦略
masamiyajiri
7
2.9k
VRTと真面目に向き合う
hiragram
1
510
BPaaSオペレーション・kubell社内 n8n活用による効率化検証事例紹介
kentarofujii
0
320
書籍執筆での生成AIの活用
sat
PRO
1
230
プロダクトエンジニアこそ必要なPMスキル 〜デリバリー力を最大化し、価値を届け続けるために〜
layerx
PRO
0
150
Featured
See All Featured
It's Worth the Effort
3n
188
29k
Code Review Best Practice
trishagee
74
20k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Site-Speed That Sticks
csswizardry
13
1k
How STYLIGHT went responsive
nonsquared
100
6k
Context Engineering - Making Every Token Count
addyosmani
9
640
GraphQLとの向き合い方2022年版
quramy
50
14k
Done Done
chrislema
186
16k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
150
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
300
Google's AI Overviews - The New Search
badams
0
900
[SF Ruby Conf 2025] Rails X
palkan
0
730
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 ご清聴ありがとうございました!