Protect your brand with CerberusCreate React 19+ design systems effortlessly.
スライド概要 プロダクトデザインに一貫性をもたらすデザイントークンは有用ですが設計が難しく、デザイン負債になりやすい一面もあります。既存の良くできた技術をうまく取り入れることで、0ベースでの設計を避け、リソースを割きすぎることなくトークン設計を行うことができます。今回は実例を交えながら設計方法を紹介します。
はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、通期のリリースサイクルに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか な
Design Tokens Format Module 2025.10 Draft Community Group Report 18 January 2026 Latest published version: https://www.designtokens.org/TR/2025.10/format/ Editors: Louis Chenais Kathleen McMahon Drew Powers Matthew Ström-Awn Donna Vitan Authors: Daniel Banks Mike Kamminga Ayesha Mazrana (Mazumdar) James Nash Adekunle Oduye Kevin Powell Feedback: GitHub design-tokens/community-group (pull requests,
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. In this article, Josh Comeau is going to make his case for why you probably don’t need these tools. He’ll also share some of his go-to strategies for building professional-looking applications
A style library for React and/or React Native with a large typed superset of the React Native style API, with no outside dependencies in about 24Kb. An optimizer that makes Core faster via partial analysis, CSS extraction, tree flattening, and dead code elimination. Next, Webpack, Vite, Babel, Metro.
In this post I want to share thinking on building a Tabs component for the web that is responsive, supports multiple device inputs, and works across browsers. Try the demo. Demo If you prefer video, here's a YouTube version of this post: Overview Tabs are a common component of design systems but can take many shapes and forms. First there were desktop tabs built on <frame> element, and now we have
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」8日目の記事となります。 概要 モチベーションクラウドの開発チームでは2018年10月から改善期間と称して、開発に関するガイドラインやルール作りをはじめとする、様々な改善活動に取り組んでいます。 その改善活動の一環として作成した「コンポーネント設計・実装ガイドライン」を今回は説明を交えながらご紹介して行きたいと思います。 目次 Compo
この記事はドワンゴ AdventCalendar 2017の17日目の記事です。 dwangoアドベントカレンダー17日目を担当させていただきます @ln-north です。デザイナーとして2016年度新卒として入社し、もうすぐ2年になります。 エンジニアさんで埋められるカレンダーの中、ひっそりとデザイナーも参加させていただきます、どうぞお手柔らかに…。 はじめに ここ何年かのWebフロントエンド界隈の動きは非常に大きくそして速く、デザイナーから見ても様々なパラダイムシフトが起こっています。scssやwebpackからHTML5やCSS3まで…本当に大変ですよね。 特に最近はReactやVueなど、 コンポーネント指向 のWebシステム開発が発展を遂げています。Web Componentsなども含め、流れを見てるとおそらくWebはこのコンポーネント指向に向かい、しばらく進んでいくのだろうと
こちらは Frontrend Advent Calendar 2014 19日目の記事です。 2014年 12月8日〜12月14日の間、カナダに滞在してきました。目的は12月9日〜12日に開催される Smashing Conference 2014 へ参加するためです。 海外のカンファレンスに参加するのはおろか、海外旅行もしたことがないので、今回１人でカナダに行くということで終始緊張の連続でした。（Frontrend の @hiloki さんが「僕も行こうかな」と言っていたので、心強く思っていたのですが、残念ながら叶わず。） 本記事は、カンファレンスが開催されたカナダという国にまつわるお話を Frontrend の話題を交えながら書きつつ、このカンファレンスで一番楽しみにしていたトピックである「Atomic Design」について書いていきます。 参加の理由 今まで海外カンファレンスなど参
Webのタイポグラフィについて少しでも調べたことがあるなら、 Vertical Rhythm という言葉を耳にしたことがあるのではないでしょうか。タイポグラフィを用いて仕事をする場合、最も重要な手法の1つです。このことについて知って以来、私は自分のサイト全てにVertical Rhythmを使っています。 ある日、Vertical Rhythmの重要性について自分が全く理解していないことに突然気付き、愕然としました。そしてその後すぐに2つの疑問が湧き上がってきました。「なぜVertical Rhythmを使うとサイトのデザインが向上するのか？ 」「自分のデザインを良くするために、Vertical Rhythmから何を学べばいいのだろうか？ 」。 私はこの疑問を解明しようと決めました。その考察を綴ります。 記事の最初にあたって認識を共通にするため、まずはコンテキストについて説明します。 Ve
前置き Webを便利に・高品質にしようと技術が進歩する中、コンポーネント設計に寄り添ったシステムが多く出てきました。 ただし、それらを十分に活用するにはデザインから見直さなければなりません。 コンポーネントベースのUIデザインは汎用性・再利用性の観点からも有用ですが、それを実現する際には「コンポーネントの定義」が非常に難しいことがあります。 PDCAサイクルをまわす時のようにあとから再びデザインに手を加えることが予測される環境下では、コンポーネントの粒度が曖昧なままでいると思わぬコストが発生する場合が多々存在するでしょう。 そこに対して一定のルールを持った設計システムが導入されることにより、未来の要望に対応できる柔軟なデザインが構築できるかもしれません。 そう、デザインにも設計は必要なのです！ Atomic Designとは？ atomicdesign.bradfrost.com Atom
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
