Figma使ってみた

目次

事前準備
使ってみよう
成果物の共有方法

事前準備

①Figma公式サイトにアクセスする
https://www.figma.com/

②サイトの最下部にある「Try Figma for free」からアカウントを作成する

③言語を日本語にする

④デスクトップアプリのダウンロード
https://www.figma.com/ja/downloads/

使ってみよう

・左メニューの チーム->プロジェクト のプラスボタンから「デザインファイルを新規作成」する

・左上のメニューから「フレーム」を押して、右メニューに出てきたフレームから好きなものを選択する

・左上のメニューからテキストだったり図形だったりを追加してみる

・画面遷移をしたいので左上のメニューから「フレーム」を追加する

・遷移後の画面にもいろいろ追加してみる

・遷移のトリガーになる要素をクリックして、右メニューの「プロトタイプ」をクリックしよう

・インタラクションにあるプラスボタンを押す

・インタラクションの詳細を設定する

・同様に、遷移後の画面のインタラクションを設定する。押したら遷移前の画面に戻るインタラクションを設定する

・完成品
https://www.figma.com/proto/O1K9mQyjBJwII1C4ZByiPV/%E7%84%A1%E9%A1%8C?page-id=0%3A1&node-id=1%3A3&viewport=232%2C343%2C0.19&scaling=scale-down&starting-point-node-id=1%3A3

成果物の共有方法

①右上のプレゼンテーション実行ボタンを押してプレゼン画面に行く

②右上のプロトタイプを共有ボタンを押す

③リンクをコピーするボタンを押す

URL共有した際に画面のサイズがおかしい時は、右上のオプションから「画面に合わせる」を選択すると良い感じになる