今回やりたい事_説明
- figmaって使ったことないけど基本が知りたい。Part2 (Part1はこちらから)
- figmaのプレビュー機能を利用したい
今回の記事が参考になる方
- figmaはまったく利用した事がない人
- デザイナーではない人。
- webページのワイヤー（ラフ）作成はもっぱらExcel利用中の人。
▼環境案内▼
PC：Windows OS 10（非エンジニアなので細かいことは書かない。）
figma：無料プラン（すでにアカウント作成済み）
NETWORK：普通に自宅のWi-fi か 会社有線LAN環境
１．figma起動してフレームを用意
いつもどおりデザインファイルを新規作成 を選択する
▼ 無題→名前を付ける（今回はTEST_20220822とする）
▼今回のフレームは以下を選択してみる
▼スマホ＞iPhone 13/13Pro
▼デスクトップ＞デスクトップ
(フレームってどうやんのさ？って方はPart1をどうぞ)
２．フレームに画像を入れ込んでそれっぽくしてみる
ここでもし、「画像もってないし、Googleとかで画像検索してもまともな物出てこないし。。記事読むのやめよ」って思った方！！
お待ちください、ここでも便利なプラグイン紹介します。
▼ まずはプラグインをインストール。「unsplash」です。まっじでいいですよ。これは。
unsplashが起動したら、「Serch」タブで検索に英語を入れてもいいし、候補で出てきているテキスト群を選択してもOKです。今回は「animal」を選択してみます。
するとどうでしょう。無料且つ高画質の画像がたくさん！！今回は黒いパグを選択してみます。
####herderとfooterを付けるとすぐにiphoneの簡易サイトっぽいでしょ？
ちょっと適当すぎるかな。。まあでもこんな簡単に作成できちゃいますので試してみて。
もし細かい所知りたい人はコメント下さい。
３．プレビューの前にクリックボタンアクションを追加してみる。
パグの上にボタンを用意しました。
▼こんな感じ。この辺は適当でいいです。
▼その後に「iPhone 13 / 13 Pro - 1」部分をクリック選択してコピーペーストのショートカットを実施
（一応コピーはキーボードのCtrl ＋ cですね。ペーストはキーボードのCtrl ＋ vですね。）
すると「iPhone 13 / 13 Pro - 2」が作成されますので、ボタンの文字を少し変更します。
ここから頂戴な案内。「プロトタイプ」です。この先、WLとしてFigmaを利用していく場合には必ず利用する事と思います。今回は簡易な利用方法なので後で自分で調べてみてくださいね。
▼では早速案内です。
画面右上の「プロトタイプ」を選択してください。
するとマウスをMOREボタンに近づけると＋が表示します。
▼隣のフレームまでドラックして、引っ付いたらドラックを離します
▼インタラクション詳細を設定する。（最初はそのまま何も変更しなくてもいいと思います。）
私は以下で設定してみました。
正直すべてを私も理解していませんので、後で調べて別記事にまとめてみます。
タップ
次に移動
ディゾルブ
なめらか
800ms
ここまで整ったらいよいよプレビューです。
３．プレビューしてみる。
いずれかでいいので三角の再生ボタンを選択します。
すると画面でiphoneが表示してMORE部分はクリックできそうです。クリックしてみると、Afterにかわりましたよね？
はい出来上がりです！
Figmaとしては先ほどから作成していたタブとは切り替わっていますので、戻ってもらって右上の共有ボタンを押下してもらえればスマホでももちろん確認できます。
そして一つ注意です。
２で設定したのは「iPhone 13 / 13 Pro - 1」フレーム⇒「iPhone 13 / 13 Pro - 2」フレームだけになります。これでは一方通行です。
プレビューでもafterをクリックしてもMOREに戻らないと思います。
その為、プロトタイプでAfterからMOREにも青い線でドラッグして線を引きましょう
▼こんな形に。
最後にプレビューしたものを撮影しました。見てみて～
今日はここまでです。Part3に期待してください～。