Atomic Design with React
How the Atomic Design methodology allowed me to create a great design system from scratch and made me a better developer, with principles of componentization, hierarchies, and reuses of code. See the original content on my personal website. I have recently had the opportunity to work on a new product from scratch made to React and PWA with the well-crafted and componentized UI at Cheesecake. Howev
大阪からこんにちは、福山健（@kenfdev）です。 フロントエンドに関わっているエンジニアであればAtomic Designというのを聞いたことがあるかもしれません。 フロントエンドの開発をしていく上で大事なことの一つに、画面の部品をどのようにComponentに分割していくかというものがあります。 きっとたくさんのフロントエンドエンジニアがこの点については毎回悩まれると思います。 そこで、どのように分割していくと良いかという指標の一つとしてAtomic Designという考え方があると僕は解釈しています。 Atomic DesignはBrad Frostさんという方が提唱したもので、英語であれば下記にて公開されていますし、本を注文することもできます。 atomicdesign.bradfrost.com また、日本では下の書籍がReactを使って具体的にわかりやすく説明されています。（
How To Make And Maintain Atomic Design Systems With Pattern Lab 2 — Smashing Magazine
The benefits of UI design systems are now well known. They lead to more cohesive, consistent user experiences. They speed up your team’s workflow, allowing you to launch more stuff while saving huge amounts of time and money in the process. They establish a common vocabulary between disciplines, resulting in a more collaborative and constructive workflow. They make browser, device, performance, an
こんにちは！ クレイのasachunです。 ここ1年ほど DocBase はフロントエンドのフルリプレイスを行っており、てんやわんやの日々を送っておりました。 フロントエンドの改修にあたり、Figma + Atomic Design でUIコンポーネント集を制作しました。今回はその作業の経緯、どのように進めていったか、よかったことや大変だったことを書いていきたいと思います！ この記事の前提として必要そうなので、私のスキルはこちら↓ HTML(Haml, Slim), CSS(Sass) でのマークアップ経験7年ほど Photoshop, Illustrator, XD, Figma は一通り使える メインのデザイナーとして1からデザインカンプを作った経験はなし ここ数年は DocBase のUIデザインをちょこちょこやっています Webとは関係ないけど似顔絵が得意です ガッツリ実装はできな
Vue CLI 3 x Atomic Design × Storybookを使ったコンポーネント開発を試す【環境構築編】 - えんぴつぶろぐ
はじめに 先日「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読みました。 Atomic Design ~堅牢で使いやすいUIを効率良く設計する 作者: 五藤佑典出版社/メーカー: 技術評論社発売日: 2018/04/25メディア: 単行本（ソフトカバー）この商品を含むブログ (1件) を見る こちらの本では、Atomic Designの考え方だけでなく、ReactやStorybookを使った具体的な実装方法まで詳しく解説されています。 早速試してみたい！と思い、せっかくなのでVue.jsで試してみました。 まずは環境構築から始めます。 本当はComponent作成時のTipsについてをメインに書きたかったのですが、思ってたより長くなってしまったので分割して更新していきまます…。 はじめに Atomic Designとは Vue CLI 3とは Storybook
Author’s Note: (092220) Figma recently announced a few new features that make the approach done in this article as outdated. Figma will soon support Variants and Interactive Components, which greatly simplifies the use of components. I learned about Brad Frost’s Atomic Design around the same time Figma was going to beta in October of 2016. After Figma added components to their feature set, I was e
DevLOVE「Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜」の参加レポ - UGAP Engineer's Blog
2018-06-29 DevLOVE「Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜」の参加レポートです。 著者の五藤さんご本人から書籍「Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜」の解説と本には載っていないお話を聞けるイベントでした。 devlove.doorkeeper.jp 直近で書いたAtomic Designに関する弊社のブログはこの日に合わせてまとめたところもあり、独自で考えた観点や手順が五藤さんが携わってこられた現場と比べてどれくらい一致しているか、答え合わせのような気持ちで参加しました。 アトミックデザインを使ったコンポーネント指向のUI開発：序 - UGAP Engineer's Blog アトミックデザインを使ったコンポーネント指向のUI開発：破 - UGAP Engineer's Blog 印象に残った話 結論として
# URL 勉強会情報: https://nrs-seminar.connpass.com/event/122208/ HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib # 概要 アトミックデザインの実践に向けた入門の手引きです。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VuexとAtomic Design - CYDAS Developer's Blog
Figma + Atomic Design でUIコンポーネント集を作りました
Figma & Atomic Design Systems
入門！アトミックデザイン / A beginner's guide to Atomic Design