デザインシステムのダークモード対応 - enechain Tech Blog

2024/10/30 13 users enechain Tech Blog ダークモード対応

こんにちは。enechainで働いている takurinton です。 これまでのenechainのデザインシステムではdark modeの提供はしておらず、プロダクト側で必要に応じて状態とデザイントークンを保持した上で切り替えてもらうという方式をとっていました。 しかし、事業拡大やプロダクト側からの要望によりdark modeのデザイントー... 続きを読む

「Tokens Studio for Figma」を使用してデザイントークンを管理する（基本編）

2024/09/17 11 users トークン 基本編 UI要素 デザイナー プロダクト

デザイントークンとは、UI要素のスタイルに関する値を定義したものです。デザイナー、開発者、プロジェクトマネージャーなど、プロダクトに関わる関係者がトークンを使用することで、コミュニケーションコストを削減し、正確な情報共有を実現できます。また、変化に強いコンポーネントを作成するためにも欠かせない要素... 続きを読む

デザインシステムの開発者体験向上の試み - enechain Tech Blog

2024/06/11 28 users enechain Tech Blog デザインシステム

はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見... 続きを読む

はじめてデザインの同人誌をつくった話

2023/10/10 21 users 同人誌 デザイン putchom つくりかた イベント

こんにちは。株式会社スマートバンクで「家計簿プリカB/43」というサービスをデザインしている putchom です。 デザイン読書日和というイベントで今回はじめて『デザイントークンのつくりかた』という同人誌をつくったので、どうやってつくったか、どうやって売ったか書いてみようと思います。 きっかけ デザイナーがあ... 続きを読む

初公開！「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank

2023/06/19 12 users putchom inSmartBank スマートバンク 構築

こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークン... 続きを読む

ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - 方針と全体像の紹介 - ANDPAD Tech Blog

2023/03/02 19 users figma React ANDPAD Tsukuri 実装

この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します アイコンやデザイントークンに対応する実装は Figma から取得し... 続きを読む

デザイントークンって何？｜seya｜note

2022/05/16 8 users seya｜note ワーキンググループ 定義 とこ 標準化団体

「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこ... 続きを読む