ミキ|デザイナー

デザインファームで働くデザイナーです。 Service Design/ UX Desi…

ミキ|デザイナー

デザインファームで働くデザイナーです。 Service Design/ UX Design/ UI Design

マガジン

  • FigmaのAuto Layoutをマスターしよう

    Figma大好きデザイナーがAuto Layoutを使ってさくさくプロトタイピングする方法を書いていきます。

  • ランチメニューの情報設計

    街で見かけたランチメニューの再構築を題材に情報設計について書いています。

記事一覧

固定された記事

【ランチメニューの情報設計 vol.1】 根津のパスタ屋さん

私はデザイン会社でアプリやWEBサイトをつくっているのですが、会社の同僚とご飯に行くとよく始まる会話があります。 「この書き方だとAランチとBランチの違いがパッと入…

【FigmaのAuto Layoutをマスターしよう vol.4】 カード型記事リスト

今回は記事一覧に使われることが多いカード型のリストを作りたいと思います。 第1回から今回まででAuto Latoutの基本的な設定をひと通りマスターできます! 並び位置の基…

【FigmaのAuto Layoutをマスターしよう vol.3】 固定幅のボタン

ここまで第1回ではテキスト量に合わせて伸び縮みするボタン、第2回では複数の要素をもつ伸び縮みするボタンをつくってきました。 今回はAuto Layoutを使って固定幅のボ…

【FigmaのAuto Layoutをマスターしよう vol.2】 アイコン入りボタン

今回はAuto Layoutを使ってアイコンの入ったボタンを作っていきたいと思います。 「Auto Layoutってなに?」という方は前回の記事を読んでいただけたらと思います。 並ぶ…

【FigmaのAuto Layoutをマスターしよう vol.1】 シンプルなボタン

みなさんFigmaのAuto Layout使ってますか? 私は普段アプリデザインの仕事をしていますが、Auto Layoutがリリースされてからプロトタイピングのスピードが2倍ぐらいになっ…

【ランチメニューの情報設計 vol.1】 根津のパスタ屋さん

【ランチメニューの情報設計 vol.1】 根津のパスタ屋さん

私はデザイン会社でアプリやWEBサイトをつくっているのですが、会社の同僚とご飯に行くとよく始まる会話があります。

「この書き方だとAランチとBランチの違いがパッと入ってこないね。」
「ここの文書構造を整理しないと、日替わりランチの話がどこまで続いてるのか分かりにくいなぁ。」

黙ってさっさと選べよ!と自分でも思うのですが、ついつい「どうしたらもう少し情報が伝わりやすくなるか」を考え始めてし

もっとみる
【FigmaのAuto Layoutをマスターしよう vol.4】 カード型記事リスト

【FigmaのAuto Layoutをマスターしよう vol.4】 カード型記事リスト

今回は記事一覧に使われることが多いカード型のリストを作りたいと思います。
第1回から今回まででAuto Latoutの基本的な設定をひと通りマスターできます!

並び位置の基準(Alignment)の設定値について今回作っていくのはこのようなリストです。
サムネイルと本文は幅いっぱい、日付は左揃え、ボタンは右揃えになっています。

Auto Layoutでは子要素に対して並び位置の基準(Align

もっとみる
【FigmaのAuto Layoutをマスターしよう vol.3】 固定幅のボタン

【FigmaのAuto Layoutをマスターしよう vol.3】 固定幅のボタン

ここまで第1回ではテキスト量に合わせて伸び縮みするボタン、第2回では複数の要素をもつ伸び縮みするボタンをつくってきました。

今回はAuto Layoutを使って固定幅のボタンを作っていきたいと思います。

幅を固定するAuto Layoutでは並び方向が縦並び(Vertical)のときは幅を固定、横並び(Horizontal)のときは高さを固定することができます。

ということで以下のように設定

もっとみる
【FigmaのAuto Layoutをマスターしよう vol.2】 アイコン入りボタン

【FigmaのAuto Layoutをマスターしよう vol.2】 アイコン入りボタン

今回はAuto Layoutを使ってアイコンの入ったボタンを作っていきたいと思います。
「Auto Layoutってなに?」という方は前回の記事を読んでいただけたらと思います。

並ぶ方向(Direction)の設定
では最初に中身の要素が並ぶ方向の指定について見ていきましょう。
並ぶ方向には横方向(Horizontal)、縦方向(Vertical)の2つがあります。

Flexboxで言うところ

もっとみる
【FigmaのAuto Layoutをマスターしよう vol.1】 シンプルなボタン

【FigmaのAuto Layoutをマスターしよう vol.1】 シンプルなボタン

みなさんFigmaのAuto Layout使ってますか?
私は普段アプリデザインの仕事をしていますが、Auto Layoutがリリースされてからプロトタイピングのスピードが2倍ぐらいになったのでは......?という感覚です。

というわけで、今回はシンプルなボタンを作りながらAuto Layoutの使い方を解説していきたいと思います!

Auto Layoutとは?
はじめに「Auto Layo

もっとみる