0
0

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 1 year has passed since last update.

Figmaのフレームで詰んだ話(アドレスバーの挿入方法)

Last updated at Posted at 2022-12-10

初歩的なところで詰んだ

仕事上Figmaを使っているので大体の使い方は知っているものの0-1で作ったことがないので作ってみようとした矢先に積みました。
SafariでもChromeでもHeaderよりもさらに上の最上部にあるURLとか書いてあってタップすると検索欄に切り替わるあの”アドレスバー”をどのようにデザインするのかわからない・・・
どの Figmaでデザインを作ってみよう! 系の記事やYoutubeにも記載がなかったので色んな記事読んだり動画見たり・・・でも書いてない!!
figma アドレスバー って調べても出てこない・・・

前の記事で書いているui kitの存在を思い出して早速検索!!

解決(?)

Figma Safari ui kit  で調べると、

Safariのスマホ版、あったああああ!!!!!!
ありがとうございます(?)!!!
スクロール前とスクロール後のデザインがあるので、プロトタイプ設定でいじれば本当に使える!!
お困りのあなたにもお届け
スクリーンショット 2022-12-10 11.45.40.png

パソコン版はなくてもいいかもと思いつつ
Figma chrome ui kit と調べてみる。
色々出てきたけど、これが一番使えるかな?
お困りのあなたにもお届け
スクリーンショット 2022-12-10 12.00.44.png

両フレームともコピペで使えるので本当に有難い・・・!!

最後に

関係ない場所を30分くらい探し回り、一発で解決!
ぜひこの30分を私に返してほしいと思うこの日この頃。
そもそもデザインナーの皆さんがこうやってるのかが少し疑問ですが・・・とにかくデザインとして完成する以上問題はないかな、と判断しました。
そして、まさかこんな単純とは・・・ただ、初心者なら知る術なさそうなので共有させてもらいました!
私と同じように迷子の方へ、届きますように:pray_tone2:

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?