Figma大好きデザイナーがAuto Layoutを使ってさくさくプロトタイピングする方法を書いていきます。
【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。 今回は記事一覧に使われることが多いカード型のリストを作りたいと思います。 第1回から今回まででAuto Latoutの基本的な設定をひと通りマスターできます! 並び位置の基準(Alignment)の設定値について今回作っていくのはこのようなリストです。 サムネイルと本文は幅いっぱい、日付は
【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。 ここまで第1回ではテキスト量に合わせて伸び縮みするボタン、第2回では複数の要素をもつ伸び縮みするボタンをつくってきました。 今回はAuto Layoutを使って固定幅のボタンを作っていきたいと思います。 幅を固定するAuto Layoutでは並び方向が縦並び(Vertical)のときは幅
【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。 今回はAuto Layoutを使ってアイコンの入ったボタンを作っていきたいと思います。 「Auto Layoutってなに?」という方は前回の記事を読んでいただけたらと思います。 並ぶ方向(Direction)の設定 では最初に中身の要素が並ぶ方向の指定について見ていきましょう。 並ぶ方向に
【2024年5月追記】この記事は2020年に執筆したものであり現在のFigmaとは仕様が違うため参考にはなりません。昔はFigmaこうだったんだなぁという歴史資料として残しておきます。 みなさんFigmaのAuto Layout使ってますか? 私は普段アプリデザインの仕事をしていますが、Auto Layoutがリリースされてからプロトタイピングのスピードが2倍ぐらいになったのでは......?という感覚です。 というわけで、今回はシンプルなボタンを作りながらAuto La
街で見かけたランチメニューの再構築を題材に情報設計について書いています。
私はデザイン会社でアプリやWEBサイトをつくっているのですが、会社の同僚とご飯に行くとよく始まる会話があります。 「この書き方だとAランチとBランチの違いがパッと入ってこないね。」 「ここの文書構造を整理しないと、日替わりランチの話がどこまで続いてるのか分かりにくいなぁ。」 黙ってさっさと選べよ!と自分でも思うのですが、ついつい「どうしたらもう少し情報が伝わりやすくなるか」を考え始めてしまいます。 小さい飲食店だとメニューはお店の方がを手作りされてることが多いです