マガジンのカバー画像

Yusuiのデザイン情報共有

21
Monoが書いたデザインに関する記事です。 Figma系が多め
運営しているクリエイター

#設計手法

おもちゃ箱のようなアプリBaaaaのUI/UXが凄すぎた件

【はじめに】この記事はBaaaaと何の関係もないただの学生(25卒)が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する 下部にあるフッターナビゲーションの大きく

Figmaのスマホ設計手法 ④

Figmaのスマホ設計手法① Figmaのスマホ設計手法② Figmaのスマホ設計手法③ Figmaのスマホ設計手法④ 6. リスト要素だけはAuto layoutを適用構造 Frame-1 - fix 要素 - Frame-2 (Auto layout) - $spacing - リスト (Auto layout) - リスト要素1 - リスト要素2 - $spacing 解説 先ほども言ったように、Frame-2の子孫要素には$s

Figmaのスマホ設計手法 ③

Figmaのスマホ設計手法① Figmaのスマホ設計手法② Figmaのスマホ設計手法③ Figmaのスマホ設計手法④ 4. Frame-2の要素の間に余白を挿入構造 Frame-1 - fix 要素 - Frame-2(Auto layout) - $spacing - 要素1 - $spacing - 要素2 - $spacing 解説 まず、FigmaのAuto layoutの問題点について考えてみましょう。1番の問題点は、間隔ごとに個

Figmaのスマホ設計手法 ②

Figmaのスマホ設計手法① Figmaのスマホ設計手法② Figmaのスマホ設計手法③ Figmaのスマホ設計手法④ 先ほど作ったFrame-2に子要素として、さまざまな種類を入れまくっていきます。 では、入れる要素の配置ごとに見ていきましょう! 3-1. 要素が1つで中央揃えしたい時 構造 Frame-1 - fix 要素1 (status bar) - fix 要素2 (bottom navigation) - Frame-2 (Auto layout)

Figmaのスマホ設計手法 ①

(こちらはQiitaに以前投稿した記事のお引越しです) Figmaのスマホ設計手法① Figmaのスマホ設計手法② Figmaのスマホ設計手法③ Figmaのスマホ設計手法④ 今回は、自分なりのFigmaの設計手法について4日ほど悩みまくって決めました。長いですが最後まで読んでいただけると嬉しいです。 対象の人 Auto layout, Variantsを理解している人 Figmaでモバイルアプリ画面を作る際に、Auto layoutをノリで適用している人