「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読んだ - massa142's blog
Atomic Design ~堅牢で使いやすいUIを効率良く設計する 作者: 五藤佑典出版社/メーカー: 技術評論社発売日: 2018/04/25メディア: 単行本（ソフトカバー）この商品を含むブログ (1件) を見る 動機 デザイン・UIについての知識を広げたい SQUEEZEのフロントエンド開発にAtomic Designを取り入れたい @iktakahiro がこの本を持っていたので借してもらった 感想 UIを、化学の原子に見立てて設計する、Atomic Designの考え方・具体的な手順からReactを使った実装まで、UI設計の本質とともに1冊で解説。インターネットテレビ「AbemaTV」のUI設計を担当した著者が、現場実践をふまえて伝授する。 Atomic Designの概念とStorybookを使った開発フローについて、内容がよくまとまっていてざっと学ぶことができた。 おそらく
All slide content and descriptions are owned by their creators.
2018年5月6日 著 ゴールデンウィーク中の個人的課題図書、2冊目の『Atomic Design ～堅牢で使いやすいUIを効率良く設計する』を読了。といっても、サンプルデータを実際にダウンロードして手を動かしたわけでもなく、また本文に出てくる結構な量のコードについては読んでいません。Atomic Designについて日本語で専門的に書かれた本というのは知る限り本書が初めてだと思ったので、あくまで興味本位で。 感想としては、期待したほどAtomic Designについて掘り下げられていたわけではなかったような（そこを期待するならFrost氏の書いた『Atomic Design』を読むしかないか）。それは店頭で立ち読みした際に承知のうえで購入してたんですけどね。勝手ながら自分が本書のタイトルをつけるなら、『コンポーネント・ベースのUI開発 〜ReactによるAtomic Designの実践』
DROBE では React のコンポーネント設計に Atomic Design を取り入れていますが、特にデザインにおける設計と React における実装という目的の違いから、実装していると微妙に概念が取り入れ辛く、しばしば方針に迷う事があります
この記事は2020年10月3日にWCAN 2020 Design Special 〜デザイン力の基本とブランドづくりの一歩〜で行うLTのスライドと原稿です。 投稿時点ではまだイベントは始まっていませんが、先んじて公開します。 以下が実際の内容です。 それでは「実装まで視野に入れるならAtomic Designを辞めましょう」と題して私のLTを始めます。 みなさんこんにちは。Increments株式会社でデザイナーをしている綿貫佳祐と言います。 Incremetnsではこれらのサービスを展開しております。 普段の業務からこれら3つ、インターフェースだけでなくフロントエンドまである程度担当していまして、両方の視点から見た話をしていきます。 最初にお断りしておきますと、現在Atomic Designを使っている方々を否定するつもりはありません。 ただ、主観ですがAtomic Designは「汎用
![[LTスライド&原稿]実装まで視野に入れるならAtomic Designを辞めましょう - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b36672e68f2ccc80b4b17d448b528f5e5a3bb2ff/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTFQlRTMlODIlQjklRTMlODMlQTklRTMlODIlQTQlRTMlODMlODklMjYlRTUlOEUlOUYlRTclQTglQkYlNUQlRTUlQUUlOUYlRTglQTMlODUlRTMlODElQkUlRTMlODElQTclRTglQTYlOTYlRTklODclOEUlRTMlODElQUIlRTUlODUlQTUlRTMlODIlOEMlRTMlODIlOEIlRTMlODElQUElRTMlODIlODlBdG9taWMlMjBEZXNpZ24lRTMlODIlOTIlRTglQkUlOUUlRTMlODIlODElRTMlODElQkUlRTMlODElOTclRTMlODIlODclRTMlODElODYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWNjOTkxODEzYWE5YTgzYjAxYTU1NGEwOTMxMDA2MDA1%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB4cnhveGN4b3gmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTVhZmVkZjZjZjNkMTFiMmYwOTA4NTAyYTkyYmQwZTVl%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gUWlpdGHmoKrlvI_kvJrnpL4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D46ba16e8a9b0707ba9fc31cfba17831c)
2019/6/22 のAdobe XD ユーザーフェス 2019 (札幌) で発表したスライドです。
The Atomic Workflow | Atomic Design by Brad Frost
Chapter 4 The Atomic Workflow People, process, and making design systems happen Talk is cheap. And up until now, we’ve been doing a whole lotta talkin’. That’s not to say it hasn’t been productive talk! After all, we’ve discussed the importance of modular thinking, we’ve learned a methodology for crafting deliberate UI design systems, and we’ve showcased tools for creating effective pattern librar
タイトルは記事の内容を読み込ませ、chatGPTに作成してもらいました。 強いタイトルですが、Reactの初学者向けにAtomic Designとは何なのか、それに則ってコンポーネントを分割するにはどのようにするのかを解説しています。 後半では実際にAtomic DesignでTodoアプリを作成していますので試してみてください。 （有識者はアドバイスなどがありましたらどうぞよろしくお願いします） Atomic Designを理解する React開発者にとってのAtomic Design Atomic Designとは Atomic Designの5つのレベル Atomic Designのメリットとデメリット React/TypeScriptで作るTodoアプリ React開発者にとってのAtomic Design Reactの開発者がAtomic Designを使う理由は、コンポーネント
Atomic design
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages. Read less
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側：大規模ブログサイト表示速度改善 大解剖（2）（2/2 ページ） Atomic Designによるコンポーネント階層管理 Presentational ComponentsとContainer Components 前述したように、コンポーネントは再利用前提で作られており、他のコンポーネントに影響を与えないピュアなコンポーネントであることが望ましいとされています。しかし、アプリケーションを作っていくうちに、「データ取得処理や状態を取得・更新する」といった、見た目以外の処理を行う必要性が出てきます。 こういった内容をどこに書いたらいいのかという問題に対して、Reduxでは、見た目のみに関心を持つ「Presentational Components
Atomic Design と Atomic Components
HRMOS採用管理というプロダクトを開発している AngularJS 1.4で構築されたフロントエンドをAngular 4でリプレイスする作業を始めている 同時に、アプリケーションからUIコンポーネントライブラリを分離する試み UIコンポーネントライブラリでAtomic Designを試している エンジニア視点での話
Atomic Designとはこんにちは。 デザイナー間で話題にされだしてから結構時間も経ってきましたが、UIデザインにおいてAtomic Design（アトミックデザイン）という考え方があります。 Atomic Designの詳しい説明は別のブログに譲ろうと思いますが（逃げ）、ざっくりいうと、UIコンポーネントをAtoms（原子）、Molecules（分子）、Organisms（有機体）、Templates（テンプレート）、Pages（ページ）の5つの単位に分けてデザインを構築していくという方法論です。 メリットとしては ・無駄なUIコンポーネントが増えなくなる ・一貫性のあるデザインをつくることができる ・UIコンポーネントが一覧化され、チームでコラボレーションしやすくなる と言ったことが挙げられます。 とりあえず導入してみるかなり前の話ですが、Sketchバージョン41でシンボルを入
Your current browser isn't compatible with SoundCloud. Please download one of our supported browsers. Need help?
はじめに Flutter は宣言的 UI フレームワークを採用しており、階層的に UI を実装することが可能となっています。 Flutter を始めとして SwiftUI や React Native などの台頭により、近年では宣言的 UI でのネイティブアプリ開発がトレンドとなっていますが、その原型と言えるものは HTML の言語仕様として Web フロント開発では既に定着していました。 その Web フロント開発において注目されているコンポーネント設計手法があります。それが Atomic Design です。 この記事では、Flutter による宣言的 UI 実装と Atomic Design によるコンポーネント設計を組み合わせ、堅牢かつ再利用性の高い Widget 及び画面を実装することを目指します。
Atomic Design: The Book
So I am writing a book. And I am really excited about it. It’s called Atomic Design and it’s all about creating and maintaining effective interface design systems. Here’s what I’m going to cover in the book: Explain why it’s increasingly essential to think of interfaces as systems rather than a collection of pages Introduce atomic design as a sound methodology for crafting effective interface desi
ここ半年開発していた動画サービスをベータ版ながらリリースしました（正式リリースは 4 月）。そのサービスの開発において、以前投稿した Atomic Design を採用しました。本記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基本的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人（たとえばデザインよりもエンジニ
2018年4月25日紙版発売 2018年4月23日電子版発売 五藤佑典 著 A5判／320ページ 定価3,278円（本体2,980円＋税10%） ISBN 978-4-7741-9705-0 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 「1画面を変更したつもりが，アプリ全体のUIが崩れてしまった」 「理想のデザイン通り実装したのにユーザーが使いにくい」 「コードが複雑に入り組んでいてもはやメンテナンス不能」 こんな課題の数々は，Atomic Designの考え方を使えば解決できます。 本書では，UI設計のこれまでの問題をあぶり出し，設計の本質から，具体的な手順，
ダウンロード 以下のファイルをダウンロードできます。圧縮ファイルをダウンロードしていただき，適宜解凍してご利用ください。 ダウンロード ui-components.zip お詫びと訂正（正誤表） 本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。
デザインシステムの類も作ったことがある（今もやっている）のだが、なぜ Atomic Design に良さを感じないのかを思いつき次第まとめていく。 （余談だが自分の務めている会社はデザイナにも Atomic Design を好む人がいないのでこの辺で揉めたことがない。むしろ「やっぱ無理でしょ」「だよねー」ぐらいに意見があっていると思っている）
Atomic Designでコーディングしてたら規約ができたので、それを使って更にコーディングしてみた。 - Qiita
Atomic Designでコーディングしてたら規約ができたので、それを使って更にコーディングしてみた。Vue.jsAtomicDesign Atomic Designとは？ 知っている方は、こちらまで読み飛ばして下さい。 Atomic Designには階層と、それぞれの役割がある 原典によると、 Atoms(原子) Molecules(分子) Organisms(生体) Templates(テンプレート) Pages(ページ) の５つの階層がある。それぞれ説明すると、 Atoms 原子 現実世界における原子 ＝ それ以上分割できない ユーザーインタフェースにおける原子 ＝ 分割すると機能しないから、それ以上分割できない これをみて、「分割できるかどうか」＝「粒度」を追い求めてしまうことが多いが、それはあまり意味がない。 大事なのは粒度ではなく、Atomにするメリットを享受できるかどうかに
この記事は株式会社ソニックムーブ Advent Calendar 2017 の18日目の記事です！ 最近 Atomic Design というワードをよく見かけるけれども… 実際どういうものなの？ なにそれおいしいの？ 状態だったので、思い切ってかじってみることにしました。 Atomic Design って何さ？ Atomic Design とは、デザインシステムを作るための方法論です。 ページ内にある要素を最小単位である「Atoms（原子）」にコンポーネントとして分解します。 分解したコンポーネント同士を組み合わせてデザインしていく考え方が Atomic Design です。 この考え方自体は新しいものではなく、2013 年頃にはすでに登場していたようです。 Atomic Design デザインシステムって？？ デザインシステムとは、デザインの仕組みとその考え方をドキュメント化したものです
Atomic Design × Typescript × React × Muiの実践的なフロントエンド開発
こんにちは！BrunchMadeの@はせがわです。 この度、株式会社BrunchMadeに創業メンバーとしてジョインしました🙌 今回はそのBrunchMadeのホームページ制作にあたって、学んできたことを共有していきます。 設計：Atomic Design 言語：Typescript フレームワーク：Next.js UIライブラリ：Mui（Material-UI） はじめに フロントエンド開発している方はほとんど聞いたことあるであろう「Atomic Design」。 そもそもAtomic Designはデザインシステムを作成するための方法論ということもあり、UI設計の答えではありません。そのため、実際のフロントエンド開発に取り入れようとすると意外と手こずることが多いのではないのでしょうか？ また、記事・サイトなどを検索しても説明は載っているが、具体的なコードが少ない。Organismsの
札幌在住のWeb屋。 Bracketsが好き過ぎて本を書いたり、CSSの新しいアーキテクチャであるPRECSSを作るなど色々しております。 仕事ではHubSpotをメインにやってます。
Nowadays, digital products must be able to exist across any and all devices, screen sizes, and mediums at the same time: Every type of medium can now display our interfaces elementsSo why the hell are we still designing our products by “page” or by screen?! Instead, we should be creating beautiful and easy access to content, regardless of device, screen size or context. By keeping this in mind and
こんにちは、@ktmoukです。時間を管理できるアプリ「Hackaru(測る)」を一人で開発しています。 最近、ユーザが最初に訪れるページ、いわゆるランディングページをリニューアルしました。Atomic Designを参考に、Vueのコンポーネントを分割しています。 本稿では、個人開発でAtomic Designを使うときの作成手順をまとめてみました。Web制作の参考になれば幸いです。 ランディングページ: https://www.hackaru.app その前にAtomic Designとは？ Atomic Designは、UIのパーツを「原子(Atom)」「分子(Molecule)」「有機体(Organism)」「テンプレート(Template)」「ページ(Page)」に分類しようという考え方です。分類することでパーツが再利用しやすくなります。 詳しくは、DeNA DESIGN BLO
UXA2023 Eva Plaisted, Klaus Paiva and Maria Christley - oing smaller, to go bigger: A design system evolution
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Vue.jsでFormをAtomic Designしてみた時のコンポーネント間のデータのやりとり
24. 24 コンポーネント間のデータのやりとり • 基本的にデータはPagesかOrganismsで管理する • APIコールやStoreでデータを取得・保持する場合もPagesかOrganismsで • 要するに、MoleculesやAtomsは状態をなるべく持たないようにする • 親⼦のコンポーネント間のやり取りは props in / events out で • 親から⼦にはpropsでデータを渡す • 親でpropsの値が変更されれば⼦に伝搬する • ⼦から親には$emitでイベントを発⾏し、データの変更を伝える • 親コンポーネントが⼦のイベントを検知する 25. 25 コンポーネント間のデータのやりとり • 基本的にデータはPagesかOrganismsで管理する • APIコールやStoreでデータを取得・保持する場合もPagesかOrganismsで • 要するに、Mo
Atomic Design × Sketch Libraryを用いてデザインファイルを作る - Qiita
Sketch LibraryはVersion 47(2017年10月10日release)で追加されたSketchの新機能です。 Sketchファイル間で作成したSymbolを共有、同期することが出来ます。 ※Symbol: Sketchで繰り返し利用可能なページとは別で切り出された要素のこと Sketch Libraryが便利な点は、以下のように今までは、共通の要素に対して修正が入ったときに全てのデザインファイルに対して手動で修正が必要でした。(デザインファイルを画面毎に分割している場合など) 今まで Sketch Libraryを活用した場合 Sketch Libraryを活用するとLibraryの更新があった場合には差分を抽出して、画面の更新を行うのみ(ボタンクリックのみ)で完結することが出来ます。 詳しい使い方は公式を見て頂けると！ 両者のメリットを改めて考えると Atomic D
目次 Pattern Labとはなにか Atomic Design をざっくり説明 この記事の対象者 インスタレーション Pattern Labとはなにか Pattern Lab は Brad Frost が提唱している新しいUI設計手法 Atomic Design で作成したUIセットのスタイルガイドを作るツールです。 (2018/3/1追記:1998年からそのような考え方があった http://danieldelaney.net/atomic/ ) なにができるかは Pattern Lab Demo をみれば一発です。Atomic Designにしたがって設計したUIセットのスタイルガイドを確認できます。 Atomic Design のわかりやすい説明はGoogleの中の人が このサイト で解説しています。 Atomic Design をざっくり説明 ざっくり説明します。 設計の目的は
Vue CLI 3.0 plugin for creating apps using Atomic Design & Storybook - DEV Community 👩💻👨💻
Vue Atomic Design uses Storybook as its design system tool. Originally created for React, Storybook is tool for creating UI Components in isolation. The advantage of using Storybook is that we can create our style guide and our project at the very same time without maintaining both which is great for both small and large scale applications. Once you install the plugin the storybook will be configu
Atomic Designとフロントエンドのインピーダンスミスマッチ / Impedance mismatch in atomic design
# URL あとがき: https://nrslib.com/postscript-impedance-mismatch-in-atomic-design/ HP: https://nrslib.com Twitter: https://twitter.com/nrslib # Summary 2019/2/8「第２回AtomicDesignについて考える会（https://thinkatomicdesign.connpass.com/event/115574/）」にて行った LT 用のスライドです。 アトミックデザインをフロントエンドに適用したときのインピーダンスミスマッチとそれに対する向き合い方についてお話しています。
①デザインの効率が格段に上がる Atomic Design では画面要素を細かくコンポーネント化しています。ですので、一度作成したコンポーネントを配置するだけで、画面に表示することができました。特に効率が格段に上がった場面として、画面開発中にUIが追加された際に、すでに作成済みのコンポーネントを再利用することで、新たなパーツをすぐに作成※することができたという場面がありました。 ※すでに作成済のボタンコンポーネントとテキストコンポーネントを組み合わせて、ボタンテキストコンポーネントをデザインできたこと ②ページデザインに統一感が生まれる 今回複数人で複数の画面開発を行いました。全員が同じ画面を実装したわけではないため、画面によって必要なコンポーネントは異なります。しかし、画面の実装方法が定まっていたため、誰が実装しても画面の統一感を保つことができました。実際に、手順に沿って開発するだけで初
Atomic Design for a UI/UX design and programming workflow (アトミックデザインによるUI/UXデザインとプログラミングのワークフロー)｜F Lab｜Fixel株式会社
デザイナーはアプリケーション全体をデザインしてから細かい部分を調整して行きます。先ずは生命体を作り、それを原子までに分割して調整しているような作業です。一方、プログラマーはデザインされた画面から再利用できる部品を作り、それらを組み合わせることで動くアプリケーションを構築して行きます。原子を組み合わせて、生命体を作っていくような作業です。全体から細かい部分に精度を上げながら設計して行き、また細かい部分から作り始め、徐々に全体に組み合わせて行く、一連の流れのようなプロセスと捉えることができます。 本記事では上記のプロセスの例として、デザイナーがワイヤーフレームを作り、画面の各要素を分割します。次にプログラマーは各要素を部品として作り始めるます。見た目を左右するビジュアルデザインに対してはスタイルを簡単に変更できるようにして、デザインの変更を適用しやすくなります。このようなプロセスを実現するには
こんにちは。ひらやま（@rhirayamaaan）です。 この記事は、GLOBIS Advent Calendar 2020 に参加している記事です。 さて、Atomic Design という言葉が巷で話題になってからだいぶ日は経ちますが、私の「Atomic Designってデザイナーには難しくない！？という話」という記事の LGTM 数も現時点（2020/12/08 時点）でゆるやかに増加傾向にあり、まだまだ Atomic Design を考えている人たちは多いのではないかと思います。 そんな中で、昨今「OOUI」という言葉をよく耳にするようになりました。 ソシオメディアの上野さんが「オブジェクト指向UIデザイン」という本を刊行されたことで、より一層この言葉が世に広がったように思えます。 オブジェクト指向というものを UI デザインの領域に持ってくることで、エンジニアがオブジェクト指向で
Atomic Design by Brad Frost - Make and Maintain Great Design Systems
Atomic Design by Brad Frost Atomic Design details all that goes into creating and maintaining robust design systems, allowing your organization to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective style guides, and showcases techniques to transform your tea
Wow, what a clickbaity headline – it makes me apologize to Brad Frost in this very first sentence. But now that I got your attention, let me elaborate in modest terms so I can back up this sentiment. The good parts I like Atomic Design on a conceptual level and I think it works as a methodology to a good extend. What I like in particular is how it proposes a mental model that connects to a known c
数ヶ月Atomic Designを採用したNuxt(Vuexパターン)アプリケーション開発を行ってみて、思ったことのメモ。 Atomic Designとは bradfrost.com 概要だけ知りたい人に説明すると、基底となるコンポーネント(原子)を作り、その原子を組み合わせて分子コンポーネントを、さらに分子を組み合わせて有機体コンポーネント、そして最終的にそれらを組み合わせたページを組み上げる、というボトムアップ的アプローチのデザイン手法である。 Nuxt(Vuex)におけるコンポーネント分割方針 Atomic Design手法の肝は、 Atoms/Molecules/Organisms のコンポーネント設計にある。 この設計が抽象的なままだと、アトミックデザインの恩恵は十分に得られない。 コンポーネント設計で、まず最初に頭に入れておきたいのは、 Stateless or Statefu
Notionに書きました（未だにはてなブログにNotionのURLを貼っても正しく展開できない...Twitterカードは対応してるんだけど） https://www.notion.so/lacolaco/Angular-Atomic-Design-NgModule-52b1c99892e44e0ba032a1da7fbd7f50
Riot.js と Atomic Design ではじめるテクニカルクリエイター を参考にしていて、うちもStyle Guideがあったら作業が捗るかなということで、 とりあえずテンプレ的なものを作ってみました。 使い方 適当にダウンロード https://github.com/negibouze/styleguide-template パッケージをインストールして実行 ※一回目の起動はうまくいかないかもしれないです。 ├── src │ ├── components │ │ ├── atoms │ │ │ ├── foo │ │ │ │ ├── example.tag │ │ │ │ ├── foo.styl │ │ │ │ └── foo.tag │ │ │ └── plus │ │ │ ├
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atomic Designを
導入する理由と悩み
- Speaker Deck
Atomic Design ～堅牢で使いやすいUIを効率良く設計する
React の Component 設計と Atomic Design
[LTスライド&原稿]実装まで視野に入れるならAtomic Designを辞めましょう - Qiita
Adobe XDで始めるAtomic Design
【TypeScriptで学ぶReact入門】Atomic Design実践ガイド📙
おまえは原子か分子か。Atomic Designで扱いに迷うUIコンポーネントたちをどうするか｜きたじぃ
vol.114 デザイナーと読む「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」
Flutter x Atomic Design で堅牢なデザインパターンを実現しよう
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
Atomic Design ～堅牢で使いやすいUIを効率良く設計する
サポートページ：Atomic Design ～堅牢で使いやすいUIを効率良く設計する
Atomic Design に対する感情 - fsubal
Atomic Design に学ぶ Web 開発をハッピーにするデザイン手法 - Qiita
Adobe XDで始めるAtomic Design | Thinking Salad
Atomic design: how to design systems of components
Atomic Designでランディングページを作ったので、作成手順とかまとめました。｜ktmouk
Building Design Systems with Atomic Design
「明日からフロントもよろしく」と言われたときに備える Atomic Design
導入 Pattern Lab -Atomic DesignによるUIスタイルガイド作成ツール- - Qiita
Atomic Designを理解する② - Qiita
OOUI の考え方を拝借して Atomic Design を再考してみる話 - Qiita
Atomic Design is messy, here's what I prefer
Nuxt(Vuex)でAtomic Designを採用するときのメモ - Do Something
AngularにおけるAtomic DesignとNgModule - 余白
Riot.js + Atomic Designのスタイルガイド用のテンプレート - Qiita