こちらは Frontrend Advent Calendar 2014 19日目の記事です。 2014年 12月8日〜12月14日の間、カナダに滞在してきました。目的は12月9日〜12日に開催される Smashing Conference 2014 へ参加するためです。 海外のカンファレンスに参加するのはおろか、海外旅行もしたことがないので、今回１人でカナダに行くということで終始緊張の連続でした。（Frontrend の @hiloki さんが「僕も行こうかな」と言っていたので、心強く思っていたのですが、残念ながら叶わず。） 本記事は、カンファレンスが開催されたカナダという国にまつわるお話を Frontrend の話題を交えながら書きつつ、このカンファレンスで一番楽しみにしていたトピックである「Atomic Design」について書いていきます。 参加の理由 今まで海外カンファレンスなど参
PJでUIデザインにAtomic Designを導入したらどうだったのか | フューチャー技術ブログ
今回はUIと少しUXのお話ですこんにちは。フューチャーでUXの専門家をさせていただいている平川といいます。 フューチャー技術ブログでは、【Figma】を使ってチームでUI/UX設計するといいこと の記事を書いた久保さんと同じチームに所属しています。 PJでは最高の顧客業務を目標に、業務、UX、UIの設計と、アプリ開発をさせていただいています。 今回はPJの現場でUXとUIのデザインを通して、Atomic Designの導入はどのような結果を生んだのか、Atomic Design導入に際しての課題や取り組み方のコツなんかをお伝えできればと思います。 Atomic DesignAtomic Designは、Webページやアプリケーションを作成する際に、UIの最小要素（原子）からの組み合わせで構築していく考え方です。Atomic Designの提唱者はHTMLタグを元素周期表に見立ててそれを原子
Riot.js と Atomic Design ではじめるテクニカルクリエイター｜Technical Creator Hub
紫竹佑騎 2010年新卒入社。アメーバのサービスやソーシャルゲーム数タイトルのサーバーサイドを担当。著書に「Web制作者のためのGitHubの教科書」。BaPA１期生。 7月頃リリースされた AMESTAGE の Web 版を担当している 紫竹 です。 AMESTAGE は"芸能人とあそべる生放送"と銘打ったサービスでして、芸能人の放送する番組に対してコメントしたりギフトを贈ったり、クイズなどのコーナーに回答して一緒にあそんだりできます！！是非放送を見てみてくださいね＾＾ AMESTAGE 今回はこの AMESTAGE で利用した Riot.js というライブラリを使って、Web 開発しやすいコンポーネントをデザインの時点からワンストップで行うことができる手法をご紹介したいと思います。 俺がテクニカルクリエイターだ！ ↑これは言ってみたかっただけなんですが簡単に自己紹介をすると、僕は
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の設計思想がコ
The slides describe how you can adopt Atomic Design to make your UI development agile.
Vue.js × Atomic Design 【Vue.js Advent Calendar 2017 5日目】 - it's an endless world.
この記事はVue.js #1 Advent Calendar 2017の5日目の記事です。 昨日はakifoさんのエラーをユーザーへ伝えるVue.jsコンポーネント作りましたの記事でした。 本日は私がAtomic Designの概念を用いてVue.jsのコンポーネントを組み立てるというお話をさせていただきたいと思います。 コンポーネントって何？どう使うの？ 公式ドキュメントにも記されている通り、コンポーネントはVue.jsの最も強力な機能の1つです。 UI上の各要素をパーツ化し、それぞれのパーツの中にHTML(意味)・JavaScript(機能)・CSS(見た目)を含めることが可能です。 これにより再利用性も高まりますし、プロジェクトのリソースを整然と管理することが可能となります。 例えば、ヘッダーをコンポーネントとして使いたい場合。 次のようにMyHeader.vueを作成し、それを他の
🙋♂️エンジニアの@dachi_023です。約4ヶ月ぶりに記事を書きます、がんばります。 この記事について コンポーネントやAtomic Designについて書いています。ここではUIデザインのフローに関するAtomic Designの実践ではなく、開発(実装)のフローにはめ込んだ場合にどうすべきなのか、というお話をしています。 コンポーネントとAtomic Design ReactやVueをはじめとするライブラリのお陰でフロントエンド開発に「コンポーネント」という考え方が浸透した今日この頃ですが、そんなコンポーネントの設計についての話なんかをしているとよく現れるのが今回の主題に挙げている「Atomic Design」です。Atomic Designはデザインシステムを効率よく作成するための手段のひとつですが、その中に登場するコンポーネントを5階層(Atoms, Molecules,
This book is a work in progress. You can read more about the project here, sign up to the newsletter to receive project updates and resources, submit issues on Github, and track the progress of the project here.
Sketch ✕ Atomic Design デザインの制作時間を大幅に減らす仕組みとは？！ ｜ブログ｜root｜芯を問い、成長に貢献する
この記事はGoogleのUXデザイナーJoe Toscano氏のブログ記事を公式に許可をいただき翻訳したものです。 最近、「デザインをコーディングと同じようにモジュラーでつくる方法」という記事を書きました。その記事でも説明したように、Atomic Design は、チーム内での複製とコミュニケーションが簡単なデザインをつくることを可能にするすばらしい方法です。 チーム内でのコミュニケーション力を強化するだけでなく、モジュラーデザインは、デザインのスタイル変更をとてつもなく簡単にすることができます。適切に使いこなせば、モジュラーデザインによって制作時間を大幅に減らし、収益を大きく改善できるはずです。 有意義なコミュニケーションが重要他のデザイナーやデザインチームと仕事をするときによく経験する問題の一つが、仕事の引き継ぎです。他の人の仕事を引き継ぐとき、そのデザインが整理されていない状況という
Atomic Design の理解 : molecules と organisms をどのように分割するか - 海外のイケてるテックニュースを翻訳するよ
Original: Making sense of atomic design: molecules and organisms by Alla Kholmatova 本記事は、原著者の許諾のもとに翻訳・掲載しています。 frasco.io 👆こちらに移転しました。 我々のインタラクションデザイナーである Alla Kholmatova が FutureLearn での Atomic Design の利用の状況について考察します。 1年前、私たちは FutureLearn での最初のパターンライブラリ開発について、そしてなぜ我々が Atomic Design を使うことになったのかについて著しました。 全般的に、Atomic Design は我々のチーム内でうまく機能しています。それはインターフェイスの理解の共有や、さらなるモジュール化への移行、我々のデザイン言語の進化などに貢献しました
DMMのエンジニアで『React開発 現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問Atomic Designについて知り
Bonfire Design #3で一緒に登壇した五藤さん(@ygoto3_)が書いた「Atomic Design - 堅牢で使いやすいUIを効率よく設計する」を読みました。基本はAtomicDesignに関する話がメインですが、現在の開発状況に至るまでの過程や仕組みから話が展開されるので非常に分かりやすかったのと、少し前のweb開発体制を知らない僕にとっては視野が広がり読んでて純粋に楽しかったです。 Atomic Design ?堅牢で使いやすいUIを効率良く設計する 作者: 五藤佑典出版社/メーカー: 技術評論社発売日: 2018/04/25メディア: Kindle版この商品を含むブログを見る デザイナー視点で読んだ感想 エンジニアが書いていることもあって、「エンジニアリング的思考」をコンポーネント単位で解説している点が非常に参考になりました。デザイナーはデザインの観点だけでなく実装の
Atomic Design Methodology | Atomic Design by Brad Frost
Chapter 2 Atomic Design Methodology Atoms, molecules, organisms, templates, and pages My search for a methodology to craft interface design systems led me to look for inspiration in other fields and industries. Given this amazingly complex world we’ve created, it seemed only natural that other fields would have tackled similar problems we could learn from and appropriate. As it turns out, loads of
2022.07.20 開発×テスト LT会 - vol.3 #devtestlt
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
Atomic Design を導入してみた話 - Money Forward Developers Blog
こんにちは。 iOSエンジニアの廣瀬です。 以前から感じていた課題に、デザインデータ・UIコンポーネントの管理 がありました。 その解決策として Atomic Design の考え方を取り入れてみました。 今日は、"（しら）ずにお金が（たま）る"自動貯金アプリ『しらたま』（ https://sirata.ma/ ）の開発時に実施した Atomic Designの導入 について紹介します。 デザインデータ・UIコンポーネントの管理 ここでいう デザインデータ・UIコンポーネント とはデザイナーが使っているツール(Sketch)や、フロントエンドとなるiOSアプリのコードレベル(Swift)の話です。 具体的に管理がうまくいっていない状態とは下記のような状態と言えます。 カラーコードやフォント名がコミュニケーションを取るときに飛び交う アプリ全体で 色 や フォント の使い方にコンセプトが無い
Atomic Designとの
上手な付き合い方 / better-relationship-between-atomic-design - Speaker Deck
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
はじめに みなさま、いかがお過ごしでしょうか。Figma 流行ってきてますね〜。 他にも Framer X や STUDIO 、そして Figma の上位互換かもしれない Phase が盛り上がりを見せています。 導入記事も増えてきているので、具体的な 作成フロー を紹介したいと思います。 作成済みのファイルは探せばいっぱいあるので、Atomic Design ぽいプロセスで、よく使う UI パーツを作るところまでハンズオン形式で書いてみます。 ただし、原理主義的なプロセスや理論 ではなく、誰でも順を追って Figma を使える状態を目指します。 ストラテジストとエンジニア、そしてデザイナの作業が分断されている時点でイノベーティブではありません。 この三者が統合的にデザインできること、すなわち ワークフローそのものを最適化することが目標 です。 Figma と Atomic Design
Design Guidelines & Atomic Design ー 社内勉強会を開催しました。 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。デザイナーの上田です。来週はいよいよDesign Systems Virtual Summit 2018が始まりますね。今から楽しみです。 さて、皆さんの会社のデザイン組織には、デザインのカラーやタイポグラフィー、ナビゲーションや情報設計などの共通の方針はありますか？ クラウドワークスでは5年ほど前にTwitter BootstrapをベースにしたUIライブラリを作って運用を始めました。 しかし、私を含むデザイナーの知見不足や組織編成など、様々な事情が重なりプロダクト開発の中で運用されなくなってしまい、サービス全体で部分的に最適化されたスタイルやコンポーネントが乱立するプロダクトになってきてしまっています。 「絶妙なバランスでプロダクトが成り立っている」「ガイドラインなんて無くてもなんとかなってるじゃん！」という視点もある一方で、プロダクトやチームの課題として、ちぐはぐなデザイ
AbemaTVのデザイナーによるAtomic Designの実践を、導入編、運用編に分けて紹介します。 導入編では、スタイルガイドの作成や、エンジニアさんとのやりとりでどのように粒度を決めたか。運用編ではSketchのシンボル機能を使って、実装のコンポーネント指向に近いSketchファイルの作成方法を紹介します。
[スライド付き] AbemaTVの事例から学ぶ、Atomic Designという名のデザイン整理術 | CyberAgent Developers Blog
こんにちは、AID（Ameba innovation Designers）という社内デザインチームに所属している早坂です。突然ですが、みなさんはAtomic Designをちゃんと理解していますか？ 今回はAtomic Designの概念から学ぼうということで、『AbemaTV』エンジニアの五藤さんをお呼びして講義をしていただきました。今回はその内容を共有したいと思います。 ▼当日使用していたスライドはこちら▼ Atomic Designとは「変更しやすいデザイン整理術」 講義の中で、Atomic Designがなぜ必要なのか、『AbemaTV』の具体例を元にお話ししてくださいました。 ・デザインの引き継ぎのタイミングで引き継ぎ先のデザイナーは困っていないか ・デザインの負債を抱えていないか この視点で現状のデザイン開発に問題がないかチェックします。お話を聞くとよくある話ばかりで耳が痛い。
![[スライド付き] AbemaTVの事例から学ぶ、Atomic Designという名のデザイン整理術 | CyberAgent Developers Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6706e0ce72f5676007cfed5b0a29fc4d5ad4382/height=288;version=1;width=512/https%3A%2F%2Fdevelopers.cyberagent.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2018%2F07%2Fatomicdesign_sns.png)
「Atomic Design」と「Design Systems」〜デザイナーとエンジニアが二人三脚で開発する手法〜 - DMM inside
｜DMM inside
背景筆者が個人的に仕事を受けはじめた会社のフロントエンドのプロジェクトを立ち上げることになりました。 そこでせっかく新しく作る機会があるならコンポーネントの分割の仕方（コンポーネント設計）を明確に定義したいと思いました。 そもそもなんで分け方を定義したいとなったかというと、後からメンバーがプロジェクトに入ってきたときに、スムーズにプロジェクトに入ってもらうためです。 今まで作ってきたプロジェクトでのコンポーネントの分け方は、「2,3回使う場合はコンポーネントに分ける」 「長くなって見通しが悪いコンポーネントは分ける」など曖昧なところもありますがシンプルなものでした。 ただこの分け方をするとコンポーネント自体が大きくなりがちでした。 今のところプロジェクトに関わる人数も少なく、個々のメンバーのレベルも高いため運用できていますが、人が増えた場合や他のメンバーとなった場合は「苦しいのではないか？
SketchとAtomic Designという強力なツールと方法を組み合わせれば、デザイナーはデザインシステムを作成して、ワークフローを標準化し効率化することができます。 デザインシステムとは デザインシステムとはチームがプロダクトを制作し運用する際に共通の言語で繋がれるように、再利用できるコンポーネントとガイドラインをまとめたものです。 ほとんどの場合、デザインシステムはスタイルガイドとコンポーネントライブラリから構成されています。加えて、ブランドバリューや、口調や雰囲気といった要素を含めることもあります。デザインシステムを導入する際のポイントは、プロダクトやブランドについての唯一の正しいソースとして運用される基準を作ることにあります。 Googleのマテリアルデザインは構築されたUIデザインシステムの一例です。マテリアルデザインは2014年に、一貫したAndroidアプリをデザインし開
もちろん、あくまでこの方法論があることで、コミュニケーション面、メンテナンス面で多々メリットがある。チーム全体でのDXが非常に良くなることに関しては異論ありません。DXはUXと等しく重要。 Atomic Designで生じる問題ページの複雑性が増したら、素晴らしい方法論があっても自分で悩み解決しなくてはいけないことがあります。主な問題は次の通り。 ・Atomから作るボトムアップ型が成立しにくい ・デフォルトスタイルの決定の難しさ ・Molecule、Organismの分割しにくさ ・Pageの必要性への疑問 だと思うのだけれど、これらに加えて最近感じるのは ・Atomic Designにはデータの複雑性を吸収しきる力はない という問題があります。 Atomic Designで作られた、共通化可能なのを前提としたコンポーネントは、例外に弱い。例えば、とある管理画面を作っているときに、入稿デー
Atomを作ったことありますか？ 以前、「Atomic Designってデザイナーには難しくない！？という話」という記事を書きまして、大変反響があり、今でも時折いいねをいただいていて大変嬉しく思っています！ この反響からも、やっぱり世間的にこの手の話題はみんな一生懸命悩みながら、わからないながらに作っているんだろうなーとなんとなく感じています。 そんな私の記事ですが、前はAtomsからPagesまでの全体の話をしました。 それゆえに、実際に運用できるレベルの、超具体的なAtom自体の実装についてはそこまで触れませんでした。 なので今回は、堅牢で使いまわしやすく運用しやすいAtomをガチで作ったらどうなるのかを記事にしてみたいと思います。 「Atoms」とはどんな存在なのだろう？ 「車輪の再発明」という言葉がありますね。 しれっと皮肉を言っているこの言葉ですが、確かになにか家具を作るときに、
食べログでのAtomic Design 〜どう分類しているか編〜｜食べログ フロントエンドエンジニアブログ
食べログFE（フロントエンド）チームの金野と申します。 以前の記事で、jQuery+Backbone.jsからReact/TypeScriptへのリプレースを進めていることをご紹介しました。 リプレースした部分では、Atomic Designを採用しています。 今回の記事では、採用した理由や食べログでの分類方針についてご紹介します。 Atomic Designを導入した目的Atomic Designを導入したねらいは以下になります。 ・コンポーネントの責務がより明確になる ・見た目の粒度だけでなく、ロジックの責務も明確にできる ・「ドメインが入るか／入らないか」。「抽象的か／そうでないか」の区別が明確になる ・世間的にも浸透している概念のため、デザイナー・エンジニア間の共通言語を作れる 食べログではもともとUIコンポーネントをFLOCSSの考え方に従ってレイヤー分けしていましたが、以下の課
Forkwell という会社の勉強会で登壇したときの資料。フロントエンドの人たちはデザインに近いところで仕事しているのに、小手先のツールに支配されすぎているので目線を上げるためのアンチテーゼ的な資料
THE GUILDさまのクライアント向け勉強会にお声がけ頂き、「Atomic DesignとSketch Symbol」というテーマでお話させて頂きました。 せっかくなので、この記事では当日どのような内容をお話させて頂いたかについて軽く触れてみたいと思います。 当日の構成 構成は「Sketchの話→Atomic Designの話→SketchとAtomic Designの話」という流れを意識しました。そもそもSketchとAtomic Designは別軸の話ですから、それぞれの話が最後にうまくリンクする構成ができたらよいんじゃないかなと。ゲームでよく見るAルートとBルートが合流して最終ルートに向かう、みたいなイメージです。うまくできたかは…… なお、当日はディスカッションの材料とするために、オンラインで質問の投稿や質問への投票ができるsli.doというサービスを利用しました。これまではGo
The Unicorn Workflow, Design to Code with Atomic Design Principles and Sketch
Walk with meBrad Frost, the stunning human being in the video above, is largely responsible for the system this article is about. Atomic Design was developed in response to the responsive, digital world we live in. We’ve been making style guides, elemental guidelines, mood boards and many other tools to help make our designs easier to understand for years now. Similarly, developers have been using
Riot.js + Web Components + Atomic Design は優勝！ #Riot.js #AtomicDesign #WebComponents #AMESTAGE
BEM & Atomic Design: A CSS Architecture Worth Loving | Lullabot
Using Pattern Lab and BEM on a project I stumbled upon a great way of structuring CSS, better naming, and better a developer experience. Atomic Design is all the rage; I’ve recently had the pleasure of using BEM (or CEM in Drupal 8 parlance) and Pattern Lab on Carnegie Mellon’s HCII’s site. Working through that site I landed on a front-end architecture I’m very happy with, so much so, I thought it
目的 フロントエンドを開発する上でUIコンポーネントを区分する際に問題が起きました。 UIコンポーネントを区分せず、フラットに開発すると、1サービスで軽くUIコンポーネントが3桁ぐらい同一ディレクトリで無法地帯のように散乱されるのは想像に難くないでしょう。(事実そうなりかけて解決策を探した結果この記事を書いています それを解決するためにAtomic Designを参考にしようといくつかの方のAtomic Designのスライドショーを見ましたが、それらのスライドショーの内容の通りやっても上手く行かない事は明白でした。 調査した所、Atomic Designをフロントエンド界隈では使っている所はとても多かったです。 そんなに広まっている設計がこれほどまでに薄いものだとはどうしても思えなくて、原文を探し呼んだ所、とても重要な部分が他のスライドや記事では抜けている、または間違った解説をしていたの
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側：大規模ブログサイト表示速度改善 大解剖（2）（1/2 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、ReactやRedux、Atomic Designなど、フロントエンドを構成する技術について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介していきます。初回である前回の「アメブロでReactやIsomorphic Web Applicationを採用した理由――その成
「デザインの歴史」から「Atomic Design」まで。rootが選ぶ、デザイナーとしての資質を高めるオススメ本【6月版】 ｜ブログ｜root｜芯を問い、成長に貢献する
デザインパートナーとして企業の課題解決や事業成長に携わる私たちは、作って終わりではなく、作った後の支援が欠かせません。そのためには、「プロダクト戦略」、「デザイン開発」、「組織デザイン」の3つの領域を横断した知見が求められます。 この記事では、領域を横断するデザイナーとなるためrootメンバーが日々読んでいる本から、今月のオススメをご紹介します。 先月のオススメ本の紹介はコチラ。 姿勢としてのデザイン 「デザイン」が変革の主体となるとき 姿勢としてのデザイン「デザイン」が変革の主体となるとき 著者：アリス・ローソーン デザイン界の歴史と文化を振り返り、直観・創意・問題解決能力に根ざした現代の柔軟なメディアとして、デザインのラディカルな変貌を描いています。現代ではデザインが社会でより影響力を持つ時代が到来しており、事例を元にどのような姿勢でデザインに取り組んでいるかが紹介されています。 少々
Atomic Designを実案件に導入して運用してみた結果はどうなのか - I'm kubosho_
かつてAtomic Designの考え方と利点・欠点という記事を書きました。 この記事内で日本ではAbemaTVで使われていると書きました。そして今でもAbemaTVではAtomic Designの考えに基づいてコンポーネントが作られています。 AbemaTVでの経験を通じて、Webアプリケーションのクライアントサイドの開発者という立場からAtomic Designはどうなのかについて書いていきます。 なおAbemaTVではビューライブラリとしてReactを使っているので、React前提の話になります。 Atomic Designに基づくのは実際どうなのか 基本的には良いです。良い点について書いていたらAtomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comやAtomic Design powered by React @
かれこれ４、５年くらいAtomic designに触れてきて、こんなに使いづらいのになんで使ってるんんだっけ？ってなったので、脳死と妥協のAtomic designを辞めたいというモチベを高め、重い腰を上げて考えてみました。 前提 今回の趣旨はあくまでも共通コンポーネントにフォーカスしています。なのでpages(人によってはscreens,containersと命名しているかも)は考慮しません。 また、atomic designのデザインサイドの思想そのものについては言及しません。あくまでもディレクトリ構成の運用上の課題にフォーカスします。 ディレクトリを分ける意味とは そもそも、components/配下をフラットに並べずにグルーピングする目的は何でしょうか。 使いたいものが明確な場合はディレクトリ構成はあまり寄与しません。「あのButtonコンポーネントを使いたい」であれば、ディレクト
DevLOVEの「Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜」に行ってきた - hiromitsuuuuu.log();
6/29（金）に開催されたDevLOVEのAtomic Design回に行ってきました。 devlove.doorkeeper.jp 『既存のフローからアップデートする アジャイル・デザインフロー』というタイトルで、アジャイル開発を進めるうえでのUI変更に強いデザインフローについてのお話でした。 Atomic Design本には結構コードが書かれているんだけど、今回はコードの話ではなく、何故Atomic Designの考え方が必要なのか、Atomic Designの構造をどう考えていけばいいか、@ygoto3_ さんが実践してるデザインフローができるまでのステップの話がありました。 内容はスケッチノート置いておきます。 どう分割するかがいまいち理解できていなかったけど、ユーザーの行動と合わせて責務で考えるのがすごく分かりやすかった。スケッチノートに書いてる今までのデザインフローでまだやって
This document discusses atomic design and introduces the presenter, Yukako Iida. Atomic design is a methodology for building user interfaces that consists of 5 levels - atoms, molecules, organisms, templates, and pages. Atoms are the smallest UI elements, molecules are groups of atoms that form common building blocks, organisms are complex UI components, templates are page layouts, and pages are t
新しいデザインシステムの手法 Atomic Designとは｜NEWS｜株式会社INDETAIL（インディテール）
最近、社内の9階フロアではインフルエンザが蔓延してバタバタと感染者が増えています…。 次は我が身ではないかと内心ビクビクしながら過ごしていますrockdです。 そんな中、今回はAtomic Designについての話をします。 簡単にいうと、デザインを設計するための手法の1つです。 2013年にBrad Frostという人がWebフロンドエンド用に開発しました。 UIの粒度を原子に置き換えて各ステージごとに管理し構築していきます。 [vimeo 109130093 w=640 h=360] Brad Frost: Atomic Design (Webdagene 2014) from Netlife Research on Vimeo. では、実際にどのようなステージに分けられるのか紹介します。 5つのステージ Atomic Designでは5つのステージに分けて管理します。 Atoms(ア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近よくクリエイターが移住するカナダで Atomic Design を学ぶ
Atomic DesignとCSS設計 | 第1回 Atomic Designとは何か
UI 開発をアジャイルに行うための Atomic Design
Atomic Designを実践して得た学びと失敗 - コネヒト開発者ブログ
Atomic Design | Atomic Design by Brad Frost
Alternative Atomic Designをさがして｜Ryo Yoshitake | THE GUILD
Atomic Design本を写経して感じたこと - fujiken design blog
Atomic Design とテストの○○な話
Atomic Designの考え方と利点・欠点 – wkr.
【初心者向け】Atomic Design っぽい、Figma の使い方 - Qiita
デザイナーによるAtomic Designの実践〜導入編・運用編〜
Atomic Design ベースのコンポーネント設計を考えてみた - mya-ake com
Sketchを使ったAtomic Designのワークフロー
Atomic Designとデータの複雑性｜Seiji Takahashi@ベースマキナ
Atomic Designの小さな"Atom"をガチで真剣に考え抜いて実装する話 - Qiita
フロントエンド最前線に流されない Atomic Design という考え方
「Atomic DesignとSketch Symbol」をお話させて頂きました | よりデザイン
Riot.js で Atomic Design しながら AMESTAGE 作った話
2018年のフロントエンドエンジニア/デザイナーに知ってほしいAtomic Design - Qiita
Atomic designを辞めて利用目的別のディレクトリ構成に移行する
Atomic designで助かった人たち