AutoLayout

7月の開催内容まとめ/Tokyo Uppers Boost

7月はエンジニア向け2回、デザイナー向け1回で計3回開催しました。 本記事ではイベントの実施内容をまとめていきます! Tokyo Uppers Boostとは? スタートアップ・スキルアップ・ミートアップを加速させる起業家・エンジニア・デザイナー向けのコミュニティ 株式会社マンハッタンコードが運営してお…

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

今回は記事一覧に使われることが多いカード型のリストを作りたいと思います。 第1回から今回まででAuto Latoutの基本的な設定をひと通りマスターできます! 並び位置の基準(Alignment)の設定値について 今回作っていくのはこのようなリストです。 サムネイルと本文は幅いっぱい、日付は左揃え、ボ…

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

ここまで第1回ではテキスト量に合わせて伸び縮みするボタン、第2回では複数の要素をもつ伸び縮みするボタンをつくってきました。 今回はAuto Layoutを使って固定幅のボタンを作っていきたいと思います。 幅を固定する Auto Layoutでは並び方向が縦並び(Vertical)のときは幅を固定、横並び(Hori…

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

今回はAuto Layoutを使ってアイコンの入ったボタンを作っていきたいと思います。 「Auto Layoutってなに?」という方は前回の記事を読んでいただけたらと思います。 並ぶ方向(Direction)の設定 では最初に中身の要素が並ぶ方向の指定について見ていきましょう。 並ぶ方向には横方向(Horizontal)…

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

みなさんFigmaのAuto Layout使ってますか? 私は普段アプリデザインの仕事をしていますが、Auto Layoutがリリースされてからプロトタイピングのスピードが2倍ぐらいになったのでは......?という感覚です。 というわけで、今回はシンプルなボタンを作りながらAuto Layoutの使い方を解説していきたい…

FigmaにAuto Layoutが来た!

こんにちは、ふじけん(@kenshir0f)です。 FigmaにAuto Layoutが来て早速触ってみたので、その機能をご紹介します。 今回は、チュートリアル読む前にさっと機能だけを知りたい方向けに書きました。 Auto Layoutとは? テキストの長さや要素の数によって、自動的にそのオブジェクトのサイズが変わる便…

非 iOS エンジニアのための Auto Layout 入門-コミュニケーション編…

はじめに こんにちは。Zaim で iOS エンジニアをしている @akatsuki174 です。 いよいよ Auto Layout シリーズも最終回です。前回は紙の上で制約式を書く練習をしました。 今回はデザイナーさんとデザインのすり合わせをする時に「こんなところが示されてると助かる」「こうゆうのはできれば避けて…

非 iOS エンジニアのための Auto Layout 入門-実践編- #Zaim

前回のおさらいと今回 こんにちは。 Zaim で iOS エンジニアをしている @akatsuki174 です。 前回までで一通り主要な制約について学びました。 今回は今までの知識を使って、紙の上で「この UI を実現するにはどのような制約をかけたら良いか」を書き出す練習問題を解いてもらおうと思います。「…

非 iOS エンジニアのための Auto Layout 入門-応用編- #Zaim

前回のおさらいと今回 こんにちは。Zaim で iOS エンジニアをしている@akatsuki174です。 前回は Auto Layout で登場する基礎的な制約について書きました。 今回は前回の知識を踏まえた上で、もっと複雑な条件でUIを組みたい時のことについて書きたいと思います。 ※例によって、わかりやすさを優…

非 iOS エンジニアのための Auto Layout 入門-基礎編- #Zaim

はじめに こんにちは。Zaim で iOS エンジニアをしている@akatsuki174 です。 iOS アプリのレイアウトを作る上で Auto Layout は非常に重要です。これのおかげでサイズが異なる端末でも比較的楽に対応できます。 ここでは主に iOS エンジニアではない人向けに Auto Layout とはどんなものなのか説…