nogson

中年ですが大した実績もないデザイナーです。 UIデザインと、フロントエンド開発、バック…

nogson

中年ですが大した実績もないデザイナーです。 UIデザインと、フロントエンド開発、バックエンド開発見習いとAWS見習いをしています。 https://satofaction.net/

Style Dictionaryでデザイントークンの作成にチャレンジ

現在、私は自社プロダクトのデザイン業務に携わっています。 プロダクトは自分が担当しているもの以外にも複数ある為、その他の兄弟プロダクトと一貫したユーザー体験ができるように意識する必要があります。 しかし開発が進むと色が少し違ったり、フォントサイズやマージンが異なるなど…iOSやAndorid、Webなどのプラットフォームごとに微妙に異なるUIが生まれてしまいます(仕方がないことですが)。 そこで、デザイントークンを作成し、共通化する仕組みを導入することを考えました（他社の

nogson

    • Figmaのプラグイン作成入門

      こんにちは。普段はUIデザイナーとして業務を行っています。 UIデザインの作業ではFigmaを利用しており、便利なプラグインを日々利用させていただいており、自分でもいつか作ってみたいなと思っておりました。 そこで冬休みの目標として、Figmaのプラグインをなにか作ってみることにしました。 その際の手順などをメモとして残しておこうと思っています。 サンプルプラグインを作成まずはFigmaで用意されているサンプルプラグインを実行できるところまでやってみます。 サンプルプラグ

      nogson

      • Figmaのレイヤー周りでよく使う機能と、最近覚えたことのメモ

        レイヤー周りでよく使う機能と、最近覚えた少々のメモです。 レイヤーの名前を一括変換レイヤーの名前を一括で変換する方法です。 ショートカットは「Cmd + R」(Mac)です。 Match(optional)に正規表現が使えるようで、選択中のファイルの中から特定の文字列だけリネームすることもできるようでした。 詳しくはこちら。 オブジェクトの表示、非表示を切り替える選択中のレイヤーの表示非表示を「Cmd + Shift + H」で切り替えることができます。 また、「Cmd

        nogson

        • TouchDesignerでデザインパーツを作る

          TouchDesignerをご存知でしょうか。 TouchDesignerは、ノードベースのヴィジュアルプログラミングツールです。 オペレーターと呼ばれるプログラムのモジュールをつなげることで、コードを書かなくてもビジュアルプログラミングができる開発環境です。 もちろんプログラミングを書くこともできます。 表現自体は色々できるみたいなのですが、リアルタイムで操作する映像表現などによく使われるみたいです。 音楽に映像を同期するオーディオビジュアライズなどでも使われます。

          nogson

        Style Dictionaryでデザイントークンの作成にチャレンジ

        nogson

          Figmaのテキストまわりで知ってて当たり前そうなんだけど知らなかったこと

          テキストボックスのサイズを変更するとボックスサイズが固定された場合の対処当たり前なんですが、テキストボックスのサイズを変更すると、変更後のサイズで固定されます。その為テキストの量を変更すると、 テキストが、ボックスからはみ出てしまう場合があります。 テキストボックスのサイズを固定からAutoにするには、以下の設定に変更します。 テキストの上下にスペースができた場合の対処和文の場合？テキストの上下に余分なスペースができます。 スペースを無くす場合は、Line height

          nogson

          Figmaのテキストまわりで知ってて当たり前そうなんだけど知らなかったこと

          nogson

          FigmaのArtboard Studio Mockupsで モックアップを簡単に作ってみる

          UIやロゴなどをデザインする際に、実際に使われた場合のイメージをしやすくする為、スマートフォンの実機や名刺などのイメージを利用したモックアップを作る場合があります。 その際にFigmaのプラグインにある、Artboard Studio Mockupsを利用すると便利そうです。 Artboard Studio Mockupsはその名の通り、モックアップ画像を作成する為のサービスです。 こちらがFigma用にプラグインを用意してくれているようなので、使ってみたいと思います。

          nogson

          FigmaのArtboard Studio Mockupsで モックアップを簡単に作ってみる

          nogson