[[toc]] This post will be a bit longer than usual. It's quite a big announcement to me, and there are many things I want to talk about. I'll be appreciated if you take the time to read through it. The table of contents is hidden on the left if you are on a desktop. Hope you enjoy :) 中文 Chinese Version What is Atomic CSS? Let's first give a proper definition to Atomic CSS: From this article by John
【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート｜RAKSUL DESIGN
【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート 近年、国内外の様々な企業のプロダクト開発に導入されている「デザインシステム」。「デザインシステム」を導入することで、デザイナーやエンジニアの開発生産性や効率性を高めたり、ユーザー体験の一貫性を提供できたりと、様々なメリットがある一方で、事業内容や成長フェーズ、組織構造などによってデザインシステムの目指すべきカタチは異なり、正解や完成がないことから、悩みを抱えている企業や開発者は少なくありません。 そこでラクスル株式会社（以下、RAKSUL）は、デザインシステムのコミュニティ「Design System Build」を立ち上げ、2022年8月23日に“デザインシステム構築の様々なアプローチ”をテーマに勉強会を開催しました。 この
デザイントークンって何？｜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
On Sunday March 6, we migrated Stripe’s largest JavaScript codebase (powering the Stripe Dashboard) from Flow to TypeScript. In a single pull request, we converted more than 3.7 million lines of code. The next day, hundreds of engineers came in to start writing TypeScript for their projects. Seriously unreal. I remember a short time ago laughing at the idea of typescript ever landing at Stripe, an
Zag.js が良いかもしれない
Zag.js を調べた背景 私は Chakra UI ユーザーなのですが、Chakra UI はスタイリング部分でランタイム CSS-in-JS（= emotion）を使用しているため、レンダリング時のパフォーマンス影響を考えると、どこかで移行するタイミングがありそうだと思っています。もちろん、Chakra UI がランタイム CSS-in-JS を捨ててくれれば移行は必要ありませんが、Chakra UI のロードマップを見たところ、明確にスケジューリングされていません（未来のどこかで移行はされそう）。そのため、移行先を探していたのですが、Chakra UI の作成者のアデバヨさんが作った Zag.js はとりあえず見とかないといけないよな、という感じで見始めました。 Zag.js が作られた背景 Chakra UI が抱えている技術的課題は先述の通り、ランタイム CSS-in-JS が内
大規模B2B SaaS 「HRMOS」におけるDesign Systemの開発・運用プラクティス
前回の記事ではHRMOSのDesign Systemの導入背景の紹介をしました。 本日はそのDesign Systemがどのように開発・運用されているのかを紹介したいと思います。 開発体制 Design Systemの開発はデザイナー、エンジニアが1つのチームとして開発を行っています。 開発のポイントとしては以下のとおりです。 デザインタスク、実装タスクなどすべてのDesign Systemのタスクは1つのバックログで管理 隔週に1度、やることの計画、やったことの確認をチーム全員で行う チームメンバーは全員兼務なので、極力MTGを増やさないよう、非同期でのコミュニケーションをメインにしている この体制になった背景として、当初はDesign System開発がデザイナーとエンジニアで分断されていたことにあります。 デザインとエンジニアリングでそれぞれ別のバックログをもち、それぞれ別のサイクル
なぜデザインシステム構築に取り組むのか？ - ラクスの継続的UX改善 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、デザインマネージャーの清水です。 私たち「プロダクトデザイン課」は、お客様の業務課題を解決するため、全プロダクトのUI/UXデザインを担っています。 あらゆるプロダクトにとって、最良のUXを目指すことは必然だと思います。 私たちもまた、お客様にとってより使いやすいプロダクトを提供するため、継続的にUX改善に取り組んでいます。 先日のブログ「ラクスのプロダクトデザイン組織紹介― 顧客価値を高める新たな挑戦」では、継続的なUX改善の一環である「UI刷新」プロジェクトについてご紹介しました。 ここでの「刷新」とは、既存UX（お客様の使い勝手に大きく影響する配置や導線）を急激に変更するという意味ではなく、UXの維持向上を重視しつつ、よりわかりやすいUIデザインにするイメージにとらえていただければ幸いです。 tech-blog.rakus.co.jp 今回は「UI刷新」の目的や背景、どの
vuefes.jp 一日セッション見つつメモを残したので、個人ブログに放り投げておく。 殴り書きなので何の清書もしてないし、誤字脱字もチェックしてないです！！！ Keynote | The Evolution of Vue / Evan You https://vuefes.jp/2022/sessions/yyx990803 0.x系の Pre バージョン時代の話 ES5のみのFeatureを前提にする必要があった 1.0のコードネームってEvangelionだったのか.. 2015-2016でのコアなライブラリ群の追加が多かったらしい。Vue Router とかVuex 大規模SPAアプリケーションの構築の解決狙い Vapor Mode Virtual DOM への依存がない パフォーマンス特化でのプリビルド 今後 Vue2→3の移行期という認識 30%が Vue3, 25%が 2.7
モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム に注目して様々なアプローチしてきました。 本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的…
こんにちは、プロダクトデザイナーの @uknmr です。昨日に続き SmartHR UI に関する話を書きます。ええ、そう。今日はやや社内に向けて書きます。アドベントカレンダー14日目? 知らない子ですね。我が家にクリスマスの概念はないので、そんなものはありません。 SmartHR UI の目的とは? ブランド観点から UI を揃えたい、一貫したユーザー体験*1を提供したい、という気持ちから生まれた SmartHR UI ですが、本当ですか? 我々は本当に UI を揃えるためだけにコンポーネント集を手入れしていますか? 共通コンポーネント集があれば、それを使い続けさえすれば UI が揃っていくのは必然です。「揃えたい」という気持ちは「誕生した瞬間に達成された」とも言えます*2。 では、何のために自前でコンポーネント集を手入れし続けているのでしょうか? 私はそれを「SmartHR というプロ
この記事はenechain Advent Calendar 2024の5日目の記事です。 はじめに enechainでフロントエンドエンジニアをしている@Shunya078です！ enechainは、日本最大のエネルギー卸取引マーケットプレイスを運営するスタートアップです。我々ソフトウェアエンジニアは日々、プロダクトを通じてエネルギー市場に貢献しています。 社内には10を超えるプロダクトが存在しており、各プロダクト共通で利用されるデザインシステムが存在します。自分はこのデザインシステムに、チームをリードする立場として関わっています。 去年、なぜ我々はデザインシステムを創るのか？という記事でデザインシステムの生い立ちについて執筆しました。背景などについては是非そちらをご一読ください！ 今回は、今年一年間のアップデート内容を振り返るととともに、現時点における我々のデザインシステムがどういうフェ
In order to design the right interactions, we need to look back at the history and origins of physical pushbuttons, a direct predecessor of the UI component so heavily used in all digital products today. Buttons are amazing. The touch of a finger setting an appliance, a car, or a system in motion, even if the user doesn’t understand the underlying mechanisms or algorithms. In Power Button, Rachel
ドラッグ＆ドロップは、スマホやパソコンを日常的に使う私たちにとって、直感的で馴染み深いインタラクションの一つです。MDN Web Docs（ウェブ標準技術を解説する開発者向けリソース）では、ドラッグ＆ドロップを「開始時」「操作中」「終了時」の3つのアクションに分けて定義しています： 1. 開始時：マウスでドラッグ可能な要素を選択する 2. 操作中：その要素をドロップ可能な要素へドラッグする 3. 終了時：マウスボタンを離してドロップする MDN「HTMLドラッグ & ドロップAPI」これら一連のインタラクションを意識せずにデザインプロトタイプを作成すると、ドラッグ可能な領域だけを1画面としてデザインしてしまいがちで、実装段階で細かいデザインの見直しが必要になることがあります。そのため、すべてのアクションを意識したデザインを考えると、後の手戻りを防ぎやすくなります。 今回はデザイン・実装・ア
こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。 大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生まれました。 Sara は Web のデザインと実装がパッケージ化されているため少ない実装で機能提供が可能となり、その分開発者はユーザーと向き合ったサービス開発にフォーカスすることができます。 CSS Framework の Sara モバイルアプリ(iOS, Android)でも同様に Sara のデザインを取り入れて開
Gabe's blog
Notes on maintaining an internal React component library Jun 16, 2022 A collection of my thoughts on maintaining a component library as part of an existing design system used by a large number of frontend applications.
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
こんにちは。enechainで働いている takurinton です。 これまでのenechainのデザインシステムではdark modeの提供はしておらず、プロダクト側で必要に応じて状態とデザイントークンを保持した上で切り替えてもらうという方式をとっていました。 しかし、事業拡大やプロダクト側からの要望によりdark modeのデザイントークンをデザインシステム側で管理し、chakra-uiのColorModeProviderを用いて切り替える方法を提供することにしました。 今回は、その移行の過程と方法について書きます。 デザイントークンについて 移行の手法 将来的に light/dark 以外の種類のトークンも定義する可能性がある 古いトークンはstylesで、新しいトークンはvariablesで管理している light モードしか使わないプロダクトは特別な手順なく移行可能にしたい デ
We’re excited to announce React Spectrum, a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. Check it out on Github! React Spectrum includes three libraries: React Spectrum — A React implementation of Spectrum, Adobe’s design system. React Aria — A library of React Hooks that provides accessible UI primitives for your design system. React Sta
Announcing Coinbase’s successful transition to React Native | by Coinbase | The Coinbase Blog
As of January 2021, the Coinbase iOS and Android apps have transitioned away from native development to React Native, and all mobile engineers are now collaborating in a single codebase. The transition from native to React Native did not happen overnight, and in the interest of helping those contemplating such a decision, we want to tell the story of how we got here. Specifically, we want to share
#11WeeksOfAndroid 18 #Android12 1 #AndroidDevJourney 1 #androiddevsummit 5 #GoogleIO 19 #WeArePlay 7 12l 1 5 star apps 1 Ads 1 advertising 1 AGDE 1 AGDK 2 AGI 1 AI 3 AI Announcements beginner Explore Generative AI 1 AI Announcements beginner Explore Generative AI、 1 Android 108 Android 10 1 Android 11 1 Android 12 Beta 5 1 Android 12L 1 Android 13 3 Android 14 7 Android 14 Beta 4 1 Android 14 ベータ版
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @yoshi-jr です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「Canary」: BtoC の部屋探しポータル（アプリ/Web） 「Canary Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のウェブ版（以降 CANARY Web）で利用している技術スタックをまとめています。 この記事を読んでわかること CANARY Web について技術スタックの全体像・概要が理解できる 話すこと CANARY Web のアーキテクチャ CANARY Web で利用しているモジュールとその歴史 話さないこと CANARY Web 視点以外でのアーキテクチャ 各モジュ
LINE Design System
LINE Design System is an integrated set of guidelines for components, interaction methods, and other aspects that contribute to LINE's design and user experience.
デザインシステムを育てていく｜sakito
はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは？まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial DesignGoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iO
Hawkins: Diving into the Reasoning Behind our Design System
Stranger Things imagery showcasing the inspiration for the Hawkins Design Systemby Hawkins team member Joshua Godi; with cover art from Martin Bekerman and additional imagery from Wiki Chaves Hawkins may be the name of a fictional town in Indiana, most widely known as the backdrop for one of Netflix’s most popular TV series “Stranger Things,” but the name is so much more. Hawkins is the namesake t
Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a publi
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.
Atomic 2.0
Atomic Design is a great methodology for both design and development that was pioneered by Brad Frost. I’ve found that the hierarchy of elements is often interpreted differently from person to person so I’ve tried to solve that with a new approach, I call it Atomic 2.0. The Atomic 2.0 approachConcern #1 with Frost’s approachFrost describes atoms as elements that cease to be functional if broken do
こんにちは、WEAR Webフロントエンドチームの吉田と大脇です。 現在WEARではNext.jsでのリプレイスが進行中です。今回はリプレイスのデザイン面における課題と解決に向けて行った取り組みを紹介します。 リプレイスの経緯や技術選定については、弊社の藤井の記事をご覧ください。 techblog.zozo.com 10年の歴史のあるアプリケーションと向き合う リプレイスにおける課題 他部署との連携 デザイナーとエンジニアの歩み寄り ミーティングで話し合ったこと ミーティングを行って得た気づき デザインツールの変遷 未来のこと、これからやっていきたいこと デザイントークンの定義 デザイン周りの負荷軽減 技術面でやりたいこと Tailwind CSS Storybook 終わりに 10年の歴史のあるアプリケーションと向き合う WEARは今年で10年目となります。Webサービスとしては長期間に
しばたです。 前の記事でNext.jsを試す環境を作ったので本記事ではCloudscapeを実際に試してみます。 Cloudscape Design Systemとは？ Cloudscape Design SystemはAWSが作成しオープンソースで公開しているWEBデザインシステムです。 もともとAWSが内部向けに作成し改善していたものが今年の7月に一般公開されました。 雑に言ってしまえば「マネジメントコンソール風のUIをつくれるやつ」なんですが、デザインシステムの名の通りUIコンポーネント以外にデザインパターンやデモも公開されています。 注意事項 本記事ではこちらの手順に従い最初の一歩を試してみようと思っていました。 Using Cloudscape components ただ、手順をよく読んでみると最後の最後に、 Bundling with Next.js (optional) Th
どうもよしです。久しぶりの投稿になります。 元々、Material Design をベースとした UI コンポーネントライブラリである、Material UI の v5 が遂にリリースされました！ v4 からどう変わったのか自分でも試すなど、さらっと見てみたので、ここにまとめてみました。 ※2023/11/25 MUI の更新に伴い、MUI v5.0系のドキュメント参照したほうが良い部分はリンクを差し替えました。 Material UI とは？ 元々、Google の Material Design をベースに開発された、UI コンポーネントライブラリです。 Material UI の概要や v4 の機能に関しては、以前に記事を書いていますので、よろしければそちらをご参照ください。 ※今回の記事は、主に以下の公式ブログ記事をもとにしています。引用文の出典もそちらです。 そのため、すでにそち
Vol.10 Bill Oneのフロントエンドを通じて学ぶモダンフロントエンド技術入門 - Sansan Tech Blog
こんにちは。技術本部Bill One Engineering Unitの豊田（@helloyuki）です。Bill One 開発 Unit ブログリレー2024 Vol.10、Sansan Advent Calendar 25日目の記事です。実は1pxの微妙な画面上のズレが気になって仕方のないタイプです。 私自身はこれまでのキャリアでは、ほとんどバックエンドエンジニアとして過ごしてきました。正確にはバックエンドを主軸としつつ、多少のフロントエンド、クラウドインフラの構築、データエンジニアリングの経験も含みます。それぞれの領域に詳しい詳しくないは多少ありつつ、世間的にいうフルサイクルエンジニアとしてのキャリアを歩んできました。 Bill Oneでは各チームに配属後、ソフトウェアエンジニアは基本的にはフロントエンド、バックエンド、インフラ関係なく、すべての領域の開発を一通り担当します。私も最近
CSS :has Parent Selector
Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific element and many other things. In this article, I will explain the probl
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra scrollbar! Or maybe an element is an unexpected color. An
デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義した｜amishiratori
サイボウズのkintone Designチームでkintone Design SystemチームのリーダーをしているAmi（@__amishiratori）です。 私たちkintone Design Systemチームでは、デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義しました。 kintone Design Systemの構築を始めて2年以上が経ちましたが、 デザインシステムやデザイントークンに馴染みのない人も開発チームにはまだいます。 開発チーム全員が共通した認識を持って効果的にデザイントークンを活かして開発ができる様に定義し説明するドキュメントを作成しました。 この記事ではその内容をご紹介します。 用語の定義トークン 色やサイズなどの値と名前の組です。 Global Tokens トークンのうち、特定の文脈によらないトークンです。 （例：gray-
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
新アイコンは、馴染みのあるアイコンを同社の「Fluent Design System」に基づいてデザインし直し、「ビジネスのアジャイルな未来を表現した」としている。 現在のアイコンになったのは2017年のIgniteからだ。それ以前は雲を模したものだった（米Neowinより）。 Microsoftは検索サービス「Bing」のロゴも昨年10月に名称を「Microsoft Bing」とした際、Fluent Designのものに変更している。 関連記事 Windows 10の「エクスプローラー」、「ごみ箱」などが正面を向くデザイン変更（Build 21343で） Microsoftは「Windows 10」のプレビュー版プログラム「Insider Preview」でリリースした「Build 21343」で、「エクスプローラー」の新しいアイコンを披露した。ごみ箱やデバイスが正面を向き、「ドキュメン
はじめに こんにちは！お会計チームの yamakazu (@yamarkz) です。 10Xでは4月から新しい期が始まるため、最近はバタバタしています。新しい組織や取り組みが始まってきていて、今年度はこれまでとはまた違った大きな変化が生まれそうで楽しみです。 さてそんな今回は期の変わり目ということもあり、 節目として「Stailerの開発を支える取り組み」を紹介します。 取り組みはプロダクトの規模や性質、組織構造、願望によって変わる唯一無二の存在で、各社様々な工夫を凝らして、より良い開発体験を追求していると思います。 自分たちもその時々の状況に合わせて、最適なやり方に変えて開発してきました。 今後も取り組み自体は変わっていくと思いますが、2023春時点での取り組み状況 (仕組み / ルール / 文化 / ツール) をスナップショットとして取り上げみようと思います。 はじめに 前提 取り組み
How Spotify’s Design System Goes Beyond Platforms | Figma Blog
Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components. In 2019, when our leadership at Spotify unveiled their ambition to make audio content available and consistent to anyone on any device, our design team faced a significant challenge: Spotify would now be available across 45 unique platforms, and
CSS types are a worthy investment into type safety in your front-end work. We're still awaiting cross browser interop, but we'll get there 🙂 In case you've never seen one, here's a typed CSS variable with @property: @property --focal-size { syntax: '<length-percentage>'; initial-value: 100%; inherits: false; } Used that one so I could animate a gradient mask image. Pretty sweet. Here's a preview
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reimagine Atomic CSS
Migrating millions of lines of code to TypeScript
📝 Vue Fes Japan Online 2022 / 見たセッションメモ - memo_md
サービスにおけるDesign Systemの構築
SmartHR UI を中心としたエコシステムのすすめ - SmartHR Tech Blog
デザインシステムの成長。そして、これからどう向き合うか - enechain Tech Blog
The anatomy of a button — UI component series
ドラッグ＆ドロップのUIを観察する｜トビ / Kazuhiro Tobita
クックパッドのデザイン品質を支える Apron Design System の構築｜ふじけん / kenshir0f
デザインシステムのダークモード対応 - enechain Tech Blog
Introducing React Spectrum
Jetpack Compose を使ったデザインシステムの実装
2024年｜CANARY Web の技術スタック
Photoshop's journey to the web | Articles | web.dev
10年続くWEARにおける、デザインシステム事始め - ZOZO TECH BLOG
Next.jsでCloudscape Design Systemを試してみた | DevelopersIO
こんにちはMUI！ 新しくなったMaterial UI v5
「Notepad++」が約5年ぶりのメジャーアップデート ～ARM64ビルドとダークモードを追加／OSで採用が進む「Fluent Design System」に合わせた新しいツールバーアイコンも同梱
A Guide To CSS Debugging — Smashing Magazine
A Complete Guide to CSS Cascade Layers | CSS-Tricks
Microsoft、「Azure」の新アイコン発表 「Fluent Design System」準拠
Stailerの開発を支える取り組み 2023春 - 10X Product Blog
Type safe CSS design systems with @property · September 1, 2023