はじめに
現在私は自社開発に携わっております！
Figmaでワイヤーフレームを作成した話を綴っていきたいと思います。
1.Figmaを触ってみる
Figmaはよく聞くツールではありますが、実際に使うのは今回が初めてでした。
そもそもがよく分かってなかったので、まず色々触ってみることにしました。
少し触ってみての感触は、非常に直感的で扱いやすいことが分かりました。
画面上部にあるツールバーをなんとなーーく触ってなんとなーーーく動かしてみるとそれっぽくなります。
この手軽さはやみつきになります。
2.ワイヤーフレーム作成着手
なんとなく分かったタイミングでワイヤーフレームの作成を行います。
テキストの配置やフォームに見立てた図形を配置していきます。
合計11画面分作成しましたが、苦がならず進めることができました。
やはりこの使いやすさは初心者に優しいです。
（それにしてもデザインが壊滅的。。。今まで個人開発などでもBootstrapに甘えてきた人生。。。）
3.HTML出力してみる
作成したワイヤーフレームを画面遷移を含めブラウザで確認したかったので、HTMLに出力します。
Figmaの標準エクスポートは、「PNG,JPG,SVG,PDF」の4つだったのでそのままでは出力できません。
ググった結果HTMLでエクスポートできるプラグインを発見しました。
↓↓
使ってみたところ寸分の狂いなく出力というわけではありませんでしたが、相当な精度で出力されました。
非常に役立ちました。
↓Convertを押下することでHTMLで出力。プラグインって楽でいいね。
HTML出力だけではなくReactでの出力もありました。今回はHTMLでよかったのでこの機能は使用しませんでしたが、もし何かの機会があれば使ってみたいと思いました。
4.終わり
デザインツールを使うのは初めてだったので身を構えましたが、使いやすく苦戦しませんでした。
もう少しデザインの知識があったら楽しかったのかなー。とは思いますね。
5.予告
次回は9月8日に投稿予定です！