Satoru Kawahara

いろいろなことに興味がありますが、デザイナーです。

Satoru Kawahara

いろいろなことに興味がありますが、デザイナーです。

マガジン

  • マネーフォワード・デザイン

    • 393本

    マネーフォワード所属デザイナーの共同マガジンです。各プロダクトのデザインプロセスや、全社横断のデザイン組織の取り組みについて発信します。デザイナー募集中! ▶応募はこちらから:https://hrmos.co/pages/moneyforward/jobs?category=1666322478647443459 ▶デザイナーサイト「Money forward Design」:https://design.moneyforward.com/

最近の記事

セットであつかうものをModeにいれる(Figma Variables)

先日Figmaから発表された新機能のModesの使いどころを色々と試していましたが、ワンセットであつかいたいものをModesにするのが良さそうだと感じています。逆に使いにくそうなところも分かってきたのでまとめました。 使いやすいところカラーテーマ 言語 レスポンシブ サイズセット 状態 (Variables、Modesの構成についての記事です。操作方法については触れません。またVariablesは2023年7月現在ベータ版です。最新の情報はFigmaのヘルプを確認

    • Figmaのローカルコンポーネントをライブラリに移動する方法(2023年1月版)

      Figmaのヘルプ「公開済みコンポーネントの移動」ではタイトルの通り、あるライブラリのコンポーネントを別のライブラリへ移動する方法が説明されています。 この記事の内容をすこし応用するとライブラリではないファイルのローカルコンポーネントをライブラリへ移動して再リンクすることができます。 (この記事は2023年1月時点の情報です。Figmaはアップデートが頻繁なので試す前に最新のヘルプを確認することをお勧めします。) 大雑把な手順移動元ファイルを一度ライブラリとして公開する

      • つくりかたをつくるための構造理解と抽象化

        普段、ソフトウェアのGUIをつくるため、文字を書いたり、テキストフィールドを置いたり、ボタンを置いたり、それらに色を割り当てたりします。これは、実際には何をデザインし、何を表現していることなのかということを最近よく考えます。 そのような視点で考えてみると、すべてのデザインされる要素にはかならずそのようにする理由がある、ということに気づくことができます。 デザインの理由と構造を知り、抽象化して考える事は、デザインをどのようにつくるのかということを考えるために重要なことです。

        • Figmaでmainブランチを疑似的にProtectする

          Figmaのブランチ機能が使えるようになった時、ひとしきり喜んだあと私が次に思ったのは GitHub の Protected Branch が使いたい!編集は必ずブランチでやりたい!ということでした。 ずーっとまだかなーと思っていたのですが、実はプロジェクトの権限などを調整すれば、すでに似た運用が出来ることを教えてもらったので、勢いでまとめて共有します。 (Figmaのブランチはビジネス(旧Organization)、エンタープライズプラン向けの機能です) ともかくオー

        セットであつかうものをModeにいれる(Figma Variables)

        マガジン

        • マネーフォワード・デザイン
          393本

        記事

          Dear Figma, どうして私がFigmaを愛するようになったのか

          これはマネフォデザイナーAdvent Calendar2021🎄⛄️ の5日目の記事です。今日は河原がお送りします。 これは私が、最初はしかたなく使っていたFigmaをこよなく愛するようになるまでのお話です。 Figmaとの遭遇 Figmaとの出会いは、その当時一緒に大型のプロジェクトを進めていたデザイナーがこういうツールも使っているんですよ。と紹介してくれた数年前。 そのときはまだバグも多く処理速度も「いわゆるウェブアプリ」の次元だったので、その当時の必要性からは採

          Dear Figma, どうして私がFigmaを愛するようになったのか

          今のFigmaで作れるボタン

          2020.09時点のFigmaでできる事を使って、ボタンコンポーネントをいくつか作ってみました。今のFigmaに何ができるかと、よく作るボタンの作り方を紹介します。 基本のボタン基本のボタンとして、アイコンとラベルが並んでいるものを作ります。 ・アイコンとテキストを並べて Auto Layout を適用する ・Auto Layout のフレームに色をつけたり角丸をつけたりする ・テキストレイヤーと、アイコンレイヤーにわかりやすい名前をつける 🤣 テキストのオーバーライド

          今のFigmaで作れるボタン

          OOUIを実装してわかった、同じ「目当て」を見る大切さ

          マネーフォワードのデザイナー、河原です。 最近、社内のデザイナーで「オブジェクト指向UIデザイン 使いやすいソフトウェアの原理」の輪読会をしました。 それまでは、なんとなく「オブジェクト指向UIデザイン」という言葉を聞いてわかった気になっていたのですが、みんなで読み、演習形式でオブジェクト抽出からレイアウトまでやってみたことで、オブジェクト抽出の難しさと、上手く整理できたときのシンプルさを学ぶことができました。 (※オブジェクト指向UI = Object Oriente

          OOUIを実装してわかった、同じ「目当て」を見る大切さ