はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデ…

UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog

377 Followers, 984 Following, 1,038 Posts - ぴーや (@taka_piya) on Instagram: "#ぴーやご飯 と #写りたがる妻 との記録 
旭川→函館→東京
🐕️マルチーズ（キュロ）アニフェアお台場出身
カモノハシが好き"

ぴーや (@taka_piya) • Instagram photos and videos

斜め上のSTUDIO使い  最近はノーコードツールが台頭してきており、気軽にデジタルプロダクトを作る環境が整ってきましたが、そんなかびっくりしたツイートが。   ▼STUDIOでのプロトタイピングは非デザイナーさんと一緒にレゴみたいに進められて便利なんです  ①PMと一緒にホワイトボードで落書き ↓ ②デザイナーがSTUDIOでざっくりのコンポーネント・ブロックを作る ↓ ③PMが文言や図など挿入したり順番変えたりする ↓ ④ライブプレビューでみんなで触ってみる https://t.co/HFyBlJnqqJ — かねこつよし (@tsuyoshi_osiire) January 25

STUDIOを使ってプロダクトのプロトタイプを作る｜Takahiro Hayashi(ぴーや) / LayerX, MDM

この記事は&nbsp;弁護士ドットコム AdventCalendar2021 の10日目の記事です。 昨日は@michimaniさんの「AWS Step Functions を使った翻訳ワークフローを AWS CDK v2 （TypeScript）で構築してみた話」でした。  はじめに  弁護士ドットコムの林（@taka_piya）です。 新規事業の「弁護士ドットコム 業務システム」を立ち上げのためにデザイナーとして入社し3年になりました。 入社から今までプロトタイプを作ることにこだわって活動してきましたが、実際の取り組みについて紹介します。  アイデアの価値は誰にもわからないので、時

スプレッドシートでプロトタイピングしたら、良いことしかなかった｜Takahiro Hayashi(ぴーや) / LayerX, MDM

この記事は、こんな方へおすすめの記事です👀 ・金融系サービスのやっていることの実例を知りたい人 ・LayerXのFintech事業に興味がある人   LayerXでデザイナーをしているぴーや（@taka_piya）です。 三井物産デジタル・アセットマネジメント（MDM）に出向し、デジタル証券を活用した資産運用サービス「ALTERNA（オルタナ）」のUIデザイン、フロントエンドの部分を担当しています。  転職から1年、オルタナもリリースしてからちょうど1年が経過しました。  そういえば、資産運用系のプロダクトデザインの情報って少ないんですよね。 転職するときになかなか想像しにくいなーと思

チームで体験を支える、ALTERNA（オルタナ）のデザインプロセス｜Takahiro Hayashi(ぴーや) / LayerX, MDM

弁護士ドットコムの林（@taka_piya）です。  Figmaを使ってバナーを仕組み化するテンプレート(通称:バナーマシーン)を作り半年間運用してきたので、今回は「バナーマシーンの作り方」「メリット」「やってみて分かった課題」の話をしたいと思います。  背景〜バナー作成を効率化したい  所属している弁護士業務支援サービスでは、弁護士向けセミナー動画サービス「弁護士ドットコム オンラインセミナー」を提供しています。 弁護士ドットコム オンラインセミナーのトップ画面 月に何本か動画追加した際、動画に気づいてもらうためサムネイルやバナーを作りアピールする必要があります。 今までこの画像作成

Figmaでバナーを自動生成するバナーマシーン🎰を作り効率化した話｜Takahiro Hayashi(ぴーや) / LayerX, MDM

LayerXから三井物産デジタル・アセットマネジメント(MDM)に出向し、「ALTERNA(オルタナ)」のデザイナーをしているぴーや(@taka_piya)です。  最近はALTERNAのUIデザインからフロントエンドの実装、LPの改善を主に担当しています。  先日ALTERNAで「保有資産画面」のUIアップデートを行いました。 今回の記事は「券面のない「デジタル証券」のUI」について、デザインプロセスの一部ご紹介します。UIデザインする際に少しヒントになれば!  ⚠この記事はALTERNAにおけるデザインプロセスを紹介を目的にしたものであり、特定の商品の勧誘をするものではありません。

券面のない「デジタル証券」のUIを考える｜Takahiro Hayashi(ぴーや) / LayerX, MDM

2024/03/19追記 現在はvariables周りのプラグインも充実してきているため、自作でプラグインを作る必要はなくなってきていると思います。   こんにちは。株式会社LayerXのぴーや(@taka_piya)です。4月に入社し、今は三井物産デジタル・アセットマネジメント(MDM) にデザイナーとして出向しています。  さて、先日のFigma Config2023で、大規模なFigmaのアップデートが実施されました。なかでもVariablesは、個人的に待ち望んでいたアップデートでした。 この記事ではVariblesの利用例と、より活用するために制作したプラグインについて紹介し

FigmaのVariablesを利用して、デザインから実装までのトークンを共通化する｜Takahiro Hayashi(ぴーや) / LayerX, MDM

デザイナーとしてLayerXを初期から支えるsaikoさんの、これまでのキャリアを伺いました！小さな頃から目指していた、美術の先生からキャリアをスタートして、現在のキャリアに至った経緯を語っていただきました。異業種にキャリアを変えるきっかけになった話や、FinTech事業に対する熱い想い、姉さんのようなsaikoさんのパーソナリティな部分も深堀っています！

#20 FinTech×熱い想い×デザイナー（ゲスト:LayerX saikoさん） by YOWATARI RADIO

Log in to Twitter to see the latest. Join the conversation, follow accounts, see your Home Timeline, and catch up on Tweets from the people you know.

Log into Facebook to start sharing and connecting with your friends, family, and people you know.