Slide 1
Slide 1 text
エンジニアがFigmaを使ったら幸せになった話
Slide 2
Slide 2 text
5 所d
5 クラスメソッド株式会社
AWS事業本部コンサルティング部
ソリューションアーキテク$
5 趣
5 ラジオ、散歩、
5 よく使うフリー素T
5 いらすと@
5 フキダシデザイン
与那嶺 創（よなみね そう）
ピザのアイコンでブログ書いてます
自己紹介
Slide 3
Slide 3 text
アジェンダ
6 What is Figm$
6 業務でデザインツールを使う時場"
6 私がデザインツールに求めるこB
6 Figmaのいいとこ
6 まとめ
Slide 4
Slide 4 text
このスライドもFigmaで作りました！
Slide 5
Slide 5 text
What is Figma？
draw.io Cacoo
デザインツール
よく比較されるデザインツール
(私目線)
Slide 6
Slide 6 text
業務でデザインツールを使う時場面
0 AWS構成図の作2
0 ブロ&
0 資料作2
0 他人との認識合わA
0 etc...
Slide 7
Slide 7 text
私がデザインツールに求めること
7 脳でイメージしたことを簡単に表現できA
7 よく使う機能にショートカットが用意されてい&
7 画像を細かく調整できる（表現の幅が広い
7 人にすぐ共有できる
Slide 8
Slide 8 text
私がデザインツールに求めること
c 脳でイメージしたことを簡単に表現できg
c よく使う機能にショートカットが用意されている
→矢印、文字入力、拡大縮小、複製、位置調整、et&
U 細かく調整できる（表現の幅が広い）
→トリミング、透過度、文字幅、et&
U 人にすぐ共有できる
Slide 9
Slide 9 text
Figmaを使う前のデザインツールに対するイメージ
デザインツールって
イメージ通りに動かない！
イライラする！
Slide 10
Slide 10 text
Public Subnet Public Subnet
Private Subnet Private Subnet
AZ-1a AZ-1c
EC2 EC2
Internet Gateway
ELB
例えば...
Slide 11
Slide 11 text
Public Subnet Public Subnet
Private Subnet Private Subnet
AZ-1a AZ-1c
EC2 EC2
EC2
Internet Gateway
ELB
これを上に動かしたい
Slide 12
Slide 12 text
Public Subnet Public Subnet
Private Subnet Private Subnet
AZ-1a AZ-1c
EC2
Internet Gateway
ELB
枠が上に動いた！？
EC2
Slide 13
Slide 13 text
イメージしている通りに動かない！
Slide 14
Slide 14 text
Figmaを使うとこういったことが少ない
（個人的な感覚値）
ぜひ、帰ったら触ってみてください！
Slide 15
Slide 15 text
t
他にも...
アイコンが大きくなったり、小さくなったりするのを表現したい
皆さんならどうしますか？
Slide 16
Slide 16 text
大きくなってる気がしませんか？
Slide 17
Slide 17 text
増減しているように見えませんか？
Slide 18
Slide 18 text
脳でイメージしたことを具現化ができる
イメージ Figma 具現化
つまり
Slide 19
Slide 19 text
Figmaを便利に使うために
Slide 20
Slide 20 text
t
画像は極力SVG形式を使う
SVGとは？：ファイル形式の1つ
goodポイント：引き伸ばしても画像が潰れない、加工しやすい
つぶれない
Slide 21
Slide 21 text
t
自分だけのアイコン集を作る
よく使うアイコンを集めるだけのFigmaファイルを1つ作る
Slide 22
Slide 22 text
] L
t
ショートカットを使う
よく使う機能のみショートカットを使う
最初から全部覚えようとしない！！
この操作よくするな... となったらショートカットを調べる
オススメ！！
[
(エル)
l
Slide 23
Slide 23 text
t
使いこなさない
色々な機能があるけど、自分に必要な機能だけを覚える
自身にとって最適な使い方ができればそれでOK！！
Slide 24
Slide 24 text
t
Figmaを使って脳内イメージを共有しよう
Slide 25
Slide 25 text
t
Figmaを使いこなせば
人とのコミュニケーションがうまくいき
きっと幸せになれるはず！
Slide 26
Slide 26 text
おわり
t