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
10
Amplify StudioとFigmaで遊ぶ
ヤマダ(北野)
July 13, 2024
Tweet
Share
More Decks by ヤマダ(北野)
See All by ヤマダ(北野)
「Kiroってどうなの?」 リアルな使い勝手と最新の料金ガイド
yamada_r
0
60
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
3
230
カップラーメンタイマーで感じる生成AIの進化
yamada_r
0
6
Amazon Lexに感じる無限の可能性
yamada_r
0
40
JAWS DAYS 2025 re:Chrees 広報担当の振り返り
yamada_r
0
120
それ、AWS Step Functionsで置き換えれん?
yamada_r
0
13
はじめてのすくらむ
yamada_r
0
11
新米CBの自己紹介
yamada_r
0
9
Lambda Layerを作る時に沼った話
yamada_r
0
9
Other Decks in Technology
See All in Technology
Retrospectiveを振り返ろう
nakasho
0
120
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
320
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
120
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
180
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
330
OCIjp_Oracle AI World_Recap
shinpy
1
180
[読書]AWSゲームブック〜GuardDuty魔神とインシデント対応の旅〜DevIO2025
cmusudakeisuke
0
200
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
130
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
2
910
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
390
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
8
300
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
The Language of Interfaces
destraynor
162
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Into the Great Unknown - MozCon
thekraken
40
2.1k
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 ご清聴ありがとうございました!