デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義した｜amishiratori
サイボウズのkintone Designチームでkintone Design SystemチームのリーダーをしているAmi（@__amishiratori）です。 私たちkintone Design Systemチームでは、デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義しました。 kintone Design Systemの構築を始めて2年以上が経ちましたが、 デザインシステムやデザイントークンに馴染みのない人も開発チームにはまだいます。 開発チーム全員が共通した認識を持って効果的にデザイントークンを活かして開発ができる様に定義し説明するドキュメントを作成しました。 この記事ではその内容をご紹介します。 用語の定義トークン 色やサイズなどの値と名前の組です。 Global Tokens トークンのうち、特定の文脈によらないトークンです。 （例：gray-
10年続くユーザー体験を今、再構築する理由 AI時代のUI「スペクトラム2」 | Forbes JAPAN 公式サイト（フォーブス ジャパン）
アドビは、さまざまなプラットフォームに向けたアプリケーション、サービスに共通するデザインシステムとして「Spectrum（スペクトラム）」を2013年から10年以上に渡り提供してきた。このほど「アドビらしい体験」を再構築するためにリニューアルしたデザインシステム「Spectrum 2」を、2024年から順次導入する。Spectrum 2が誕生した背景とそれがもたらす変化を、アドビのデザイン担当バイスプレジデントのエリック・スノーデン氏にインタビューした。 拡大を続けるアドビのユーザー。ニーズも多様化アドビのアプリケーションといえばPDFドキュメントの作成・編集に使う「Adobe Acrobat」や、カメラマンの定番写真編集ツールである「Adobe Photoshop」などが広く知られているだろうか。現在はPhotoshopのようにデスクトップとモバイル、ウェブ版などユーザーが使用する環境に
Introducing Spectrum 2: Our vision for the future of Adobe experience design
Introducing Spectrum 2: Our vision for the future of Adobe experience design A preview of the comprehensive update coming to Adobe's design system Imagine you’re designing a house. Your first step might be to draw a picture. To turn that picture into a house would require the input of many experts—architects, engineers, and builders—and would involve planning, teamwork, and time with each collabor
Spectrum 2
Spectrum 2: what’s next for Spectrum, Adobe’s design system Rational. Human. Focused. Collaborative.Adobe’s products are evolving: more modern, more friendly, more accessible, and more enjoyable to use. Spectrum, Adobe’s design system creates the building blocks of user experiences, and it’s getting a major update to make it happen. Spectrum 2 is what’s next. It’s more than just a design refresh:
How we built our multi-platform design system at Booking.com
Building a design system that works is a challenge at any scale. Building a design system for 150+ product teams, used by 200+ designers and 800+ developers, and serving 4 different platforms? That’s a challenge requiring lots of special considerations. When building a design system for such a large scale, many questions come to mind: How can we make it strong and scalable to multiple themes and b
Design System - FIDO Alliance
FIDO Design System The FIDO Alliance Design System is an adaptable collection of UX principles, journeys, patterns, content, and UI Kit (a Figma file) created by the FIDO Alliance. Product designers, product managers, and engineers use it to kick-start their FIDO projects. This is version 1.0 of the FIDO Design System and it’ll be updated once a year or more. Updated versions will account for pass
Zendesk Garden
Welcome to GardenThe source of truth for tools, standards, and best practices when building products at Zendesk. The foundations for making products with GardenThis site is an evolving library of shared knowledge that intentionally blurs the line between design, content strategy, and engineering to reinforce a cohesive user experience throughout Zendesk’s product suite.
グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
Version Management for Design Systems
How does your design system team notify subscribers that new features are being released, bugs are being fixed, or security holes are being patched? Patrick discusses versioning strategies and the advantages of automating that process. Imagine, if you will, that we’re part of a team working together to produce some software. Our team knows that in six months, our minimum viable product (MVP) needs
Designing accessible color systems
Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens. With this in mind, we recently updated the colors in our user interfaces to be more accessible. Text and icon colors now reliably have legible contrast throughout the Stripe Dashboar
Design systems at GitHub
Design systems have become core to the way we design and build at GitHub. Since 2011 GitHub designers have documented UI patterns and shared common styles. In 2012, CSS and other assets were packaged up into a Ruby Gem for use in GitHub websites — this package was named Primer. Primer continued to be used internally for years before eventually having its CSS and accompanying documentation open-sou
Homepage - Australian Government Design System
The .gov.au means it’s official Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar. This site is secure. The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
InVision製デザインシステム管理サービス「Design System Manager」のEarly Access版を試してみた | DevelopersIO
InVision Design System Manager 2018年1月にリリースされることが発表されている「InVision」の新しいサービス「Design System Manager（DSM）」。2017年12月現在はEarly Access版（申請制）として提供されています。 Introducing InVision Design System Manager + Brand.ai is joining InVision - InVision Blog 申請が通りましたので、早速使ってみました！ できること Design System Managerでは、以下のようなことができます。 デザインシステムのバージョン管理 Color Text Styles Components Fonts Sketchプラグインによる連携 チーム管理 はじめに - オーガナイゼーションとライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cloudscape - Cloudscape Design System
GitHub - tamagui/tamagui: A style library, UI kit, and optimizing compiler that makes React run faster - on both native and web
GitHub - maiha2/accessibility-in-design-system: list of accessibility pages in design systems
zeroheight
GitHub - basarat/awesome-enterprise-component-library: A list of public enterprise funded open source component libraries
GitHub - Lona/Lona: A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.
InVisionがBrand.aiを買収、デザイン管理ツール「InVision Design System Manager」を発表。
