デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/
2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/
デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義した｜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
注意 対象デザインシステム デザイントークンとは トークンの表現方法 各デザインシステムのトークン分類 おわりに こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 2日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう!! という企画です。 全4回、合計およそ20,000文字の大ボリュームでお届けする予定です。20,000文字って、短めの卒論ぐらいありますね🤣 やってみたいとは常々思いつつ、大変なのがわかって
デザインシステムは最優先にはならないです
どちらかというと優先順位は低めですデザインシステムの必要性を説く時代は終わりましたが、その利用促進や運用継続は容易ではありません。デザインシステムの構築者とプロダクト設計者が同じ人物であるような小規模組織では、ガバナンスの課題は些細なものばかりです。また、コミュニケーションが活発な小さな開発チームなら、メンバーのモチベーションが続く限り、維持・管理は比較的容易です。 組織が大きくなり、様々な体制やプロセスを持つ複数のプロダクトが存在する場合、全員一丸となってデザインシステムを取り組むのは難しくなります。その結果、「作る側」と「使う側」に分かれがちです。この問題を解決するため、各プロダクトから代表者を集めて議論する連邦制のような体制が考えられます。しかし、デザインシステムへのコミットメントを本業と両立させるのは容易ではありません。 プロダクトの開発と改善に集中しているチームにとって、デザイン
デジタル庁デザインシステム デジタル庁デザインシステムとは、名前の通りデジタル庁が提供しているデザインシステムです。 行政機関や公共性の高い組織の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:
こんにちは。株式会社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
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ページを開く
デザインシステムめっちゃ見る④ スペーシング編 - JMDC TECH BLOG
デザインシステムめっちゃ見る① 概要編 - JMDC TECH BLOG
Explore デジタル庁デザインシステム ベータ版
デザインシステムめっちゃ見る③-2 カラー編 (後編) - JMDC TECH BLOG
デザインシステムめっちゃ見る③-1 カラー編 (前編) - JMDC TECH BLOG