Seven months since setting out to refresh the Mozilla brand experience, we’ve reached the summit. Thousands of emails, hundreds of meetings, dozens of concepts, and three rounds of research later, we have something to share. If you’re just joining this process, you can get oriented here and here. At the core of this project is the need for Mozilla’s purpose and brand to be better understood by mor
PIXIV Design System 2021 の発表をしました（後編） #pixivdevmeetup - pixiv inside
こんにちは。フロントエンドエンジニアのpnlyです。 こちらの記事は前後編に分かれた記事となっておりますので、前編の記事「PIXIV Design System 2021 の発表をしました（前編）」もあわせてご覧いただけるとよりお楽しみいただけると思います。 前編では、デザインシステムを作ろうとして試行錯誤したエピソード、そして出来上がった設計思想についてお話しました。そしてこの後編では、その思想をどのようにして実現したのかについて具体的な実装をご紹介します。 デザインシステムの実装 "pixiv-elements" 前回の記事で出てきました"デザインシステムの三層構造"の実装は一つのモノリポジトリで管理されています。ガイドラインの根本となる定数以外にも、その定数をより利用しやすくするためのユーティリティや型定義、CIスクリプト、Storybookなどのドキュメントなど、デザインガイドライ
From today, Mercari has a bold, inclusive new look for the UK and a new design system you can see live on iPhone and Android. We think it’s kind of a big deal. Started in Japan now we’re hereLet’s rewind 12 months. Mercari, the number one marketplace in Japan, lands in London along with the red box that is its iconic logo, eager to be picked up at baggage claim and introduce itself to the UK. Make
社外にも公開しているSmartHR Design Systemは、ライティングに関するガイドラインも充実しています。この記事では、UI文言を検討したいと思ったときにそれらのガイドラインをどのように活用するとよいのか、おすすめの参照方法を紹介します！ チェックリスト的に参照したいライティングスタイル ライティングスタイルには、UI文言に限らずヘルプページやリリースノートなどにも適応したいガイドラインがまとまっています。 基本的かつ具体的な内容で、数も多くないので都度チェックリスト的に参照するのがおすすめです！ヘルプページやリリースノートも含めて、開発に関わる文言や文章を書く機会に参照すると、自然と頭に入っていきます。 迷ったときに参照したい用字用語
About Jina
I’m a design systems advocate living in the East Bay of the San Francisco Bay Area. I’m a designer who codes and “no-codes.” ApproachI enjoy design systems, tools, and processes. More importantly, I like looking at ways to improve collaboration and improving communication; I love community and people. It’s why I love design systems in the first place. Because design systems are for people. Design
Park UI
Build your own Design System Beautifully designed components built for your choice of JS and CSS frameworks. Get Started Make it yours@s`j�U@G�d�U
はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見ているデザインシステムにフォーカスして記事を書こうと思います。 弊社のデザインシステムに関しては、 @Shunya078 の なぜ我々はデザインシステムを創るのか？ を読んでいただくと背景がご理解いただけると思います。 今回書く開発者体験について 開発者体験の定義についてはさまざまな解釈があると思いますが、今回は以下の3つのトピックに絞って紹介します。 eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザ
プロダクト体験の「インフラ」となったUIコンポーネントSmartHR UIの現在とこれから - SmartHR Tech Blog
こんにちは、念願の高級水拭き兼用ロボット掃除機を買ってほくほくなプロダクトデザイナー@kgsiです。 ※ この記事は、SmartHR Advent Calendar 2022の13日目の記事です。 SmartHRではReact コンポーネントライブラリ「SmartHR UI」を全プロダクトで使っています。なぜ使っているのか？それはSmartHRのプロダクトの体験統一と、開発速度を向上させるためです。 github.com SmartHR UIがそもそもどういったコンポーネントライブラリなのか、どうやって始まったのか、運用やリリース手順の改善については、過去の記事にて説明しています、よろしければ以下の記事をご覧ください。 「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog プロダクト間共通の React コンポーネント
プロダクトの「色」と向き合う「デザインとエンジニアリング」 | CyberAgent Developers Blog
UXエンジニアの谷です。 「クリエイターHangout」はデザイナー数名のグループで構成される社内のコミュニティです。（Hangoutについては過去の井上の記事をご覧ください。）定期的ににテーマを設けての勉強会や活動をおこなっているのですが、その機会に今回講師として参加させてもらいました。 ▼今期のHangoutのグループ Webフロントエンドエンジニアでもある私が講師を勤めたのは「デザインとエンジニアリング」です。今回はデザイナーとエンジニアのコミュニケーションにおいて、課題となる「色」を主題に「デザインシステム」のトピックを交えておこないました。 1. デザインシステムの定義とは 2. 第1回 色の棚卸し 3. 第2回 & 第3回 色の整理 4. 第4回 コントラストチェック 5. 色と名前を決めることの難しさ 6. デザインシステムはどこまで作り込むか デザインシステムの定義とは 「
I've hired a lot of developers over the years. More than a few of them have come in with a strong belief that our code needed heavy refactoring. But here's the thing: in almost every case, their newly refactored code was found by the other developers to be harder to understand and maintain. It also was generally slower and buggier too. Now, don't get me wrong. Refactoring isn't inherently bad. It'
By Roman Nurik, Design Advocate Android 5.0 brings in material design as the new design system for the platform and system apps. Consumers will soon start getting Android 5.0 and they’re already seeing glimpses of material design with apps like Google Play Newsstand, Inbox by Gmail and Tumblr. Meanwhile, developers now have the Android 5.0 SDK, along with AppCompat for backward compatibility. And
UIの一貫性と開発生産性を高める！UI実装ガイドライン制定と浸透のプロセス - Techtouch Developers Blog
こんにちは。テックタッチの shoko です。 最近モスのフィッシュバーガーにハマっていて、3日に1回食べています🐟 さて、本日は、UI の一貫性と開発生産性を高めるために、テックタッチの UI チームがどのような取り組みをしているかをお話したいと思います。 UI チームとは テックタッチが抱える UI の課題 UI 実装ガイドライン制定と浸透のプロセス 1. メンバーから課題を収集 2. 課題・議論の集約 3. UI チームでガイドラインを制定 4. チーム全体へのガイドライン浸透 ガイドライン制定の効果 おわりに UI チームとは テックタッチでは、複数のスクラムチームでプロダクト開発を進めています。主要な機能の開発は順調に進んでいるものの、UI 改善のようなタスクに時間を割くのが難しいという状況に直面していました。 そこで、開発の優先度では後回しになりがちなものの、プロダクトの品質
Windowsの新しいロゴデザインが明らかに
Microsoftが開発するPC向けOS「Windows」のロゴデザインが新しいものに変更されたと報じられています。 Microsoft reveals new Windows logo design and 100 modern app icons - The Verge https://www.theverge.com/2019/12/12/21012997/microsoft-new-windows-logo-fluent-design-icons Microsoft reveals new Windows Logo and Microsoft 365 icons - The Redmond Cloud https://www.theredmondcloud.com/microsoft-reveals-new-windows-logo-microsoft-365-icons/ Mic
LINEはなぜデザインシステムを取り入れたのか？ フロントエンドにおける価値と定義を解説 デザインシステムにおけるフロントエンド #1/2 2019年11月20、21日の2日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2019」が開催されました。1日目は「Engineering」をテーマに、LINEの技術の深堀りを、2日目は「Production」をテーマに、Web開発技術やUI/UX、プロジェクトマネジメントなど、より実践的な内容についてたくさんのプレゼンテーションが行われました。「デザインシステムにおけるフロントエンド」に登壇したのはLINE Front-end Standardizationチーム Front-end Engineerの岡崎晶彦氏。LINEはなぜデザインシステムを必要としたのか？ どのようにデザインシステ
背景 Atomic Design ベースのディレクトリ構成になっていたが、 molecules と ogranisms のルールが定まっておらず、コンポーネントがどっちに入るのかが個々人の感覚になっていた 一部の機能は機能ごとにディレクトリを切っていてルールが曖昧になっていた テストと実装が別ディレクトリにあって、集約性の観点で見通しが悪かった 一行まとめ Atomic Design ベースから features （機能ごと）に分ける方向にディレクトリ構成を変更した。 方針 （フィロソフィー） 関心が近いものは近い場所になるべく集約させる ガチガチに縛るよりはある程度レールを引くのに止める 特に features の中のルールは固められないと判断して決定を遅らせる ルール化できそうなものをLintエラーで管理する 実はまだやってない。インポートの制約に関するルールを追加する予定 採用したル
The Gradual Design System: How We Built Slack Kit - Slack Engineering
A group of engineers, designers, and writers began to centralize and standardize components. We named it Slack Kit. This post was co-written with Zack Sultan, Lead Product Designer at Slack In 2016, Slack was two years old and already used by millions of people. Our codebase had grown rapidly, and like many companies that focused on product/market fit, our code was built in a way that favored time
Building a Visual Language
This article is part of a series on our new Design Language System. Karri recently answered questions about this topic in a Designer News “Ask Me Anything” interview. Click here to read the transcript. Working in software development and design, we are often required to ship one-off solutions. Sometimes we’re working within time constraints and sometimes we just haven’t yet agreed upon a path forw
はじめに この記事はTailwindCSSが最近流行ってるけどなんで流行ってるの？という疑問をいただいた、フロントエンドエンジニア歴3年ほどの人間が調べてわかったことをまとめた記事です。以下のようなことがわかります。 TailwindCSSとは一体なんなのか？ CSS設計とは違うの？Bootstrapなどとの違いは？ どんな背景があって流行るようになってきているのか考察 Design Systemとの相性は？ TailwindCSSとは一体なんなのか？ ものすごくざっくりまとめるとユーティリティクラスの詰め合わせのライブラリと表現できるのかなと思いました。 以下のTailwindCSSの公式ドキュメントに書いてあることについて軽くまとめます。 https://tailwindcss.com/docs/utility-first まずはコードを見てみる まずTailwindを使わない普通のH
デザインシステムを組織に浸透させる3つの心得
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフーのデータソリューション事業のデザインを担当しています、水野 直と申します。 私は2020年にヤフーに新卒入社し、DS.INSIGHTというプロダクトを支えるDS.DESIGN SYSTEMの大規模改修を担当しました。 デザインシステムの難しさは、構築することよりも、プロダクトの成長に伴走してシステムを運用し、機能させ続けることにあります。サービスの改善のスピード、人の流動が激しい現代において、多くの組織がプロダクトを発展させていくため、車輪の再発明をしないようデザインの言語化、パターン化にリソースを注いでいるかと思います。 今回はNijibox主催「なぜデザインシステムが必要なのか」のイベントに登壇した際の内容をベースに、立
ウェブブラウザのFirefoxを開発するMozillaが「過去13年間の歴史の中で最も大きなアップデートである」と述べる「Firefox Quantum」がついにリリースされました。Firefoxのコードの実に75％がFirefox Quantumのために書き直され、合計50万行にも及ぶコードが完成し、まったく新しいブラウザとして生まれ変わったわけですがこれが本当に優れたウェブブラウザになっているのかをウェブデザイン関連のニュースメディアであるWebdesigner Depotが解説しています。 Is Firefox Quantum Really Any Good? | Webdesigner Depot https://www.webdesignerdepot.com/2017/11/is-firefox-quantum-really-any-good/ ◆ページ表示速度 既存のウェブブ
I've been working on Chakra UI for the past five years, and I'm very proud of what we've achieved collectively. With our growing team, we've achieved over 1.9M downloads per month, 2M unique website visits per month, and over 31k Github stars; this has been one of my most rewarding projects to date. For a project that started with a single maintainer to become a multi-framework team, this has been
React Spectrum Libraries A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. GitHub React SpectrumA React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications. Explore React Spectrum React AriaA library of unstyled React components and hooks that helps yo
Rebass
Rebass React primitive UI components built with Styled SystemStart your design system without boiling the oceanBuild consistent UI with design constraints and user-defined scalesBest-in-class developer ergonomics with Styled System propsFirst-class support for theming & fully compatible with Theme UIQuick, mobile-first responsive styles with array-based syntaxFlexbox layout with the Box and Flex c
いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。 改めて軽く自己紹介昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。（ここに関しては入社半年エントリー記事で詳しく書く予定） 普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でもデザインシステムはデザイナーだけでなくエンジニアも巻き込んで運用に向けて日々奔走しています。 ファインディデザインシステムとは現在手掛けているのはWebエンジニアの中途転職を支援するFindyというプロダクトのデザインシステムなのですが、サービス開始から6年ほど経過し多くのデザイナー、エンジニアの手によって作られたためどう
「ウェブの制作コストと時間を節約したい」 「デザインを統一して、一貫性をもたせたい」 「制作に必要なものだけまとめたい」 「シェアしたときのデザインのずれを防ぎたい」 プロジェクトを続けているうちに、ページによってボタンや文字サイズ、余白スペースの幅などがばらばらで、統一感がなくなってしまった、なんて経験があるかもしれません。 さらに、複数のチームによる開発では、デザインのズレだけでなく、同じ作業を繰り返すなど非効率さが目立ち、全体のモチベーションもだだ下がりなんてことに。 一貫したデザイン設計により、技術的な問題を防ぐことができるデザインシステムを作成しようと思いつつ、最初に作るのが時間もかかって大変だから、と導入をあきらめていませんか。 今回は、デザインシステムとしてそのまま使えるFigma用おすすめUIキットをまとめてご紹介します。 プロトタイプ作成に必要なパーツが一式すべて揃い、プ
The Digital Services Playbook — from the U.S. Digital Service
Digital Services Playbook The American people expect to interact with government through digital channels such as websites, email, and mobile applications. By building digital services that meet their needs, we can make the delivery of our policy and programs more effective. Today, too many of our digital services projects do not work well, are delivered late, or are over budget. To increase the s
Search Works with all frameworks 🧩 Works with CDNs 🚛 Fully customizable with CSS 🎨 Includes a dark theme 🌛 Built with accessibility in mind ♿️ First-class React support ⚛️ Built-in localization 💬 Open source 😸 More awesome than ever Quick Start Add the following code to your page. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/light.css"
Very Good Ventures re-built the SwiftUI sample app to do a side-by-side comparison of SwiftUI and Flutter, and found there’s a lot to love about both. Kevin Gray (Principal Engineer), Martin Rybak (Engineering Director), and Albert Lardizabal (Principal Engineer) contributed to the writing of this article and the development of the Flutter Landmarks project. Read more of their content on the Very
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
SmartHRのプロダクトデザイングループのFigmaの運用を大公開！第1弾：デザインデータに対する考え方｜wentz
こんにちは。 SmartHRでプロダクトデザインをしている@wentz_designです。 入社して16ヶ月が過ぎ、そろそろ入社エントリなるものを書く機運か？と思い至り、これまで取り組んだことについて書いてみることにしました。 私は現在、メインでSmartHRの基本機能の開発に携わっています。 サブプロジェクトとしてユーザーリサーチ推進室の運営、SmartHR Design Systemの運営、Figmaというツールの社内利用推進および組織アカウントの管理・運用に関わっています。 Figmaに関しては、過去にSmartHR UIのリソース（ライブラリ）を一般公開したことで様々な反響がありました。 今回は、SmartHRのプロダクトデザイングループでは普段Figmaをどのように活用しているのか、を複数回に分けて紹介していきます。 第1弾ではプロダクトデザイングループの「デザインデータに対する
Storybook 6.1
Storybook is the industry standard UI component workshop. It organizes components and their states to structure UI development, testing, and documentation. It's used by teams at Twitter, Slack, Airbnb, Shopify, Stripe, and Microsoft. As Storybook grows in popularity, companies are building more components in it than ever before. Atomic components, full blown pages, and everything in between. Perfo
Sketching Interfaces
The time required to test an idea should be zero. This was the very first sentence I wrote when considering the Airbnb design tools team vision. We believe that, within the next few years, emerging technology will allow teams to design new products in an expressive and intuitive way, while simultaneously eliminating hurdles from the product development process. As it stands now, every step in the
ここ数年、デザインシステム（英: Design System）がデザイナーの間で話題となっています。この記事では、デザインシステムが重要な理由と、何を含む必要があるのか、人気ブランドから公開されているデザインシステムのサンプル例と一緒に、まとめてご紹介します。 多くの企業やビジネスにおいて、デザイン設計により投資するようになってきています。デザインシステムをきちんと作成することは、成長を続けていて、すべてを把握する必要がある企業やチームにとってとても有益で、良いユーザー体験には不可欠と言えます。デザインシステムは、デザインのミスを削減したり、デザインプロセスを高速化、またさまざまなチーム間でのやりとりにも役立ちます。 01. グリッド グリッド（英: Grid）は、ページレイアウトを理解し、統一するために必須のコンポーネントです。たとえば、MailChimpのデザインシステムの最初に記述さ
Our new expression.It all starts here. Use this guide as a high-level overview of how the Starbucks brand comes to life. As we evolve to meet beautifully diverse customers all over the world, our brand has evolved too. Here we introduce a fresh new design system that maintains the core elements of our brand while keeping our customers’ experience central to creative expression. To achieve this, we
Design Systems Handbook
By Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield This book guides readers through best practices around planning, designing, building, and implementing a design system, with insights and first-hand experiences from experts who have gone through the journey. Available in online, epub, pdf, audiobook and print formats.
by DobaKung Microsoftが2021年にリリースするWindows 10の大型アップデートで、エクスプローラー・アクションセンター・スタートメニューなどのUIを大幅に見直すことを計画していると報じられました。 Microsoft plans big Windows 10 UI refresh in 2021 codenamed 'Sun Valley' | Windows Central https://www.windowscentral.com/windows-10-sun-valley-ui-october-2021-update Sun Valley: Microsoft is planning a major redesign for Windows 10 https://betanews.com/2020/10/28/microsoft-windows-10-s
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. The .NET Framework class library is a library of classes, interfaces, and value types that provides access to system functionality and is designed to be the foundation on which .NET Framework applications, components, and controls are built. Namespaces T
Alanはアイルランド人のプロダクトデザイナー。専門はビジュアルデザイン、イラストレーション、ブランドアイデンティティ。 デザインシステム言語（Design System Language、以下デザイン言語）という言葉が、デザイン業界でバズワードになっています。 編注：デザインシステム言語は、デザイン原則やパターンによって定義されたデザインに関する共通の言語。デザイン要素の名称やタイポグラフィ、配色などのルールを含みます。 しかし実際、デザイン言語は製品づくりにおいてどう有用なのでしょうか？ この記事では、デザイン言語がなぜ必要なのかを理解してもらえるよう、デザイン言語の基本について説明しようと思います。 基礎となる言語を作ることが、プラットフォーム内のデザイン哲学と方法論を１つに結びつける。 なぜデザイン言語が必要なのか？ デザイン言語が必要とされる理由を、内的視点と外的視点の２つから考
Windows 10次期大型アップデート「Fall Creators Update」発表 新デザイン、スマホ連携強化、タイムライン機能など
米Microsoftは5月11日（現地時間）、年次開発者会議「Build 2017」で、2017年後半に登場するWindows 10の次期大規模アップデート「Fall Creators Update」（コードネーム：Redstone 3）の新機能について発表した。 新しいデザインシステム 「Microsoft Fluent Design System」は、デバイスを問わず直感的な体験を提供する新デザインの概念。テーマは「Motion」（動き）「Scale」（大きさ）「Light」（光）「Depth」（深さ）「Material」（素材感）で構成される。 PCやモバイル、あるいはVR空間など、ユーザーがさまざまなデバイスや入力方法を利用する場面が増えても、アプリ開発者は表現力豊かなUI（ユーザーインタフェース）を実現できるという。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Arrival – Mozilla Open Design
Mercari UK’s New Look & Design System
UI文言を検討するときのSmartHR Design Systemの歩き方｜稲葉志奈
デザインシステムの開発者体験向上の試み - enechain Tech Blog
Good Refactoring vs Bad Refactoring
Material Design on Android Checklist
LINEはなぜデザインシステムを取り入れたのか？ フロントエンドにおける価値と定義を解説
フロントエンドのディレクトリ構成を変えた 2023 - kobayang
TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社
「Firefox Quantum」は本当に優れたウェブブラウザなのか？
The future of Chakra UI
React Spectrum Libraries
鎌倉のクリエイティブエージェンシー （グリュック） Planning + Design + System
FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話｜🐰
デザインシステムの作成に便利すぎるFigmaおすすめUIキット【2022年版】
Shoelace: A forward-thinking library of web components.
Building the SwiftUI Sample App in Flutter
話題のデザインシステムって何？積極的に取り入れたいデザイン要素14個まとめ
Starbucks Creative Expression
Microsoftが「Windows 10のUI」の大規模な刷新を計画中か
)
.NET Framework クラス ライブラリ
デザインにおける共通言語を作ることの重要性