iOS
メモ
アプリ
学習
figma


補足


  • 初心者が個人的なメモ目的で投稿しています、指摘がありましたらコメントなどよろしくお願いします。

  • 新しく操作がわかり次第、更新していきます。

  • Figma公式ページ


Figmaとは?


  • FigmaとはUI/UXのデザインをしたい時などに常に便利なツールです。


操作手順


  1. まずはアカウント作成してログインを行います。


  2. ログインを行うと下記の画面が表示されるので「New File」を押下します。


  3. 下記のように左上のタブから「Frame」を選択してスマホの機種を選択(好きなのを選ぶ)します、そうすると枠が表示されます。

    Image from Gyazo

    ※ここではiPhone8 Plusを使用しています。


  4. 下記のように「Place Image」を選択するとPCに保存されている画像を表示することができます。


  5. 画像を選択すると下記のように画像のサイズが最初は大きいので枠に収まるように調整を行います。



    補足: 上記の矢印の部分を選択するとトリミングができます。


  6. 調節すると下記のような画面のようになります。


  7. 同じようにもう一つ画像を変更して同じ物を作成します。


  8. 下記のようにもう一つ作成することができたらボタンを作成します。


  9. ボタンは下記の「Rectangle」を選択します。


  10. そうすると下記のグレーの長方形の物が作成することができます。

    image.png


  11. 上記のグレーの物を検索とボタンに合わせて右の「Fill」覧の100%を変更することで透明度を調整することができるので0にします。


  12. そして下記のようにもう一つの画面の「・・・」の部分にも同じ物を作成します。

    image.png


  13. そしたら、この二つをボタンを押下することで画面を切り替えるようにするためにリンクを繋ぎます。


  14. 下記の画面の右のタブを「Prototype」に変更すると検索の部分の右側に「○」が表示されます。

    image.png


  15. この丸にカーソルを合わせてドラッグして下記のように隣画面にリンクさせせることができます。

    image.png


  16. これをもう一つの画面の方も行います。


  17. そしたら、下記の画面の再生ボタンを押下することで実際に操作することができます。

    image.png


  18. 下記の画面が完成形です、「検索」ボタンを押下すると次の画面へ、「・・・」を押下する前の画面へ戻るようになっていればあなたも勇者です。。

    Image from Gyazo


  19. 下記のように枠を縦に伸ばすことでスクロール機能が追加されます。

    image.png