こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークンの設計」についてご紹介しようと思います。 デザイントークンとは？ そもそもデザイントークンとは、色、タイポグラフィ、サイズ、不透明度、影などのデザインをするための最小要素のことであり、スマートバンクではデザインの一貫性を保ったり、関わるメンバーがよりデザインに対する共通認識を持てるようにして、プロダクトの価値提供を早くするために定義しています。 まず完成形です。このあと説明する様々な工程を経て、以下のようなデザイントークンをJSONで定義しました。（すべて記述するとかなり長く
Ubie Design Tokensを公開しました
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 Ubieではデザインのクオリティと生産性向上のためデザイン生産基盤の整備に力を入れています。 今回その一環として開発したデザイントークンをnpmパッケージとして公開しました。（現在はColorのみ。） 開発経緯 Ubie Design Tokens開発以前からデザイントークンのようなものは存在しており、CSS Variablesとして実装されていました。しかしユースケースを想定せず作った変数があったり定義が細かすぎたりしたことで「どの変数をどういう場面で使用すれは良いかわからない」という問題が発生していました。 そこで変数の定義を見直し、より実際のデザインに即したデザイントークンを策定するとともに、プロダクトごとの実装差異をなくすためのライブラリの開発に着手しました。 Colorの定義 Ubie Desi
デザイントークンって何？｜seya
「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこの W3C では Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. 訳: デザイントークンとは、色、スペーシング、タイポグラフィのスケールなど、デザインシステムを構成する不可分なピースのことです。 Design Tokens W3C Community Group https://github.com/design-tokens/commun
0から作らないデザイントークン | ドクセル
スライド概要 プロダクトデザインに一貫性をもたらすデザイントークンは有用ですが設計が難しく、デザイン負債になりやすい一面もあります。既存の良くできた技術をうまく取り入れることで、0ベースでの設計を避け、リソースを割きすぎることなくトークン設計を行うことができます。今回は実例を交えながら設計方法を紹介します。
デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo 拡張性と一貫性を兼ね備えたデザインシステムを構築したければ、デザイントークンは欠かせないツールです。この記事は、デザイントークンが重要な理由とその活用方法を紹介します。 ほどんどのデザイナーはデザインをつくり終えた後の、実装のフェーズも重要であることを理解しています。特に、デザインを複数のOSやデバイスに展開する段階では多くの問題が起こりがちです。そうした潜在的な問題を最小化するために、デザインシステムに頼る開発チームが増えています。 そして、デザインシステムの一部として広く使われるようにになったのがデザイントークンです。この記事では、デザイントークンとは何で、どのように利用できるものなのかを紹介します。 デザイントークンとは何か？ デザインシステムにおけるトークンは、UI要素のスタイル、た
Design tokens - Spectrum
Design tokens are design decisions, translated into data. They act as a “source of truth” to help ensure that product experiences feel unified and cohesive.
Design tokens — What are they & how will they help you?
Design tokens — What are they & how will they help you? Translating designs into products is hard! Learn how design tokens make building products easier for both designers and developers.
デザイントークン | 1人design system advent calender 4日目 - development log
4日目はデザイントークンについて見ていく。 Design Tokens（デザイントークン）とは Design Tokens are an abstraction for everything impacting the visual design of an app/platform.— Sönke Rohde (@soenkerohde) 2016年6月24日 デザイントークンとは、プロダクトのデザインに関するすべてのエンティティのこと。 マージン、テキストカラー、フォントサイズ、フォントファミリー、アニメーションの間隔、背景色、ボーダーカラーなどのデザインの情報をもつすべてのものがデザイントークンになる。 デザインシステムにおけるデザイントークンは、同じデザインシステムの上に成り立ってるプロダクト、ウェブやiOS、Androidなどのネイティヴアプリ、Sketchなどのデザインツールに
サイボウズで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 このデザイントークンの名前づけについて
Design Tokens Community Group
The Design Tokens Community Group's goal is to provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale. design-tokens/community-group Group's public email, repo and wiki activity over time Note: Community Groups are proposed and run by the community. Although W3C hosts these conversations, the groups do not necessarily represent the
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初公開！「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank
デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita