スライド概要 プロダクトデザインに一貫性をもたらすデザイントークンは有用ですが設計が難しく、デザイン負債になりやすい一面もあります。既存の良くできた技術をうまく取り入れることで、0ベースでの設計を避け、リソースを割きすぎることなくトークン設計を行うことができます。今回は実例を交えながら設計方法を紹介します。
0から作らないデザイントークン | ドクセル
スライド概要 プロダクトデザインに一貫性をもたらすデザイントークンは有用ですが設計が難しく、デザイン負債になりやすい一面もあります。既存の良くできた技術をうまく取り入れることで、0ベースでの設計を避け、リソースを割きすぎることなくトークン設計を行うことができます。今回は実例を交えながら設計方法を紹介します。
サイボウズでkintoneのデザインシステム開発をしているトビ（@0b1tk）です。こんにちは。 今回はデザイントークン、特にセマンティックトークンの命名方法について掘り下げます。 まずはデザイントークンの定義について、W3Cから設立されたデザイントークンの仕様策定をするコミュニティ「Design Tokens Community Group」の定義を引用いたします。 Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. （訳：デザイン・トークンとは、色、スペーシング、タイポグラフィ・スケールなど、デザインシステムを構成する不可分の要素のことである） Design Tokens Community Group このデザイントークンの名前づけについて
ウェブのためのタイポグラフィシステム｜Kento Norita
ウェブにおけるユーザーとのコミュニケーションは「言葉」からはじまり、「言葉」を中心に行われます。 はじめに言葉があるからこそ、言葉を伝えるための媒体である「文字」を構成するための「タイポグラフィ」はウェブにおいて非常に重要な存在です。 タイポグラフィにはスクリーン上に文字を表示するだけに留まらない役割があります。 私たちは発話でのコミュニケーションを行う際に、声色、声の抑揚、声の大きさ、話す速度、表情など、多くの要素を柔軟に変化させています。これらの要素を変化させることで私たちはメッセージや人となりのスムーズな伝達を実現しています。 スクリーン上でのコミュニケーションも文字の色、形、配置などを変化させながら適切なタイポグラフィを構築することで、口頭でのコミュニケーションと同様にメッセージやアイデンティティなどをなめらかに伝達できるようになります。 適切に設計されたタイポグラフィはウェブのア
変更に強く柔軟なデザインシステムへ。 カラー管理にデザイントークンを導入して、実装フローに組み込むまで | Visional Designer Blog
こんにちは。HRMOS（ハーモス）プロダクト本部 プロダクトデザイン室の内野です。HRMOSのデザインシステム「Polyphony（ポリフォニー）」の連載記事第3弾は、デザインと実装を繋げるトークン管...
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita