デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
Core Style React with no outside deps and 100% feature support across web and React Native. Adds many missing features to the RN Style API in ~24Kb. Static A smart optimizer that does partial analysis, extracts CSS, flattens your tree, and removes code. Supports Next, Webpack, Vite, Babel and Metro. Tamagui All the components you'd want, cross platform and adaptable to each other. Composable Compo
Tamagui
Rendering between groups of styles conditionally Tamagui comes in three parts: Tamagui Core (@tamagui/core) is a style library for React Native and web that supports 100% of the React Native API surface in a library that only depends on React. It adds all the goodies of modern style libraries into a cohesive package. Tamagui Static (@tamagui/static) is an optimizing compiler on top of Core, turnin
The Component Gallery
Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.
2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/
Cloudscape offers user interface guidelines, front-end components, design resources, and development tools for building intuitive, engaging, and inclusive user experiences at scale.
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience
プロダクト開発部デザイナーの河村恵です。昨今、デザインシステムを用いた「UI / UXの品質担保」「トンマナの統一」「再利用性の向上による開発効率のUP」が注目されつつある中、一休.comでも本格的なデザインシステムの構築を目指し、プロジェクトが発足しました。 本記事では、プロジェクト発足から一休.comならではの課題・実際に作っているUIガイドラインについてなど赤裸々にお話ししたいと思います。 目次 １） プロジェクト発足に至る経緯 ２） プロジェクトの進め方 ３） 実際に作っているUIガイドライン ４） まとめ 1.プロジェクト発足に至る経緯 CTOからのフィードバック そもそも「デザインシステム導入しよう！」となったきっかけは、CTO（以下直也さん）から一休.com と Yahoo! トラベルの2システムを一つに統合することで実現した、Yahoo!トラベルのリニューアル（詳しくはこち
PHPerKaigi 2024に「ゴールド」「T-SHIRT」スポンサーとして協賛！ PHPでQuineに挑戦してみた in PHPerチャレンジ企画
React Spectrum Libraries A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. GitHub React SpectrumA React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications. Explore React Spectrum React AriaA library of unstyled React components and hooks that helps yo
GitHub - aws/aws-northstar: NorthStar is an open source design system with reusable React components for rapidly prototyping intuitive, meaningful and accessible user experience. It simplifies your work and ensures consistent, predictable user experience
NorthStar is an open source design system with reusable React components for rapidly prototyping intuitive, meaningful and accessible user experience. It simplifies your work and ensures consistent, predictable user experience at scale for your customers. With NorthStar, you can focus on innovation and do more with less.
Helios Design System
The page navigation is complete. You may now navigate the page content as you wish. This button opens a dialog containing an input field and some additional information that you may wish to explore. An automatic search will be performed as you type text into the search field, but the results may not be announced. Exploring the additional items in the modal will help you discover the search results
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
Wise Design
Wise Design is the Wise design system. It helps our team create a distinct, accessible and consistent Wise experience that works for everyone, everywhere.
デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義した｜amishiratori
サイボウズのkintone Designチームでkintone Design SystemチームのリーダーをしているAmi（@__amishiratori）です。 私たちkintone Design Systemチームでは、デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義しました。 kintone Design Systemの構築を始めて2年以上が経ちましたが、 デザインシステムやデザイントークンに馴染みのない人も開発チームにはまだいます。 開発チーム全員が共通した認識を持って効果的にデザイントークンを活かして開発ができる様に定義し説明するドキュメントを作成しました。 この記事ではその内容をご紹介します。 用語の定義トークン 色やサイズなどの値と名前の組です。 Global Tokens トークンのうち、特定の文脈によらないトークンです。 （例：gray-
こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 21日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう！という企画です。 今回は全4回のラスト！最後は、スペーシングについて深掘りしていきます。 1～3回目の記事はこちらからご覧ください↓ techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.jmdc.co.jp 概要 あなた
Design Systems Database: Surf among top‑notch Design Systems
Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams
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
TerraformInfrastructure as code provisioning
注意 対象デザインシステム デザイントークンとは トークンの表現方法 各デザインシステムのトークン分類 おわりに こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 2日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう!! という企画です。 全4回、合計およそ20,000文字の大ボリュームでお届けする予定です。20,000文字って、短めの卒論ぐらいありますね🤣 やってみたいとは常々思いつつ、大変なのがわかって
デザインシステムは最優先にはならないです
どちらかというと優先順位は低めですデザインシステムの必要性を説く時代は終わりましたが、その利用促進や運用継続は容易ではありません。デザインシステムの構築者とプロダクト設計者が同じ人物であるような小規模組織では、ガバナンスの課題は些細なものばかりです。また、コミュニケーションが活発な小さな開発チームなら、メンバーのモチベーションが続く限り、維持・管理は比較的容易です。 組織が大きくなり、様々な体制やプロセスを持つ複数のプロダクトが存在する場合、全員一丸となってデザインシステムを取り組むのは難しくなります。その結果、「作る側」と「使う側」に分かれがちです。この問題を解決するため、各プロダクトから代表者を集めて議論する連邦制のような体制が考えられます。しかし、デザインシステムへのコミットメントを本業と両立させるのは容易ではありません。 プロダクトの開発と改善に集中しているチームにとって、デザイン
GitHub - tamagui/tamagui: Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
@tamagui/core - Universal style library for React. @tamagui/static - Optimizing compiler that works with core and tamagui. tamagui - UI kit that adapts to every platform. See tamagui.dev for documentation. Tamagui lets you share more code between web and native apps without sacrificing the two things that typically suffer when you do: performance and code quality. It does this with an optimizing c
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
Naming Tokens in Design Systems
Design tokens have provided a visual foundation of many design systems since Salesforce pioneered the concept in 2014. I wrote an impassioned article on design tokens in 2016, and my energy on the topic continues to grow. As systems of visual style spread across a widening landscape of components, platforms and outputs, design tokens — and their names — are increasingly important. Effective token
デジタル庁デザインシステム デジタル庁デザインシステムとは、名前の通りデジタル庁が提供しているデザインシステムです。 行政機関や公共性の高い組織のWebサイト、アプリケーションを構築する際に利用することを念頭に置いて構築されています。 2024/05/30にv2.0.0としてベータ版が公開されました。 デジタル庁デザインシステムの内訳 デジタル庁デザインシステムには以下の成果物が含まれています。 デザインシステム本体 Figmaのデザインデータ v2系 Figmaのデザインデータ v1系 React製のコードスニペット イラストレーション/アイコン素材 以降は内容物をそれぞれ確認しつつ、デジタル庁デザインシステムがどのようなものかを考えていきます。 デザインシステム本体 デジタル庁デザインシステムベータ版のWebサイトのことを指します。 はじめて本ウェブサイトを見る方への業務での活用につい
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:
dds__chevron-left
こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 15日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう!! という企画です。 今回は、全4回の3回目、カラー編の後編です。前編に引き続き、デザインシステムの「色」について、比較・分析を行っていきます。 1回目・2回目・3回目前半の記事はこちらからご覧ください！ techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.j
こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 14日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう!! という企画です。 今回は、全4回の3回目。デザインシステムの「色」について、比較・分析を行っていきます。 全4回目の3回目です。文章が長くなりすぎて3回目を2回に分けることになりましたが全4回の3回目です。「完成_最終稿_FIX_20230101最新版_確定_確定2」みたいなやつです。よくあることです
10年続くユーザー体験を今、再構築する理由 AI時代のUI「スペクトラム2」 | Forbes JAPAN 公式サイト（フォーブス ジャパン）
アドビは、さまざまなプラットフォームに向けたアプリケーション、サービスに共通するデザインシステムとして「Spectrum（スペクトラム）」を2013年から10年以上に渡り提供してきた。このほど「アドビらしい体験」を再構築するためにリニューアルしたデザインシステム「Spectrum 2」を、2024年から順次導入する。Spectrum 2が誕生した背景とそれがもたらす変化を、アドビのデザイン担当バイスプレジデントのエリック・スノーデン氏にインタビューした。 拡大を続けるアドビのユーザー。ニーズも多様化アドビのアプリケーションといえばPDFドキュメントの作成・編集に使う「Adobe Acrobat」や、カメラマンの定番写真編集ツールである「Adobe Photoshop」などが広く知られているだろうか。現在はPhotoshopのようにデスクトップとモバイル、ウェブ版などユーザーが使用する環境に
A Global Design System
TL;DR: This is a call to action to create a Global Design System that provides the world’s web designers & developers a library of common UI components. A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. Sounds pretty good, right? I
We’d like to use analytics cookies so we can understand how you use the Design System and make improvements. We also use essential cookies to remember if you’ve accepted analytics cookies.
A comprehensive UI kit with over 600 handcrafted Material UI, MUI X, and Joy UI components for Figma. Includes 600+ high-quality components—ready to use and customize—kept up-to-date with the React component libraries (Material UI, Joy UI, and MUI X) 1,000+ icons grouped and named consistently with Material Icons in 5 themes 100+ customizable color, typography, and elevation styles 50+ frames with
Unlocking inclusive design: how Primer's color system is making GitHub.com more inclusive
CompanyProductUnlocking inclusive design: how Primer’s color system is making GitHub.com more inclusiveHow Primer’s updated light and dark theme color contrast strategy resolved hundreds of color-contrast-related accessibility issues over one thousand use cases. Over 100 million developers around the world come to GitHub to build software. Primer, GitHub’s open source design system, is responsible
GitHub - maiha2/accessibility-in-design-system: list of accessibility pages in design systems
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
Figma によるデザインシステム入門
グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ
Tamagui — React Native + Web UI kit
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
Cloudscape - Cloudscape Design System
デザインシステム導入しました - 一休.com Developers Blog
デザインシステムにおけるタイポグラフィーの試行錯誤 - DMM inside
React Spectrum Libraries
Designing accessible color systems
Incrementsのデザインシステム公開のお知らせ（前編） - Qiita Blog
デザインシステムめっちゃ見る④ スペーシング編 - JMDC TECH BLOG
Introducing Helios, HashiCorp’s New Design System
デザインシステムめっちゃ見る① 概要編 - JMDC TECH BLOG
Explore デジタル庁デザインシステム ベータ版
デザインシステムめっちゃ見る③-2 カラー編 (後編) - JMDC TECH BLOG
デザインシステムめっちゃ見る③-1 カラー編 (前編) - JMDC TECH BLOG
Get started – GOV.UK Design System
MUI for Figma - MUI Store
shizu-hangul.com
www.asahi.com
anond.hatelabo.jp
www.takt-tax.com
helentech.jp
www.asahi.com