こんにちは。 デザイナーの原です。 さて、皆さんは「Atomic Design」をご存知でしょうか？ 今回は、Sketchを活用した「Atomic Design」の実践方法についてご紹介したいと思います。 Atomic Designとは パーツ・コンポーネント単位でデザインを行っていくデザインシステムのことです。 通常のページ単位のデザイン方法とは異なり、パーツ同士を組み合わせて制作していく方法を指しています。 原子（Atomic）を一番最小のパーツとし、分子（Molecules）、有機体（Organisms）、テンプレート（Templates）、ページ（Pages）の5つの単位に分けられています。 原子（Atomic） パーツの中で一番最小のパーツを指し、UIの基礎的な要素になります。 他の原子と組み合わさることで、分子になります。 分子（Molecules） 2つ以上の原子から構成され
atomic_design
パソコン、タブレット、スマートフォンなどのデジタル家電を複数台所有するのが当たり前になりつつある今日この頃。 あなたはまだページ・スクリーンごとにイチからデザインをしていますか？ アトミックデザインなら、デザイン要素をさまざまなページ、画面サイズ、デバイスに対応させることができ、開発が効率化されます。 アトミックデザイン（atomic design）とは アトミックデザインはモジュラーデザインの考え方を元にブラッド・フロストさんが考案したUIデザイン手法。 モジュラーデザイン(Moduler design)とは、製品の各モジュールを作成した後、それらを繋げて完成品を作る手法。アトミックデザインにおけるコンポーネントがいくつも組み合わさったような製品のパーツをモジュールといいます。 インターフェイス作りは、常に最小の素材 = Atom(原子) の組み合わせであるべき”を基本理念に、原子が分子
要素還元主義的なAtomic Design
2016年7月20日 著 Atomic Designの考え方と利点・欠点という記事を読みました。Braad Frost氏の提唱するAtomic Designについては、個人的に氏を尊敬していることもあり、しばらく前から追いかけています（書籍もプレオーダー済みではあるけど、完成途上のものを読み進めてはいない）。自分の観測範囲の限り、英語圏では比較的普及している一方、Atomic Designについて日本語で読める記事というのはあまり多くない印象を抱いており、そういう意味で貴重というか参考になりました。特に欠点として挙げられている しかしデザイナーからすると、Atomic Designの考え方でデザインすることは難しいかもしれません。 実際、今回デザイナーへAtomic Designについて説明しました。 ただ、デザインしてもらうときはコンポーネント単位ではなくページ単位でデザインしてもらう従
2018年6月6日、DMM.comが主催するイベント「DMM meetup」が開催されました。今回のテーマは「ReactとAtomicDesignからみるコンポーネント開発」。フロントエンド開発において重要性が増しつつあるコンポーネント開発手法について、「React」と「Atomic Design」の2つをキーワードに、各分野のプロフェッショナルたちが自身の知見を語ります。プレゼンテーション「Alternative Atomic Designをさがして」では、よりデザインの吉竹遼氏が登場。 Atomic Designをどう使うか 吉竹遼氏（以下、吉竹）：では、LT2人目の吉竹です。よろしくお願いいたします。 今日来てる方で、エンジニアの方はどれくらいいらっしゃいますか？ （会場挙手） やっぱりさすが、多いですね。デザイナーは……？ （会場挙手） ディレクターさんは？ （会場挙手） ちょっと
Atomic Designとは 〜Atomic Designを使ったコンポーネント指向のUI開発：序〜 - UGAP Engineer's Blog
はじめに UI（画面）コンポーネントを切り出したいときにどういう粒度で切り出したらいいか迷う時があります。 適切な粒度で切り出しておかないと、位置を組み替えたりデザインを修正したい場合に、使い勝手が悪くて作り直しになってしまうからです。 メンテナブルなUIコンポーネントに切り出すにはどうしたらよいでしょうか。 いろいろ調べた末、Atomic Design（アトミックデザイン）というアイデアに行き着きました。 このAtomic Designを使ったコンポーネント指向のUI開発を（序）（破）（Q）のシリーズを使って紹介したいと思います。 （序）では、Atomic Designがどのようなものかをご紹介します。 （破）では、Atomic Designを導入した際にうまくいかなかった点と工夫した点をご紹介します。 （Q）では、具体的な開発例をご紹介します。 このシリーズが同様に困っている現場の参考
こんにちわ。ユニバの MJ です。 2017 年も終盤に差し掛かり、今年のフロントエンドの印象としては、特にフレームワーク的な革新はなく中身が成熟していった印象があります。 そんな中で一つまとめておきたい話が一つ。 それが Atomic Design (アトミックデザイン) です。 はじめに Atomic Design という言葉を最初に耳にしたのは とある勉強会で Abema の方の発表でした。 確か 2015年 の冬あたり グラディオ「実際やってみて改めて実感したぜ、Abemaはすげぇ゛よ゛！！！」 イグニス「ああ...もうすでに完成されてたな」 グラディオ「コーディング・デザイン・自由度、3つが調和しねぇと、どれかが飛びでたってだめだ」 プロンプト「おれ、次からもっとフロントエンドを楽しめそうな気がする」 ノクティス「ああ、俺も」 と今更ながら思うわけですな。 よく語られがちなのは
The document contains a collection of URLs and hyperlinks related to topics including Photoshop shortcuts, ordering layers in Photoshop, atomic web design, and agile UI development. It also includes references to websites, videos, and images focused on design and development topics. The document lists the name Yusuke Goto and includes links to his website and social media profile.Read less
Designing Systems | Atomic Design by Brad Frost
Chapter 1 Designing Systems Create design systems, not pages A long, long time ago, there were these things called books. Remember them? These contraptions were heavy and bulky and made from the pulp of dead trees. Inside these books were things called pages. You turned them, and they cut your fingers. Awful things. I’m so glad these book things with their razor-sharp pages aren’t around anymore.
PLAIDでエンジニアをしている @kei-tamiya です。 本記事は PLAID Advent Calendar 2019 の 20日目になります。 社外で個人的に開発しているプロジェクトでAtomic Designを採用しており、ある程度知見が溜まったので、1つの運用例としてご紹介したいと思います。 前提 どんなプロジェクト？ もともとVue.jsを用いて動いているアプリケーションを1からリファクタするプロジェクト 別リポジトリに、Nuxt.js, Typescript, Vue Apolloを使用して開発 フロントエンドエンジニア3〜4人、デザイナー1人 全員リモートで、週1で30〜60minぐらいミーティングできる GraphQLのAPIサーバーはおよそある状態 主に大きなページごと（Userに関するページなど）をエンジニア1人が担当して開発する もともと課題に感じていたこと・
DevicebookというNuxt.jsとLaravelを使ったWebサービスを個人開発しています。 最近、「うわっ、わたしのコンポーネント設計、見づらすぎ・・・？」と思いはじめたため、重い腰をあげてAtomic Designを導入しはじめました。 Atomic Deisngのメリット Atomic Designを導入すれば、コンポーネントの設計に統一感をもたらすことができて、再利用性が高まるという恩恵を受けられます。 今まではVue.jsのスタイルガイドに準拠しながら設計をしていましたが、個人開発サービスの規模感でも、そろそろ限界が見えはじめました。 コンポーネントの設計が、機能や開発時期によってバラつきがあるため、可読性が低い。 コンポーネントが他のコンポーネントやVuexと密結合になっているため、再利用しにくい。 つまり中規模段階に入るとVue.jsのスタイルガイドに限界が見え始める
Retty Advent Calendar 2018 12日目の記事です。 昨日は @yongyu-li さんの Go interfaceの理解しにくいところ でした。 ちょうど現場でGolang触りはじめたばかりの自分には割とタイムリーな話題でした。 TL;DR めちゃくちゃ大げさなタイトルですが、単に Atomic Design を導入しようとした現場で 抜け漏れ 運用忘れて形骸化するリスク 運用メンバーがレビューの権威化する これらの課題を ESLint のルールを作ることで解決しようとした話です 完成した eslint-plugin-atomic-design はこちら これは「このプロジェクトから俺が居なくなったあと、俺のコードは一片も残らなくていいから、秩序だけでも残ってくれ……！駆動」で開発しました。 前提条件: よくある現場の話 Rettyのweb版は2011/6にリリース
“Atomic Design”を導入するときに便利な Sketchプラグイン – Coiney Product Team – Medium
デザインしちゃったあと、“Atomic Design”を導入するときに便利だった Sketchプラグインをまとめてみました。 目次はじめに ・社内管理画面のリニューアル ・Atomic Design…いきなり「原子」と言われても。 あってよかった便利なSketchプラグイン ・1. シンボルを整理整頓「Symbol Organizer」 ・2. リネイムの定番「Rename It」 ・3.レイヤー探すなら「Sketch Search Everywhere」 ・4. 空のフォルダ一斉削除!!「Cleanup Useless Groups」 ・6. おまけ はじめに社内管理画面リニューアル弊社では約1年前から社内管理画面のリニューアルをしています。ほぼ新管理画面へ移行が完了。 でも実は画面のデザインはかなり前に完成していました。 すでにリニューアルはほぼ完了しています。とはいえ、機能面のPDC
Vuetify.js でお手軽マテリアルデザイン + Atomic Design「風」のディレクトリ構成 - s平面の左側
Vue.js #4 Advent Calendar 2017 - Qiita の 19 日目のエントリー。 （先日の記事の続きを書こうと思っていたが、こちらの日が先に来てしまった） 最近、フロントエンドエンジニア・デザイナー不在のプライベートな開発において、フロントサイドの実装を任されることがあった。 その際に Vuetify.js を用いて比較的簡単にマテリアルデザインのページを実現できたので、その備忘録。 （意見・ツッコミなどは歓迎） vuetifyjs.com 出来上がった画面のイメージはこんな感じ。 ※グラフ描画は Vuetify.js で提供していないので、 vue-chartjs を利用している。 このレベルであれば、Vue.js の基礎知識だけある状態から1日で辿り着くことが出来た。 概要 Vuetify.js はマテリアルデザインのコンポーネントを80種類以上提供している。
調べてみた経緯 Reactを勉強して３ヶ月くらい経つが本を読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ！？」って思い調べてみました。 ReactとAtomic Designの相性がかなり良いらしいす。 Atomic Designとは Atomic Designとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。 Atoms(原子) Molecules(分子) Organisms(有機体) Templates(テンプレート) Pages(ページ) Atoms(原子) Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。 ToDoListのモックで例をあげると このような構成のページをAtomに分けると以下のようになります。 テキストフォー
Atomic Designの導入に際して工夫したこと 〜Atomic Designを使ったコンポーネント指向のUI開発：破〜 - UGAP Engineer's Blog
本稿は（序）（破）（Q）のシリーズの2番目の記事（破）になります。 シリーズ（序）ではAtomic Designの概要 を、 シリーズ（Q）ではAtomic Designの実装例を説明していますので、そちらをご覧ください。 Atomic Design（アトミックデザイン）とは、UI（画面）をコンポーネント単位で設計し、それらを組み合わせて使い回し可能なUIを作成するための手法です。 Atomic Designの考えのものとUIコンポーネントを切り出していくことはいくつかの利点があります。 しかし、Atomic Design はUIを構築するための方法論でしかありません。 つまり、デザインや実装方法、運用方法は独自に考える必要があります。 実際に導入してみるといくつか乗り越えなくてならないハードルが存在することがわかりました。 本稿（破）ではそのハードルを乗り越えるために、どのような工夫した
2018年10月18日、Roppongi Designersが主催するイベント「Designer X Engineer Development #01」が開催されました。デザイナーとエンジニアでどのように開発を進めていくか。デザインをプロダクトに落とし込むプロセスについて、どのような設計方法・ツール・コミュニケーションを行なっているかを共有する勉強会。今回は、5社のエンジニア・デザイナーが集い、自社における協同の現状を紹介します。プレゼンテーション「共業≒協業を目指すためのAtomic Designの使い方 」に登場したのは、DMM.comの河西紀明氏。 自己紹介と今回のテーマ 河西紀明氏：こんにちは。DMM.comの河西（@norinity1103）と申します。よろしくお願いします。 僕は現在、DMMテクノロジー本部のデザインストラテジストとして、ブロックチェーンなど先進的な技術を活用し
The “Other” Interface: Atomic Design With Sass — Smashing Magazine
We’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future. But we shouldn’t forget that developers are users, too. Therefore, our convention for naming and organizing files is critical if we are to ensure active development in the future. But do we really design the partials, files and director
Web サイトを構築するにあたって、よく参照されるコンポーネントの分類手法として、Atomic Design と Presetational and Container Components があります。 Atomic Design … UI の粒度と具体性によって 5 レベルに分類するPresentational and Container Components … 「表示」と「振る舞い」の役割で分類するここでは、それぞれに関して概要をざっと眺めた上で、Next.js プロジェクトにどんな形で適用していけばいいかを考えてみます。 Atomic Design とはWeb デザインにおける UI コンポーネントの分割粒度の考え方として、Brad Frost 氏の Atomic Design があります。 Atomic Design - Brad Frost 氏のブログ記事Atomic Des
はじめに VALU Advent Calendar 2019 11日目 (!) の記事です! VALU ではデザインに Atomic design (アトミックデザイン) を採用しています。 本記事では，VALU のデザイナーが作成した素敵な Sketch シンボルを差分なく反映し，かつ変更に耐えうる SwiftUI を運用するための方法をご紹介しようと思います。 昨年の VALU Advent Calendar にて，Sketchと1対1を目指すAtomic designなStoryboardの作り方 を投稿しました。本記事はそれを SwiftUI で行ったものです。まだご覧になっていない方は先にご覧ください。 Highlights SwiftUI を利用することで，「ファイル数増加」「子View更新時の伝播」「親ViewのConstraints破棄」など，UIKit (昨年の実装) で
がんばらない
Atomic Design と BEM で CSS に立ち向かう | mediba Creator × Engineer Blog
制作部フロントエンドエンジニアの金森です。Vim 派です。 長期的に運用していく CSS を書くのって難しいですよね？ OOCSS や SMACSS、BEM、FLOCSS などの CSS 設計概念を用いてメンテナンスしていても、気がついた時には見るのも嫌になっていることがあります。 OOCSS を考えた Nicole Sullivan 氏1 も、「CSS is awesome. Code is too fragile.（CSS は素晴らしいが、とても壊れやすい）」と述べています2。 Atomic Design の上で実際どのように壊れにくい CSS を構築するのか紹介します。 Atomic Design とはBrad Frost 氏3 が開発した Atomic Design4 とは UI コンポーネントの要素を化学原子論的な要素にみたてたデザインシステムです。 小さく単純なコンポーネントを
イベント概要 https://base.connpass.com/event/122517/ 2019/03/20(水) 20:00 〜 21:30 会場：hoops link tokyo（東京都渋谷区宇田川町28-4 三井住友銀行 渋谷西ビル6階） ハッシュタグ：#atomic_shibuya 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる スライド：https://speakerdeck.com/simezi9/build-up-vue-dot-js-component-library-for-next-five-years なぜコンポーネントライブラリを作ったのか ミッション：価値の交換をよりシンプルにし、世界中の人々が最適な経済活動を行えるようにする ネットショップ作成サービス・ショッピングアプリ「BASE」 裏側の実装 サービスインから継ぎ足し続けられたコード
2019年7月31日、Vue.jsに関する知見を共有する勉強会「Roppongi.vue #2」が開催されました。Vue.jsをさまざまな角度から掘り下げるライトニングトークには4人が登場。「Atomic Designと刺さらない現場」に登壇したのは、果物リン氏です。登壇資料はこちら Atomic Designと刺さらない現場 果物リン氏：前回もRoppongi vueでしゃべらさせていただきました果物リンです。 今回は実質懇親会LT的なノリだと思いますが、「Atomic Designと刺さらない現場」というタイトルでしゃべりたいと思います。今回の内容はちょっと若干過激なんじゃないかなと思うんですけど、まあ、お気持ちなのでというところで。 みなさん、Atomic Design使っていますか？ 使ったことがあるよという方、手を挙げてもらっていいですか？ （会場挙手） おっ、半分はいかないかな
Extending Atomic Design
Atomic design is now over 6 years old (which is nuts!). I’m thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens. I thought I’d be sick of talking about this by now, but I’m still passionate about atomic design after hearing so many success stories, as well as w
Atomic Designに関して概要イメージはあるけど、もうちょっと具体的に知りたかったのでまとめました。 ・具体例の画像が多くてわかりやすい 珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで ・セレクタの詳細度の視点はAtomic Designと理にかなってるよなー Atomic Designの考え方と利点・欠点 ・クラス名の例が多くて命名規則の参考になった What is Atomic Parts Base CSS(APB CSS) ・実案件に導入した例でボトルネックとか参考になる Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 「なぜ効率化するのか、誰が嬉しいのか」といった本質的な考え方に加えて、デザインガイドラインに適用するってところはめっちゃ頷いた Atomic Design
「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読んだので、自分なりの備忘録。 コンポーネント指向設計 本書では「コンポーネント・ベースの UI 開発」「UI コンポーネントの設計」とある。英語では "Component Based Design" が一般的表現の模様。ここでは「コンポーネント指向設計」と表現する。 メリット 開発者メリット 堅牢性 コンポーネント単位でデストできる 不都合のリスクポイントを減らすことができる メンテナンスしやすくなる 解決する問題を小さくできる 効率化 再利用で実装量を減らす 平行開発で待ち時間を減らす 仕様変更による手戻り作業を最小化する 新規参入開発メンバーを最短で戦力化する 複数のテストアプローチでテスト工数を下げる 複数アプリケーションの開発を容易にする ユーザーメリット 多機能アプリケーションのユーザビリティを向上させる
Web設計とソフトウェア開発は、これまで真逆の考え方をしていました。 通常Webサイトにおける設計では、ページ単位でデザインカンプを作成しますが、ソフトウェア開発では、コンポーネント単位で設計することが多くあります。 ところが、最近ではAbemaTVをはじめとして、コンポーネント単位でデザインを行うWebサービスも増えてきました。 その中でも、今注目されているのが、「Atomic Design(アトミック・デザイン)」と呼ばれるデザインシステムです。 Atomic Designはデザイン仕様の変更に強く再利用性が高いと言われており、Webサービスの開発に向いていると言われています。 今回は、コンポーネントベースでWebデザインを行うことができるAtomic Designの考え方の基本をご紹介します。 コンポーネント単位のデザインとは果たしてどういうもので、メリットはどこにあるのでしょうか。
React NativeとAtomic Designの相性がよくなかった話 – Undefined Engineering – Medium
こんにちは、Undefinedのアプリエンジニアの塚本武志(https://twitter.com/itometeam)です。 弊社ではiOS/Android側のアプリ開発にReact Nativeを採用しています。 React Nativeに限らず、画面数が多いアプリ開発ではViewの管理が開発のスケーラビリティのために重要になります。 React Nativeはまだ新しく、採用しているプロダクトも少ないため、まだ運用のグッドプラクティスがコミュニティに蓄積されていないのが現状です。今回は、Viewの管理についてReactでは一般的になりつつあるAtomic DesignをReact Nativeプロダクトに導入してみてわかったメリットとデメリットを書いておきます。 Atomic Designとは Atomic DesignはコンポーネントをAtoms/Molecules/Organis
Atomic Design と BEM で CSS に立ち向かう | mediba Creator × Engineer Blog
制作部フロントエンドエンジニアの金森です。Vim 派です。 長期的に運用していく CSS を書くのって難しいですよね？ OOCSS や SMACSS、BEM、FLOCSS などの CSS 設計概念を用いてメンテナンスしていても、気がついた時には見るのも嫌になっていることがあります。 OOCSS を考えた Nicole Sullivan 氏1 も、「CSS is awesome. Code is too fragile.（CSS は素晴らしいが、とても壊れやすい）」と述べています2。 Atomic Design の上で実際どのように壊れにくい CSS を構築するのか紹介します。 Atomic Design とはBrad Frost 氏3 が開発した Atomic Design4 とは UI コンポーネントの要素を化学原子論的な要素にみたてたデザインシステムです。 小さく単純なコンポーネントを
こんにちは、ディレクターの山岸です。 ここ1年ぐらいで、ATOMIC DESIGNというワードをよく目にするようになりました。 デザイン手法の一つなのですがサイトを運用する上でとても効率的で理にかなっているので、デザイナーだけでなくディレクターも知っておくべきことだと思いブログで紹介します。 ATOMIC DESIGNとは Brad Frost 氏が提唱したデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 ATOMIC DESIGNは以下の5要素からつくられるデザインシステムになります。 ATOMIC DESIGNの5要素 ATOMS（原子）もっとも小さい粒度 MOLECULES （分子）アトムが組み合わさってできたモジュール ORGANISMS（有機体）組織-モジュールが合わさったデザイン TEMPLATES（
Brad Frostが提唱したAtomic Designはすでに多くの場面で採用されていますが、もともとがUIデザイン手法であるため、フロントエンドアプリケーション開発におけるコンポーネントの分類に直接的に適用できないものも出てきます。 そこで、最近採用している"Applicational Atomic Design"について具体的なコードとともに紹介していきます。 Reactを前提として説明していきますが、VueにはもちろんAngularを用いたプロジェクトに対しても、同様の手法を適用することができるでしょう。 紹介する方法論をnext.jsに適用したアプリケーションのソースコードは、GitHubに公開しています。 "Applicational Atomic Design"とは? Atomic Designに基づきつつ、アプリケーションの振る舞いやドメインモデルとの関わりを視点に加え、フ
Reactを使ったコンポーネント指向設計で、Atomic Designをやめようとしている話 - ITANDI Engineer Blog
はじめに OHEYAGOの開発をしている田渕です！ OHEYAGOはtoCサイトなので、UI・UXを重要視しており、チームとしてデザイナーを2人抱えております。 デザイナーは他業務との兼任ですが、それに対してエンジニアは3人なので、デザイナーの割合がとても多いチームです。 エンジニアとデザイナーで共通認識を持ち、開発効率を向上させるために、デザインシステムとしてAtomic Designを採用していました。 しかし、運用がうまく行かず、ある問題が露わになってきたため、Atomic Designをやめようとしている最中です。 そこで、上手く行かなかった知見の共有として、どういった問題が出てきて、どのようなデザインシステムに舵を切ろうとしているのかを紹介します！ 最初にAtomic Designを採用した理由 当時のチームには、Reactでの開発経験が多い人がおらず、コンポーネント設計も手探り
Atomic Components: Managing Dynamic React Components using Atomic Design
Atomic Components: Managing Dynamic React Components using Atomic DesignDesigned by Brad Frost and Dave Olsen, atomic design is a wonderful “methodology for creating design systems” backed by Pattern Lab with five distinct levels or ‘building blocks’, which, when combined, create semantic, contextual relationships between interface objects. In this two-part series, we’re going to explore how these
フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 弊社では新しいプロジェクトを立ち上げの際に、Nuxt3を採用することにしました。 また、従来までのプロジェクトの反省点として、 Atomic Design を考慮して実装することにしました。 ただ、Atomic Design について調査していくと、Atomic Design の考え方をそのままディレクトリに落とし込んでいくのはどうやら悪手のようで、Google サジェストからも、いくつか失敗のケースが散見されました。 そこで、Nuxt3 のディレクトリ構成にマッチするような Atomic Design の構成を考えてみたので紹介します。 Atomic Design とは Atomic Design とは、パーツ単位でUIデザインを設計する手法です。 Atomic Design 自体は 5年以上前から提唱されている設計方
うぇびん(holyKurka) @webbingstudio プロジェクトのディレクトリ構成を検討した結果こうなった。Atomic Designの考え方を採用しつつ、そういうのわからない人にも探しやすいディレクトリ構成を考えてみました pic.twitter.com/hUo45EcREA 2017-06-13 19:38:05 リンク Brad Frost Atomic Design Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy in paperback and/or ebook formats. We’re not designing pages, we’re designing systems of component
GitHub - diegohaz/arc: React starter kit based on Atomic Design
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
Atomic DesignとCSS設計 第1回 Atomic Designとは何か 「Atomic Design」という言葉を聞いたことがある人は多いかと思いますが、実際それがどのようなものなのか、理解しにくい部分があります。本記事ではAtomic Designについて学び、それをCSS設計に活かすにはどうしたらよいかを考えます。 はじめに Atomic Designという言葉を聞いたことがあるでしょうか。Atomic Designとは、デザインシステムを中心とした設計の方法について書かれた書籍です。 Atomic Design by Brad Frost 著者のBrad Frost氏は、書籍の内容をすべてWeb上で公開しているため、上記サイトで読むことができます。 Atomic DesignについてWebで検索していろいろな記事を眺めていると、このAtomic Designの設計思想がコ
はじめに Atomic Designとはこのリンクに書いてある感じの奴です 最近のコンポーネント指向のフロントエンドでAtomic Designで失敗するチームの話をちらほら聞きます 自分も1度は失敗しました。そりゃプロトタイピングもしたことなかった状態でAtomic Designでこった画面を作ったので当然ですが。(逆に1つ目の画面で失敗に気づけてよかった では、なぜ我々はAtomic Designでフロントの開発が上手くいかないのかを説明しようと思います。(誤字脱字その他各種修正の編集リクエスト待ってます! 指摘1. 世に出回っている多くの日本語資料のAtomic Designスライドは間違っている そもそもオリジナルのAtomic Design読んだことありますか？ 読んでないなら読みましょう。英語を読むのがめんどくさいなら私のざっくりな和訳記事を読んでください。 なぜオリジナルを読
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atomic DesignとSketchの活用 | ajike switch
Atomic Designから派生した、“オルタネイティヴ”な5つのデザインシステム
Atomic Design は React に秩序をもたらすか？ - Qiita
Atomic Design という名のデザイン整理術
Amazon.co.jp: Atomic Design ~堅牢で使いやすいUIを効率良く設計する: 五藤佑典: 本
課題解決手法としてのAtomic Designの解釈と実装 - Qiita
Vue.jsでAtomic Designを実践する - Qiita
ESLintの力で秩序あるAtomic Designを後世に残す | ryonkmr.com
Atomic Design について調べて見た - Qiita
共業≒協業を目指すためのAtomic Designの使い方 Part1
Next.js アプリのディレクトリ構成を考える（Atomic Design と Presentational and Container Components）
Sketchと1対1を目指すAtomic designなSwiftUIの作り方 - Qiita
あきらめる Atomic Design
Atomic Designを実現するコンポーネント指向開発のいま - Qiita
Atomic Designが刺さる現場・刺さらない現場
Atomic Design 参考記事まとめ｜溝口慎也 / mikan
Atomic Design を読んでの備忘録 - Qiita
仕様変更に強く再利用しやすい！AbemaTVでも採用されている「Atomic Design」の基本を徹底解説
Amazon.co.jp: Atomic Design ～堅牢で使いやすいUIを効率良く設計する: 五藤佑典: Digital Ebook Purchas
ATOMIC DESIGNは長期的なサイト運営にむいていると思った - INNO diary
"Applicational Atomic Design"について
Nuxt3 向けに Atomic Design を拡張してみた - hacomono TECH BLOG
「Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい」に識者たちの鋭すぎる突っ込みが入る
Atomic DesignとCSS設計 | 第1回 Atomic Designとは何か
Atomic Designの日本語スライドに正しさを求めるのは間違っているだろうか - Qiita