Blau

デザインやデザインツールの操作法などの記事を書いていきます。

Blau

デザインやデザインツールの操作法などの記事を書いていきます。

ドラッグトリガーでオブジェクトを並び替え（Figma）

今回の記事では、オブジェクトの並び順をドラッグトリガーで操作できるプロトタイプの作成方法について記載します。 実際の挙動各オブジェクトをドラッグで並び替えできます。 作成方法まず初期状態のパターンを作成してオートレイアウトを有効化し、コンポーネント化します。 バリアントを追加して並び順を変更し、各並び順のパターンを作成していきます。 今回のように3つのオブジェクトで並び替えをさせる場合、6パターンのバリアントを作成することになります。 プロトタイプを設定します。 ド

Blau

    • カーソルに追従するホバーアニメーション（Figma）

      今回の記事では、Figmaプロトタイプ上でのカーソルに追従するホバーアニメーションの作成方法について記載します。 実際の挙動カーソルに追従するように黒のオブジェクトが移動します。 作成方法今回は6個のバリアントを含むコンポーネントを作成しています。 パーツの作成 まず初期状態のフレームを作成し、コンポーネント化します（バリアント1）。 今回は4段階にわけて表示させているため、全体横幅の25%ずつ黒部分が進む形でバリアントを作成しています。 そのため、下画像のようにグレ

      Blau

      • スマートアニメートのイージング（Figma）

        今回の記事ではFigmaプロトタイプのスマートアニメートにおける『イージング』部分の設定について記載します。 イージングとは前提としてイージングとは、アニメーションなどの動きに加減速を加える設定のことです。 下画像の例ではアニメーションの総時間は同一のまま、動きの部分を調整することで差を生じさせています。 イージングはプロトタイプのインタラクション内、下画像の赤枠部分から選択できます。 イージングの設定Figmaにはイージングの設定として以下の項目があります。 項目の

        Blau

        • 横幅に応じて折り返すタグの作り方（Figma）

          今回の記事では要素の横幅に応じて折り返すタグの作成方法について記載します。 実際の挙動タグ内の文字数を変更すると、一定範囲外に出ないように折り返しが発生します。 折り返すタグの作成方法タグ タグのパーツを作成後、オートレイアウト化することでテキスト部分とシェイプ部分の間隔を固定できます。 下画像では左右12pxの上下1pxで固定しています。 間隔を固定した状態にすることで文字数の変更に応じてシェイプ部分を伸ばせます。 折り返し オートレイアウトを使うことで折り返し

          Blau

        ドラッグトリガーでオブジェクトを並び替え（Figma）

        Blau

          追従ナビをスクロール位置に応じて変化させる（Figma）

          今回の記事では、画面に追従ナビの状態をスクロール位置に応じて変化させる方法について記載します。 実際の挙動スクロールに応じて追従ナビの対応部分が強調するように変化します。 作成方法今回は以下の記事に記載している方法を使用しています。 全体の構成は下画像の通りです。 遷移時にスクロール位置を保持するためにアートボード名のプレフィックス（接頭辞、下画像の『Page/』の部分）が同一になるように注意してください。 追従ナビ部分には【スクロールの動作_位置：追従】を設定します

          Blau

          追従ナビをスクロール位置に応じて変化させる（Figma）

          Blau

          一定方向からの画像切り替えアニメーション（Figma）

          今回の記事では、Figmaプロトタイプ上での一定方向からの画像切り替えを行うアニメーションの作成方法について記載します 実際の挙動ホバーすると上から表示領域が伸びてきて画像が切り替わります。 マウスリーブでパターン1は下から上へ戻り、パターン2では再度上から下へ表示領域が伸びます。 作成方法まず切り替え前の画面と切り替え後の画像を用意します。 この際、画像は任意サイズでマスクします。 切り替え後の状態が上になるように重ね、コンポーネント化します。 切り替え後のシェイプ

          Blau

          一定方向からの画像切り替えアニメーション（Figma）

          Blau

          覆い隠してから表示するアニメーション（Figma）

          今回の記事では、Figmaプロトタイプ上で文字などのオブジェクトを覆い隠してから表示させるアニメーションの作成方法について記載します。 実際の挙動長方形シェイプが左から伸びて右へ縮むアニメーションの後で文字が表示します。 『ラグ無』では4行全てが同時に表示が切り替わり、『ラグ有』では切り替わりタイミングをズラして表示しています。 作成方法まずテキスト（覆い隠してから表示したい）部分を作成し、同サイズのフレームで囲みます。 1行ずつ囲むようにフレームを作成します。 1行

          Blau

          覆い隠してから表示するアニメーション（Figma）

          Blau

          定規及びガイドの表示（Figma）

          今回の記事ではFigmaでの定規とガイドの表示方法について記載します。 定規定規は【メインメニュー】→【表示】→【定規】、もしくは『Shift』＋『R』キーで表示できます。 ガイドガイドは表示した定規の目盛部分からドラッグすることで設定できます。 ドラッグの終了地点がフレーム上の場合はそのフレームのみのガイドとなり、キャンバス上の場合には全体のガイドとなります。 なお、定規を非表示にするとガイドもあわせて非表示になります。 設定したガイドは再度定規の目盛部分へドラッグす

          Blau

          定規及びガイドの表示（Figma）

          Blau

          寸法ツールの使い方（illustrator）

          今回の記事ではillustratorの追加機能である『寸法ツール』の使用方法について記載します。 機能寸法ツールを使用すると下画像のように任意の部分の距離、角度、半径などの寸法を測定して表示させることができます。 使い方寸法ツールは下画像赤枠部分のアイコンから選択できます。 寸法ツールを選択するとタスクバーが表示されます。 下画像にある『寸法』各項目を選択することで対応した寸法の測定ができます。 長さ寸法 長さ寸法では以下の2パターンの方法で寸法を計測できます。

          Blau

          寸法ツールの使い方（illustrator）

          Blau

          立体的な文字の作り方（Figma）

          今回の記事では立体的な文字の作り方について記載します。 なお、今回の方法では『Blend』というプラグインを使用します。 また、エンボス加工風の立体的なデザインの作成方法については以下の記事に記載しています。 作成する立体文字今回は下画像のような文字を作成していきます。 プラグイン概要Blendはパスに沿ってオブジェクトを複製配置できるプラグインです。 パスとオブジェクトを選択した状態でBlendを適用してみます。 するとパス上にコピーオブジェクトを複数配置できまし

          Blau

          立体的な文字の作り方（Figma）

          Blau

          一定時間で他パーツと連動して切り替わるスライダーの作り方（Figma）

          今回の記事では一定時間で他パーツと連動して画像が切り替わっていくスライダー（カルーセル）の作成方法について記載します。 実際の挙動下のバーや○と連動してスライダーが動きます。 スライダーの作り方今回の記事では2パターンのスライダーを作成しています。 スライダーA スライダーAでは各スライドのバリアントをコンポーネント内に作成し、 スライド1→スライド2 スライド2→スライド3 スライド3→スライド1 へと『アフターディレイ』『ディゾルブ』のプロトタイプを設定し

          Blau

          一定時間で他パーツと連動して切り替わるスライダーの作り方（Figma）

          Blau

          【小ネタ】横スクロールのプロトタイプをマウスの縦スクロールで動かす方法（Figma）

          今回の記事では、プロトタイプ上で横スクロールのデザインをマウスの縦スクロールを使って動かす方法について記載します。 注意点今回の方法はプロトタイプ上の制約があり、使いづらいです。 その為、使用するのは「横スクロールの操作感確認」などのワンポイントに抑えた方がよさそうです。 実際の挙動下Gif画像からではわかりにくいですが、ドラッグではなくマウスの縦スクロールで画面を横にスクロールしています。 横スクロールをマウスの縦スクロールで動かす方法まず、今回の方法では以下の制約が

          Blau

          【小ネタ】横スクロールのプロトタイプをマウスの縦スクロールで動かす方法（Figma）

          Blau

          スクロールを疑似的にプロトタイプのトリガーにする方法（Figma）

          今回の記事では、アニメーションなどのプロトタイプのトリガーを疑似的にスクロールにする方法について記載します。 なお、今回の方法では『マウスエンター』トリガーを使用します。 その為、マウスカーソルを使わないモバイル操作でのプロトタイプではうまく機能しません。 『ドラッグ』トリガーでのアニメーション開始については以下の記事をご確認ください。 実際の挙動『Concept』『Cats』の部分までスクロールすると、それぞれスマートアニメートでのアニメーションが表示されます。 また、

          Blau

          スクロールを疑似的にプロトタイプのトリガーにする方法（Figma）

          Blau

          文字化けするデータを元の見た目でアウトライン化する方法（illustrator）

          今回の記事では、illustrator上で文字化けして表示されてしまうデータを元の見た目でアウトライン化する方法について記載します。 なお、今回の記事の方法はデータによっては対応できない場合もあります。 またテキスト自体をアウトライン化する方法であるため、文言の変更はできません。 あらかじめご了承ください。 文字化け他人が作成したりオンラインデザインツールから保存したファイルを編集するためにllustrator上で開こうとした場合、対応するフォントがPCにインストールされ

          Blau

          文字化けするデータを元の見た目でアウトライン化する方法（illustrator）

          Blau

          『テキストからベクター生成』でベクター画像を生成する（Illustrator）

          今回の記事では記事執筆時点でIllustratorのベータ機能である『テキストからベクター作成』を使用した、ベクター画像の生成方法について記載します。 『テキストからベクター生成』の使い方『テキストからベクター生成』はプロパティ内及び【テキストからベクター生成】ウィンドウから操作できます。 プロンプトに生成したい画像のワードを入力後【生成】を選択することで、画像を生成することができます。 また、長方形ツールなどで作成したオブジェクトを選択した状態で生成すると、そのサイズ

          Blau

          『テキストからベクター生成』でベクター画像を生成する（Illustrator）

          Blau

          Figmaの各種書き出し保存方法（Figma）

          今回の記事では、Figmaにおけるファイルや画像の書き出し保存方法について記載します。 1. ローカルコピーを保存プロジェクト全体を『.fig』という形式でローカル上に保存する方法です。 【メインメニュー】→【ファイル】→【ローカルコピーを保存】から保存できます。 保存した『.fig』ファイルはFigmaにインポートすることで再度確認及び操作を行えます。 2. フレームをPDFにエクスポートプロジェクト内のフレームを一括でPDF形式で保存する方法です。 【メインメニュー】

          Blau

          Figmaの各種書き出し保存方法（Figma）

          Blau