sin1lo

sin1lo

  • Branding

  • UI/UX

  • Design System

  • Web Design

  • figma

    figmaのTips系備忘録。

すべてのマガジンを表示

Figma 同じ設定のフレームなのにストロークの色がなんでか違うよ困った件

まずはこのイメージを見てほしい。 ２つのフレームは全く同じストロークとFillの塗で、インナーシャドウの設定も同じです。なのにストロークの色が違うように見えませんかね。見えます。見えますよね。私は見えます。 ピッカーでとっても実際違います。 実はこれ、初めてではなく、何度かやっていて、その度に 悩む 解決 忘却 なんじゃこりゃ？ を繰り返してます。なので備忘録。 まずこれが上の画像のスペック。 これが下の画像のスペック。 違いはこれです。 Clip contentが

sin1lo

    • Wordpressサイトが/wp/になってるときの対処。

      wordpressサイト立ち上げたはいいが、ルートにインデックスが無い、というケースがしばしばありました。理由は、 ・校正サイトとして/wp/を使い、OKになったらルートにUPする予定だった ・wp最初の設定でサイトリンクが/wp/になった と言う感じでしょうか。 1.インデックスファイルを移動 まず、wp以下のindex.php、htaccessをローカルにコピー。wp以下の両方はそのまま消さずに置いておく。 2.index.phpを編集する コピーしたindex.

      sin1lo

      • Apple VisionOS用のGUI作成をしてみた

        VisionProが会社にやってきた。会社と社長がVR/MR界隈に強いのでアーリーアダプトしてきた。それで試したわけですが、Apple TVのImmersiveコンテンツのデモがやばい。 アリシア・キーズが目の前で歌うわけよ。Live独り占めなのよ。崖っぷちの綱渡りとかも臨場感たっぷりで見れるわけよ。サワれる距離の眼の前で猛獣が飯食ってたりするのよ。まじでビビるわけよ。これ見た後は普通のテレビが寂しく見えるわけよ。新しいジーンズ試着室で履いた時に足元に転がっている今まで履い

        sin1lo

        • Figma Multi Edit（マルチ編集）①オブジェクト編

          基本はこのプレイグラウンド通りやればOK 以下ができること 別フレームの複数オブジェクトをリサイズ、調整、プロパティ編集ができる 別フレームの複数テキストを同時に編集 バリアント内の同時編集 つまり新機能として同じレイヤー名のオブジェクトをページ内から検索して選択状態にするボタンが追加された、ということです。そのボタンがこれ。 ショートカットは　option + command + A　だす。便利やね。 一個選択して、ボタンを押すとこのような同時選択状態になると

          sin1lo

        マガジン

        • Branding
          6本
        • UI/UX
          16本
        • Design System
          12本
        • Web Design
          2本
        • figma
          25本
        • GUI
          5本

        記事

          Figma Variablesで%を変更するUIを変数使ってプロトに仕込む

          毎度頭ごちゃごちゃVriablesです。 さて、UIのプロト作成で左右のシェブロンを押すと真ん中の設定値が可変するUIを検討しました。数値の飛びと動きを参考に伝えたいのでプロトタイプ化することにしました。こんな仕様。 左右に設定を可変させるシェブロン（-と+） 設定値は10刻み 単位は% ＋（右）を押すと10ずつUP、ー（左）を押すと10ずつDown とりあえずは以下のGUI。でベースのUIがとりあえずこんな感じ。note用に加工済み。 STEP.1 数字Vari

          sin1lo

          Figma Variablesで%を変更するUIを変数使ってプロトに仕込む

          sin1lo

          MacBook Pro 2017 15inchを初期化したらHigh Sierraがインストールできず危うく文鎮化するとこだった件

          お時間無い方は目次の「解決」から読んでください。 ことの経緯（ちょっと長い、半分愚痴） 急ぎの仕事でFigmaでプロト作ってたんですよ。 あんまりに急ぎだったんで、大量のアバターアイコンを作るときにレイヤーで高画質の人物イラストを人数分仕込んだんですよ。多分３０人以上。そのアバターをcomponentして大量の画面やその他のcomponentに仕込んだわけですよ。そしたら信じられないくらいそのFigmaファイルが重くなりまして。ビビったわけですよ。前にも一度やったことあっ

          sin1lo

          MacBook Pro 2017 15inchを初期化したらHigh Sierraがインストールできず危うく文鎮化するとこだった件

          sin1lo

          Figma : Interactive components 可変ボタンはコンポーネントでPrototype作っとくと便利

          とりあえず正座してこれ観てください。はっきりいいますが私は一年以上これできるの知りませんでした！ ようは、VariantのComponentの段階で各パーツにPrototypeの定義しておくとプロトに反映されて画面遷移なくその場でアクションできます。プロトのための画面変化バリエーションを沢山つくんなくていいということです。 例えばこんなんあるやないですか。 こういうON/OFFをPrototype Modeにして繋げちゃうんですよ。VariantのProperty=1

          sin1lo

          Figma : Interactive components 可変ボタンはコンポーネントでPrototype作っとくと便利

          sin1lo

          Figmaで作ったポスターをCMYK出力

          展示会用ポスターをイラレ立ち上げるの面倒なので慣れ親しんだFigmaで作成。 出力側の要求仕様にCMYKの指示は無いのですが、もしかしてを考慮してCMYK出力できる方法を検討しました。 版下サイズ検討 要求の版下サイズ（mm）をpxに換算して版下サイズを決定します。 こちらのサイトで参考に。 1 ピクセル [px] = 0,264 583 333 333 33 ミリメートル [mm] ということだそうです。多少の誤差が出るので裁ち落とし前提でレイアウトを検討します。

          sin1lo

          Figmaで作ったポスターをCMYK出力

          sin1lo

          Dsign Systemの備忘録（随時追加）

          SmartHR Design Systemhttps://smarthr.design/products/ Salesforce Lightning Design SystemMaterial Design (Google)https://m3.material.io/

          sin1lo

          Dsign Systemの備忘録（随時追加）

          sin1lo

          FigmaのVariablesを攻略する（決心をした、書き途中/都度Update10/18）

          概念はわかるし絶対強力なのもわかってるVariablesはマストで攻略必至な機能。しかしふらっと触ってわかるほどシンプルではないので布団の上で身悶える日々。が、いつまでも遠回りはできないのでFigmaの攻略動画を見ながら探っていく決心をしたのです。 基本、上記の動画見ながらステップbyステップでデモ作成していくと、ちょうど9:00くらいで「ギャッ！！」となり、一瞬にして理解できます。なのでまず最初の10分は正座して焦らずにじっと見続けることをおすすめする。これ考えた人すげー

          sin1lo

          FigmaのVariablesを攻略する（決心をした、書き途中/都度Update10/18）

          sin1lo

          お知らせのタイムスタンプの考え方

          お知らせやSNSなどで使うエントリーされた記事の時間表示。 これの設定値を考えてみました。 いきなり結論です。 ・1H未満　分（例 3分） ・1H以上~24H未満　時間（例 3時間） ・24H以上~ 7日未満　日（例 3日） ・7日以降　日付表示（例 2023年3月31日） 基本は、最近来たお知らせに対して「今さっき来た」という感覚をもたせることが大事かなと思いました。過去は時系列的な過去感を類推できればOKと思います。「あ〜だいたいあの頃か、。」のような感覚でし

          sin1lo

          お知らせのタイムスタンプの考え方

          sin1lo

          Figmaのプロトタイプのスクロールの設定が変わっていたこと：メモ

          モーダル内のスクロール仕様でフロントエンジニアと「どっち？」になったのでプロ卜作成しようとしたが、「Fix position when its scroll」のチェックが消えてるやんか・・・。 正解はPrototypeの中に移動していた。 まあ、たしかに同類の機能群やオブジェクトは同じ場所に集約するべきと思うが、かなり混乱したぞ。ここにあるよ。 固定させたいFrameなりを選択して、PrototypeTABを押すとPositionとOverflowの設定がありやす。これ

          sin1lo

          Figmaのプロトタイプのスクロールの設定が変わっていたこと：メモ

          sin1lo

          Figmaで写真素材をmaskせずに切り抜く方法

          仕事で回ってきたソーシャルアバターの謎素材を見て驚愕。写真なんだけどmaskとかされてない状態で丸く切り抜かれてる・・・。 結論：写真のパスを変形させて作成する（mask不要）いろいろいじって上記の結論です。それでは段取り。 通常、写真素材は4角にパスがあります。 それを位置を変えます。まず、中点にパスを出現させて、 角のパスを新し作った中点パスに移動させて吸収、ひし形を作成します。 各パスをbend toolでラウンドに。 完成。 これの利点は、 maskがい

          sin1lo

          Figmaで写真素材をmaskせずに切り抜く方法

          sin1lo

          Figmaのスタイルを移動する方法

          作成していたPJのiOSやAndroidデザインが固まって、このときに作ったフォントスタイルなどを統合コンポーネントや社内ガイドラインに移動させて、今後これをマスターにしてその他案件も統一したい、などのときに便利。 スタイルを移動（Figmaヘルプより）「スタイルを元のライブラリ ファイルから別のファイルに移動することはできません。代わりに、移動先のファイルを開き、スタイルをそのファイルに取り込みます。」 う〜む、どういうこっちゃ。実験してみたが移動しているように見えるが・

          sin1lo

          Figmaのスタイルを移動する方法

          sin1lo

          ヒューリスティック/インスペクション

          HCDnetのセミナーの説明で端的にわかりやすく説明していたので備忘録として転載。 ユーザビリティ評価の中でもユーザビリティ・インスペクションといわれる分野で、人の認知や身体のしくみの知識や、経験則に基づいて、仕様の改善すべき点を見つけていく手法です。評価手法ではありますが、裏返せば設計の時のガイドラインとなります。本講座では、エキスパートレビューについて、演習形式で学びます。ユーザビリティの専門家が、人間特性など様々な知識や経験に基づき、対象のユーザーの行動を想定しながら

          sin1lo

          ヒューリスティック/インスペクション

          sin1lo