こんにちはスマートバンクのデザイナーの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
内容 Figma Tokensで定義したデザイントークンをReact等のフロント側で使いやすくする ※Figma Tokens は Tokens Studio に名前が変わりました。 簡単!5steps 必要packageのinstall install
Figma-tokensからJSON export→CSS variables化すると一部スタイルが正しく吐き出せない問題を解決する
この記事は、 エアークローゼット Advent Calendar 2022 13日目 Figma 開発 Advent Calendar 2022 13日目 の記事です。 株式会社エアークローゼットでエンジニアをしている小林です。 この記事ではFigma-Tokens + Style Dictionaryでデザイントークンをコードと連携するときのハマりどころについて書きます。 エアークローゼット社内では、デザイナーとエンジニアの協業を推し進める動きが今年はじめごろから活発化しはじめました。Figmaの導入を皮切りに、様々な作業フェーズで作業効率や成果物の質を高めるような試みが生まれています。 導入コストや浸透させるための取り組みなど、Figma導入に関するノウハウについては、昨日のアドベントカレンダーでかなり詳しく書かれていますので、興味があればぜひご覧ください！ 自分はエンジニアとしてこの
ウェブのためのタイポグラフィシステム｜Kento Norita
ウェブにおけるユーザーとのコミュニケーションは「言葉」からはじまり、「言葉」を中心に行われます。 はじめに言葉があるからこそ、言葉を伝えるための媒体である「文字」を構成するための「タイポグラフィ」はウェブにおいて非常に重要な存在です。 タイポグラフィにはスクリーン上に文字を表示するだけに留まらない役割があります。 私たちは発話でのコミュニケーションを行う際に、声色、声の抑揚、声の大きさ、話す速度、表情など、多くの要素を柔軟に変化させています。これらの要素を変化させることで私たちはメッセージや人となりのスムーズな伝達を実現しています。 スクリーン上でのコミュニケーションも文字の色、形、配置などを変化させながら適切なタイポグラフィを構築することで、口頭でのコミュニケーションと同様にメッセージやアイデンティティなどをなめらかに伝達できるようになります。 適切に設計されたタイポグラフィはウェブのア
この記事は MICIN Advent Calendar 2022 の21日目の記事です。 前回は水谷さんの「組織変化により初動１ヶ月で実施した5つのアクション」でした。 はじめに 私は株式会社 MICIN のオンライン医療事業部でフロントエンドエンジニアをしています。 今年の初めくらいから「curon お薬サポート」のサービスの開発に携わることになりましたが、 開発に携わっていくにつれ感じていた課題を、ちょうど今現在進行形で解決に向けて動き出せることになったので、今回はその話をさせていただきます。 まず MICIN で展開している curon のサービスブランドとしては、オンライン診療サービスの「curon (クロン)」と薬局向けサービスの「curon お薬サポート」と2つ存在し、それぞれに医療機関（薬局）向けのサービスと患者向けのサービスが存在しています。 curon curon お薬サ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初公開！「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank
デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita
【Figma Tokens × Style Dictionary】デザインシステムはじめの一歩
「curon お薬サポート」のフロントエンドを1から見直そうとしている話