藤崎 猫

UI / UXデザイナー デザインの本を出版しています。

藤崎 猫

UI / UXデザイナー デザインの本を出版しています。

最近の記事

  • 固定された記事

『FigmaでUIデザイン』 電子書籍 90日間無料公開中

はじめまして。UI / UXデザイナーの藤崎 猫です。 先日、Figma & UIデザイン初心者向けに『FigmaでUIデザイン』を発売しましたので、こちらで少しだけ内容についてご紹介したいと思います。 どんな本なのか?内容としては、デザインツール「Figma(フィグマ)」の基本的な機能について学びながら、実際にアプリ制作を行う中で制作経験も積むことができるというものになっています。 なぜ出版したのか?実は普段自分自身でデザインを勉強したり、後輩を指導していく中で、「デザ

    • ブール値を使ったアイコン付きボタンの作り方 - Figma

      こんにちは、藤崎 猫です。 『FigmaでUIデザイン』という本を出版して、ブログでは本に入りきらなかったデザインノウハウや、Figmaの使い方についてお伝えしていきます。 今回はコンポーネントのブール値プロパティを使用した、アイコン付きボタンの作り方を解説していきます。 前回オートレイアウトを使ってテキスト量に応じてサイズが変わるボタンの作り方についてご紹介したのですが、本記事はその続きとしてアイコン付きボタンを作成していきます。 <Kindle Unlimitedで無

      • オートレイアウトを使った横幅可変のボタンの作り方 - Figma

        こんにちは、藤崎 猫です。 『FigmaでUIデザイン』という本を出版して、ブログでは本に入りきらなかったデザインノウハウや、Figmaの使い方についてお伝えしていきます。 今回はオートレイアウトを使った横幅可変のボタンの作り方をご紹介していきます。 特にコンポーネントを使ってデザインする場合は、所定のテキストを編集しながら使っていくことが多いため、テキストの中身が変わっても崩れないボタンを作る必要があります。 作り方自体は難しくないので、ぜひ取り入れてみてください。 <

        • カルーセルの作り方 - Figma

          こんにちは、藤崎 猫です。 『FigmaでUIデザイン』という本を出版して、ブログでは本に入りきらなかったデザインノウハウや、Figmaの使い方についてお伝えしていきます。 今回のテーマはカルーセルの作り方です。FigmaでWEBデザインやUIデザインをしていると、カルーセルのUIをデザインすることもあるかと思います。しかし動的な要素だからこそ、実際に動かしてみないと良いデザインになっているかが確認できない、あるいはレビューをお願いする上でも不便といったことがあるかと思いま

        • 固定された記事

        『FigmaでUIデザイン』 電子書籍 90日間無料公開中

          コンポーネントのバリアント設定 - Figma

          こんにちは、藤崎 猫です。 先日『FigmaでUIデザイン』という本を出版して、そこに入りきらなかったデザインノウハウや、Figmaの使い方についてブログでお伝えしていきます。 今回はコンポーネントのバリアント設定についてです。 <Kindle Unlimited & ペーパーバッグで公開中!> バリアントとはまずバリアントについて簡単にご紹介します。  「バリアント」とはFigma特有の機能の1つで、パーツのタイプ違いや状態別のデザインなどを1つにまとめ、管理できる機

          コンポーネントのバリアント設定 - Figma

          古いデザインを復活させる方法 - Figma

          こんにちは、藤崎 猫です。 2月に『FigmaでUIデザイン』という本を出版し、そこに入りきらなかったデザインノウハウや、Figmaの使い方をNoteにてご紹介しています。 今回のテーマは、Figmaで古いデザインを復活させる方法についてです。 <Kindle Unlimited & ペーパーバッグで公開中!> 古いデザインを復活させたい…!「誤って作成していたデザインを削除してしまった」 「編集前のデザインの方がよかったので、もとに戻したい」 デザインをしているとそ

          古いデザインを復活させる方法 - Figma

          サイズを簡単に2倍にする方法 - Figma

          こんにちは、藤崎 猫です。 先日『FigmaでUIデザイン』という本を出版して、ブログでは入りきらなかったデザインノウハウや、Figmaの使い方についてお伝えしています。 今回のテーマは、Figmaでサイズなどの値を簡単に2倍にする方法についてです。作成したオブジェクトをパパッと倍数で拡大・縮小させたいという方はぜひご活用ください! <ペーパーバッグでも販売開始!> 横幅を簡単に2倍にする方法<STEP1> オブジェクトを作成 まずは変形さるためのオブジェクトを配置し

          サイズを簡単に2倍にする方法 - Figma

          デザイン整理にセクションを活用しよう - Figma

          こんにちは、藤崎 猫です。 書籍『FigmaでUIデザイン』にて紹介しきれなかったFigmaの使い方やデザインチップスを、Noteにてご紹介しています。 『FigmaでUIデザイン』については先日紙媒体での出版も開始しましたので、紙で読みたいという方はぜひ! それでは今回はFigmaのデザイン画面の整理についてです。 <ペーパーバッグでも発売開始!> Figmaでのデザイン整理デザインを作成したら、みなさんはどのようにPdMやディレクターに共有していますか? また、F

          デザイン整理にセクションを活用しよう - Figma

          書籍 『FigmaでUIデザイン』 - 紙媒体でも出版開始!

          こんにちは、藤崎 猫です。 先日出版した電子書籍『FigmaでUIデザイン』を紙媒体でも出版開始いたしました。 本を読むのは紙派という方も多いと思いますので、アプリのUIデザインを行いながらFigmaを学びたい方はぜひ手に取ってみてください! せっかくなので、本記事では『FigmaでUIデザイン』がどのような本なのか、著作の構成や内容について少しご紹介したいと思います。 <ペーパーバッグ版も発売開始!> 著作の構成本書はFigmaの機能ごとに基本の概念や使い方を理解する

          書籍 『FigmaでUIデザイン』 - 紙媒体でも出版開始!

          コンポーネントがうまくいかないときは、「レイヤー構造と名前」に原因があるかも? - Figma

          こんにちは。藤崎 猫です。 先日『FigmaとUIデザイン』という本を出版し、こちらのブログではそこに入りきらなかったデザインノウハウをご紹介していきたい思います。 今回はFigmaのコンポーネント設計でうまくいかないときの原因の1つについてです。 <Kindle Unlimitedで無料公開中!>  Figmaにおける不具合Figmaでコンポーネントを作っていると、たまに以下のような不具合に遭遇する場合があります。 不具合の原因は場合によって異なりますが、少なくとも上

          コンポーネントがうまくいかないときは、「レイヤー構造と名前」に原因があるかも? - Figma

          アイコンのつくり方 - Figma

          こんにちは、藤崎 猫です。 先日『FigmaでUIデザイン』という本を出版し、その中に入りきらなかったデザインノウハウや、Figmaの使い方をブログにてご紹介しています。 今回は、シェイプを変形させてアイコンをつくる方法についてご紹介したいと思います。 <Kindle Unlimitedで90日間無料公開中!> アイコンの3つの作り方と違いFigmaでのアイコンのつくる際には、おもに3つの方法、 1. ペンツールでゼロからつくる 2. シェイプを合体させてつくる 3. シ

          アイコンのつくり方 - Figma

          「4の倍数」でのUIデザインのつくり方 - Figma

          こんにちは、藤崎 猫です。 先日『FigmaでUIデザイン』という本を出版して、ブログでは入りきらなかったデザインノウハウや、Figmaの使い方についてお伝えできればと思っています。 今回のテーマは「4の倍数」でのデザインのつくり方についてです。 <90日間 Kindle Unlimited で無料公開中!> なぜ4の倍数でつくる?『FigmaでUIデザイン』のナレッジ編(p.32)にて、UIデザインでは4の倍数や、8の倍数でデザインを作成するという内容をご紹介しました。

          「4の倍数」でのUIデザインのつくり方 - Figma