初公開！「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank
こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークンの設計」についてご紹介しようと思います。 デザイントークンとは？ そもそもデザイントークンとは、色、タイポグラフィ、サイズ、不透明度、影などのデザインをするための最小要素のことであり、スマートバンクではデザインの一貫性を保ったり、関わるメンバーがよりデザインに対する共通認識を持てるようにして、プロダクトの価値提供を早くするために定義しています。 まず完成形です。このあと説明する様々な工程を経て、以下のようなデザイントークンをJSONで定義しました。（すべて記述するとかなり長く
CRAからViteへ移行して190倍高速なdev server起動を得る - inSmartBank
ある日突然、あなたに190倍（当社比）高速なdev serverができたらどうしますか...？ この投稿ではWebアプリケーションのビルドツールをCreate React AppからViteへと移行した背景・手順・結果について説明します。 Vite等のビルドツールやフロントエンドアプリケーションの開発体験に興味・関心がある方、中でもCreate React App（以下、CRA）を利用していてdev server起動やHot Module Replacementの速度に課題を抱える方の参考になれば幸いです。 前置き SmartBankが提供するB/43の開発チームはユーザーが利用するモバイルアプリだけでなく、カード発行会社としてのバックオフィス業務を支援する管理機能を内製しています。 本人確認業務に用いる画面イメージ。データはもちろんダミー B/43にちなんでA/43*1 と名付けられたこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
