LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@gwanryongin株式会社Aoba-BBT

Figma使ってみた

Last updated at Posted at 2022-11-29

目次

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

事前準備

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

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

③言語を日本語にする

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

使ってみよう

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

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

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

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

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

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

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

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

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

・完成品
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

成果物の共有方法

①右上のプレゼンテーション実行ボタンを押してプレゼン画面に行く
スクリーンショット 2022-11-29 15.16.53.png

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

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?