Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方｜スマートキャンプ デザインブログ
まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP）の作成プロセスも過去に紹介しています。気になる方はあわせてお読みください。 Figma と Atomic Design の採用デザインツールは「Figma」、考え方は「Atomic Design」を採用しました。 Atomic Designをデザインに落とし込む際、コンポーネント単位での管理がしやすいFigmaが便利だと考えました。 Figmaに関する記事には、チュートリアルやテンプレートなどの内容は多く見かけますが、実務での採用・運用を主にした記事は少ないため、スマートキャンプでの例を紹介します。 ※本記事内で紹介する画面キャプチャは開発中のものや、記事用に独自に編集したものも含まれます。 Atomic Design についてAtomic Desig
Atomic Designを採用したWeb開発におけるistyleの現状と課題 導入の経緯から効果まで - ログミーTech
istyleにおけるAtomic Design利用の現状と課題 高田孝平氏（以下、高田）：「istyleにおけるAtomic Design利用の現状と課題」というタイトルでお話させていただきます。よろしくお願いします。私はアイスタイルでバックエンドエンジニアをしています、高田です。 竹内美帆氏（以下、竹内）：デザイン部でフロントエンドエンジニアをしております、竹内です。よろしくお願いいたします。 細江佳菜美氏（以下、細江）：同じくデザイン部でデザイナー兼ディレクションをやっています、細江と申します。 高田：はい、ありがとうございます。まずAtomic Designを導入するまでの経緯について話します。 その前に、アイスタイルがどんな感じで開発を行っているかと今回の事例について、前提知識として説明します。 今アイスタイルでのWeb開発は、PHPがメインで行われてます。またHTMLやCSS、J
オレオレAtomic DesignとReactの相性｜JJ
最近、Webのフロントエンドの世界ではReactを使っているプロジェクトがたくさんあってよく目にします。npmのトレンドで見ても圧倒的って感じではありますね。 今回は、Atomic DesignとReactの相性は結局いいのか。みたいなところとかどう言う辛さが待っているか、どのようにすればエンジニアもAtomic Designを使いやすくできるかみたいなことを記事にできたらと思います。 Atomic DesignでのReactコンポーネントコンポーネント思考が当たり前になりつつあるこのフロントエンドの業界の中、Atomic Designでコンポーネントの管理を行っているプロジェクトは少なくないと思います。 しかし、もともとエンジニアに向けて作られたものではないので実装面で少し辛いところがあったりもするかと思います。 例えば、atomsにselectを作ったとします。selectは指定された
Atomic Design ～堅牢で使いやすいUIを効率良く設計する 読了 - くらげだらけ
昨今ではデザイナーの間でも、アプリやサービスに使われる色やテキストなどをまとめた「スタイルガイド」や、デザインコンポーネントをまとめた「パターンライブラリ」、さらにそれらを全てまとめてドキュメント・原則・思想なども含めた「デザインシステム」などを作りながら効率よくより良い体験を提供できるように開発できるようにしようという取り組みがよく見られます。 DropboxやAirbnbなどをはじめとして積極的に自社サービスの「デザインシステム」を公開している企業も多く見られるようになってきました。 それにともなって、自分たちでも作ってみよう・開発現場に取り入れてみようと取り組み始めているという話もよく聞くようになってきましたが、どんな風にどんなところから手を付けて良いか？というのは良く聞く質問です。 「デザインシステム」を考えていくにあたって、設計の手法・考え方の一つにAtomic Designとい
Sketch LibrariesとAbstractを使ったAtomic Designの実践💪 | Nagisaのすゝめ
はじめに こんにちは！ 社長室インキュベーションチームで新規サービスのデザインを担当しています田村です。 先日、デザイナーリーダーの川畑が執筆した記事にある通り、Nagisaではデザイン手法としてAtomic Designを採用しています。 Atomic Designは、コンポーネント指向のデザイン手法です。 コンポーネント指向はパーツの再利用と効率の良い運用を可能とし、デザインの追加・変更が容易であり作業の効率化に繋がります。 また、React Storybookなどを使用すれば「あのボタンがない」「カラーが違う」などの実装段階での抜け漏れも防げますし、デザイン変更のハードルも下がるかと思います。 コンポーネントの粒度がしっかりと定義できていれば、エンジニアさんとの共通言語が増えてコミュニケーションの質が高まることも期待できます。 このようにAtomic Designはデザイナーの作業効
2017年、デザインガイドラインについて考える。｜Yuya Furusato｜note
株式会社rootのUIデザイナー 古里祐哉です（@remmyfurusato）。 rootでは、サービスの立ち上げやリニューアルに伴う、UI/UXデザインをご支援しています。 さて、今年を振り返えると「デザインガイドラインに注力した」年でした。デザインガイドラインを必要とされるクライアント様には共通点があります。 ・レイアウトパターンやパーツの使い方が定義されていないで、設計者やエンジニアが迷う。 ・結果、サービス全体の一貫性がなく使いづらい。 このような課題を抱えるクライアント様からのご依頼を多くいただきました。サービス開発の現場で、徐々にデザインガイドラインの重要性が広まってきているのではないでしょうか。 デザインガイドライン作成を通して考えたことをまとめたいと思います。 デザインガイドラインとは？ デザインガイドラインの定義は「サービスやプラットフォームのデザイン方針を示したドキュメ
Atomic Designの概念を参考にSketchのシンボルを効率的に管理する方法 | UXデザイン会社Standardのブログ
新年明けましておめでとうございます。 2017年も、未来の豊かさにつながる仕組みをデザインする組織として、STANDARDメンバー一同、常に学び、考え、邁進して参ります。本年もどうぞ、よろしくお願いいたします。 Sketchの連載記事を執筆しました 私事ですが、年末にWPJさんでSketchの連載記事を執筆させて頂きました。 吉竹 遼のSketch入門 for UIデザイナー – WPJ 対象はこれからSketchを触ろうと思っている方や、使っているけどもっと色々使い方を知りたい、という方です。今回はこの連載の中から、周りの反応が上々だったテクニックについて、編集さんに許可を頂き増補バージョンとしてお送りします。 Sketchはバージョン41以降シンボルのオーバーライドが可能になり、ますます効率化が進み使いやすくなりましたが、一方でシンボルを作成する機会も多くなり、管理の手間が増えてきまし
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
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
Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision
Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atomic design in practice: does it work? - Browser London
Lars Damgaard — design leader in Copenhagen