Spectrum 2
Spectrum 2: what’s next for Spectrum, Adobe’s design system Rational. Human. Focused. Collaborative.Adobe’s products are evolving: more modern, more friendly, more accessible, and more enjoyable to use. Spectrum, Adobe’s design system creates the building blocks of user experiences, and it’s getting a major update to make it happen. Spectrum 2 is what’s next. It’s more than just a design refresh:
State of Storybook 2019
Storybook is the most popular UI component workshop on the planet. It powers front-end development for teams at Airbnb, Lyft, Slack, Twitter, and thousands more companies. It’s used to build top design systems like Shopify Polaris, IBM Carbon, and Salesforce Lightning. Thanks to our vibrant community, the project is growing like gangbusters by every measure. Our product is improving rapidly and on
Storybook 6.5
Teams at GitHub, Adobe, BBC, and many others use Storybook because it streamlines your frontend workflow. You write stories for granular UI states and then use them to verify component appearance during development. From there, you can reuse stories to run snapshot, visual, and accessibility tests during QA. Storybook can even analyze stories to auto-generate documentation. Storybook 6.5 is our bi
デザインシステム、今なにやってる？導入と運用のリアルな裏側を公開！-Lunch LT- 2023/06/15 https://findy.connpass.com/event/285080/
自粛ムードも徐々に緩和されつつあるようですが、まだまだ油断はできません。大変な時期ではありますが、テキストエディター「Mery」の動作検証、開発支援にご協力いただきありがとうございます。 正式版のリリースに向けて調整中につき、大きな機能追加や仕様変更は行っていませんが、そこそこ良い感じに仕上がってきたのでリリース候補版ということで公開してみます。 雑談 ところで最近、マイクロソフトが Win32 と UWP を統合するという計画「Project Reunion」を発表したとのことで話題になっていました。 Windows 8 以降、Win32 アプリをクラシックアプリなんていう悲しい名前で呼んだり、OS の新しい機能を UWP アプリからしか使わせなかったりとひどい扱いをしてきたにもかかわらず、「やっぱ Win32 アプリいるわ」と手のひらを返したマイクロソフト。 そう思ったのかどうかは知り
Nord Design System
Full article at https://arie.ls/2022/launching-nord-design-system/
デザインシステム
デザインの原則を記載したドキュメント、スタイルガイド、コンポーネントライブラリなどのデジタルプロダクト作成に必要なルールやツール デジタルプロダクトの作成に関するあらゆるルールやツールをまとめて体系化したもの。組織にとって唯一の指針であり、デザインの設計・実装の基盤となる。 デザインシステムの構成要素例 以下がデザインシステムの構成要素の一例である。これらを組み合わせて構成される。全て必要という訳ではなく、組織によって最適な構成を選択する。 スタイルガイド コンポーネントライブラリ(コードで実装されたUI要素) 共通の用語 デザイン原則・デザインガイドライン パターンライブラリ UIキット Voice & Tone（文章・文言のトーン） 情報設計 コンテンツ原則 分類方法 アクセシビリティ ブランドガイドライン デザインシステムの利点 デザインシステムを入れることでいくつかのメリットがある
Button design tips to avoid common mistakes - Adham Dannaway
Practical button design tips to avoid common usability and accessibility problems. I’ve been a designer for nearly 2 decades now and I’ve used buttons in many projects, but I don’t think I’ve ever taken the time to think about button design in detail. It wasn’t until recently that I realised I’d been making some common button design mistakes (and I’m not the only one). If you pull out your phone,
iOSDC2021
歴史のある大規模アプリにDesign System を導入して開発をスケールさせる
「数え切れないほどの試行錯誤と協力」を経て──新Web版メルカリのリリースを担当したメンバー21名の“今の気持ち” | mercan (メルカン)
先日、Web版メルカリを大幅にアップデートしました。その経緯についてはメルカリエンジニアリングに寄稿されているのでぜひご覧ください。 で、ですね。 ここでお伝えしたいのは「この開発にはたくさんのメンバーが関わっていたこと」です。実はこのプロジェクト、長い期間を経てリリースされたものだったりします。そこには多くのメンバーによる試行錯誤がありました。 今回のメルカンでは、Web版メルカリのアップデートに関わったメンバー21名に「今の気持ちは？」と質問し、返ってきたコメントをまとめてみました。 ※外国籍メンバーも多く参加していたプロジェクトだったため、コメントは日英併記にしています コメントを寄せた担当メンバーたち（一部） @morishy：無事にリリースできてよかったです！Web版メルカリは、見た目が長い間更新されていなかったり、デザインの元データがなかったり…とにかくいろいろありました（笑）
2021年11月10日と11日の2日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2021」がオンラインで開催されました。そこで胡ケイブン氏と池田泰樹氏が、「LIFFの超入門」と題して、LIFFおよびLINEミニアプリの特徴や事例から、その開発方法までを紹介しました。 LIFFの超入門 胡ケイブン氏（以下、胡）：それでは本日のセッションを始めたいと思います。初めまして、LIFFやLINEログインなどの開発者向けのデベロップメントプロダクトのプロジェクトマネージャーを担当している胡と申します。これまではQAリードを担当していましたが、2020年の4月にPMに転向しました。 池田泰樹氏（以下、池田）：初めまして。LIFFやLINE Design System Globalの開発を担当している、フロントエンドエンジニアの池田と申します。本日
Microsoftの「Windows Insider」を担当するチームとデザイナーが公開した新しいコンセプトから、今後リリースされるバージョンのWindows 10に関する同社の計画がうかがえる。新しいスタートメニューは、ライブタイルがなくなり、「Fluent Design System」を採用した新しいアプリのロゴがいっそう目立っている。Windows 10版、iOS版、Android版のアプリで一貫性をもたせようという意図がある。 Windows InsiderチームのBrandon LeBlanc氏は、Microsoftの新しいコンセプトは「ライブタイルの廃止を意味しているわけではない」と主張している。 だが、デモを見ると、Microsoftは、2015年からWindows 10に採用されているライブタイルの当初のコンセプトにまもなく見切りをつけるのかもしれない。 デスクトップインタ
【増枠】Design System Build #01 -デザインシステム構築の様々なアプローチ- (2022/08/23 19:30〜)
2022/08/04 50→100→200→250→300→350→400→450→500名に増枠しました！ ZOOM配信の上限人数の関係で、最後の増枠になります。これから申し込みくださる方は「キャンセル待ち」になります。 RAKSUL主催のデザインシステム勉強会【Design System Build 】を初開催します！ 近年、国内外の様々な企業のプロダクト開発に導入されている「デザインシステム」は、開発することでブレなく一貫したユーザー体験を提供できたり、デザイナー・エンジニアの開発を効率化することができたりと、様々なメリットがあります。 ただ、デザインシステムは一度作って終わりではなく、運用しながらプロダクトの成長に合わせてアップデート・構築していくことが重要です。その構築していく過程での開発者たちの様々な取り組みや技術的なチャレンジ、失敗事例や成功事例などを、今回イベントに出演くだ
デザインシステム初心者が勉強会を開いて知った泥臭く生々しい5つの運用ヒント｜Tomoyuki Arasuna
ここ数年よく耳にするようになった「デザインシステム」という言葉。なんとなくチームの生産性を上げる方法論くらいには理解しているけど、本を読んでも教科書的な話しか無くていまいちピンとこない、と思った人は多いのではないでしょうか。私もそう感じる中の一人でした。 デザインシステムは業種、職種、組織規模、事業形態によって目指すべき形が変わるものです。また、組織の中で定着させるための定型的なフォーマットが無いので、なかなか本格的に手が出しにくい、やってはいるものの上手くいってるか分からない、といった方も多いのではないかと思います。 私もデザインシステムの制作・運用経験は少ないのですが、今の現場でもニーズが高まっており、もっと本格的に理解したいと考えました。また同じように感じる人も多いのでは？という思いから、Twitterで「雑談会しませんか？」と呼び掛けたところ、7名の方が集まってくださいました。 雑
Platform teams have a unique reliance on other teams to ensure adoption of their platform - getting code changes into other teams' codebase is critical to their success. There are a variety of patterns for that cross-team collaboration, and selecting the right ones depends on both the phase of platform adoption and the ability of both teams and codebases to accept external influence. 19 July 2023
OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog
The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this article, we explain why this is important for design systems and color palettes. The extremely short version oklch() is a new way to define CSS colors. In oklch(L C H) or oklch(L C H / a) each item corresponds as follows: L is perceived lightness (0%-100%). “Perceived” means that it has consistent li
GitHub - jdan/98.css: A design system for building faithful recreations of old UIs
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
DRUIDS by Datadog
DRUIDS is the design system for Datadog. It stands for “Datadog Reusable User Interface Design System.” Is “reusable design system” redundant? Probably. Was “DRUIDS” too good of a name to pass up? Definitely. 😎
GitHub - linkedin/school-of-sre: At LinkedIn, we are using this curriculum for onboarding our entry-level talents into the SRE role.
Site Reliability Engineers (SREs) sits at the intersection of software engineering and systems engineering. While there are potentially infinite permutations and combinations of how infrastructure and software components can be put together to achieve an objective, focusing on foundational skills allows SREs to work with complex systems and software, regardless of whether these systems are proprie
Component Encyclopedia
How do you build UIs that are accessible, responsive, performant, and multifaceted all at the same time? There are plenty of learning resources available, but most are for beginners. Few of them consider a real team’s requirements and the tradeoffs therein. The fastest way to level up in UI development is to observe what your peers do. That way, you can experiment with their techniques in your own
UIの色設計に役立った記事・ツールまとめ
TOC記事The color system - Material DesignColor in Design Systems - EightShapesCreating A Design System: Building a Color Palette - UXPinツールDeep learning color generator - Eva Design SystemCOLOR TOOL - Material DesignColor Designerその他面白かった記事Re-approaching ColorDesigning accessible color systems - stripe 最近仕事でColor Schema Designをする機会があった。全くの未経験分野だったので様々な記事やツールを参考にしたので、その中でも特に役立ったなと思うものを紹介しようと思う。 記事 Th
These are the best guidelines ever! Oh, wait, no one watching?In 2017 I wrote several tips on better design documentation. While all those tips still make sense, I realized there is a more vital thing — and it’s not what you may think. It often happens that the stuff you’ve carefully written is barely used by the team. Why so? Let’s figure it out. Why they don’t read itI dunno about you, folks, bu
デザイントークンのつくりかた：putchom
2023年のFigmaのグローバルカンファレンスConfigでVariablesが発表され、デザイントークンはますます注目を集めています。しかし、デザイントークンという言葉は聞いたことあるものの、デザイントークンとは何なのか、また、何から始めたらいいかわからない方も多いのではないでしょうか。 本書では、これまでGMOペパボ株式会社で複数のブランド向けにデザイントークンを設計した際に得た知見や、株式会社スマートバンクでモバイルアプリ向けにデザイントークンを設計した際に得た知見を共有します。デザイントークンを利用するメリットから実際の作り方まで幅広く網羅していますので、これからデザイントークンを設計する皆さんのお役にたてると幸いです。 [著者] putchom（Ryo Fukushima） GMOペパボ株式会社でSUZURIのデザインリード及び共通基盤デザインシステムInhouseの設計を担当
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog 3月15日に、フロントエンドコミュニティ UIT の19回目となるミートアップ UIT Meetup vol.19『デザインシステムのリアル』を開催しました。本記事では、イベントの内容について振り返っていきます。 なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 YouTube: https://www.youtube.com/watch?v=poMrzn_2wLY UITとは？ UIT は、 LINE
1 から Design System を作る場合にも、色々参考にするのが手っ取り早い。 Web Components にも色々問題は依然あれど、既に先人によるオープンソースなレポジトリがあるので、代表的なものを一覧にしてみる。 @ionic/core https://github.com/ionic-team/ionic-framework/tree/master/core ionic core は ionic チームが ionic frmework で使うコンポーネントを Web Component で実装した Design System。ionic は基本的に � モバイルアプリケーションを作るためのツールなのでそれ用に機能が最適化されているきらいはあるが、汎用的な部分の実装手段など参考になる部分は多い。 Stencil という Web Components 技術でコンポーネントを作る
AI won’t replace designers, but designers who use AI will replace those who don’t. Similar to how calculators were once thought to replace mathematicians, many fear that AI will replace designers. However, this is a misconception. Just as calculators didn’t replace mathematicians, AI won’t replace designers either. Instead, AI will offer you — designers, new tools and capabilities to increase thei
Building Design System for Pairs
この記事は eureka Advent Calendar 2019 14日目の記事です。 今年リリースしたPairsのスマートフォン向けWeb版のフルリニューアルについて、１開発者の視点から綴りました。 こんにちは！Pairs JP Web Teamの新（@ooDEMi）です。主にPairsのWeb版開発を担当していますが、最近はデザインシステム構築の推進もしています。好きなデザインシステムはShopifyのPolarisとAdobeのSpectrumです。 さて、皆さんはデザインシステムというものをご存知でしょうか。 ここ数年で名前をよく聞くようになったデザインシステム。 いったいデザインシステムとは何なのかなぜPairsにデザインシステムが必要なのかPairsのデザインシステムはどのように作られているのか本記事ではこれらについて語ります。 デザインシステムとは何か最近は様々な企業が自社
JSer.info #552 - パッケージマネージャであるpnpm 6.12.9がリリースされました。 Release v6.12.0 · pnpm/pnpm pnpm 6.12.0ではpnpm env use --global 16.5.0のように、Node.jsをインストールするコマンドが追加されています。 pnpm自体をsingle binaryとして配布した場合に、Node.jsがグローバルにインストールされていない環境でもpnpmが利用できるようになります。 そのような場合に、pnpmでNode.jsをインストールするためにpnpm envが追加されています。 Using pnpm as a Node.js version manager · Discussion #3434 · pnpm/pnpm webpack 5.49.0がリリースされました。 Release v5.49
ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。 代替テキスト 画像に代替テキストが付与されている 装飾目的の画像が無視できるようになっている参考 画像の代替テキスト - SmartHR Design System非テキストコンテンツ - WCAG 2.0 解説書1.1.1 画像に代替テキストを提供する - Ameba Accessibility Guidelines動画・音声 動画の音声に字幕が付与されている 動画の内容を解説した音声、またはコンテンツがあるか 音声や動画が自動で再生される場合、一時停止できるか 画面内に1秒に3回以上の点滅や閃光を起こすも
I've updated Figma's internal design system file to include all the latest features introduced since its last update in 2019: Components with variantsVariablesAuto layoutFigJam
Introduction | FAST
Where should I start?Pick the statement you most identify with, and follow the links where they lead. Come back and explore another topic at any time. Or, click here to learn more about FAST. "I just want ready-made components!"Jump to the component docs."I want to build my own design system."Jump to the design system docs."I want to build my own components."Jump to the fast-element docs."I need
Tailwind vs. Semantic CSS Tero Piirainen @tipiirai This study compares two websites with similar design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS: GIST Semantic version is several times smaller, renders faster, and requires no extra CSS tooling Front page HTML The main difference: Tailwind uses "utility" classes and the semantic version uses
Getting Started With CSS Cascade Layers — Smashing Magazine
Cascade layers introduce the new at-rule of @layer. The intent is to help CSS authors be more intentional about ordering the “layers” of CSS rules as a new method of cascade management. CSS recently turned 25 years old, and over that time, many techniques and tools have been created to help developers work with the cascade. Within the last year, a new spec to orchestrate the “C” in CSS was drafted
Angular CLI v11.2 からTailwind CSSの公式サポートが追加された。 コミュニティでは以前から@ngneat/tailwindのようなサードパーティライブラリによってサポートされており、そういう意味では Angular + Tailwind CSS の組み合わせ自体は今に始まったものではない。 とはいえ公式サポートされたことによりこれまでよりも多くの Angular ユーザーが Tailwind CSS を検討するようになるだろう。 この記事では Angular と組み合わせる上での Tailwind CSS の使われ方について個人的な所感をまとめる。 あくまでも所感であり、開発者コミュニティがどのようなプラクティスを支持していくかはまだこれから模索されていく段階であることを念頭に置いてもらえればと思う。 前提として、それなりに持続的な開発を見込む（メンテナビリティ
Design systems, code-side Backlight empowers front-end teams to build and ship great design systems. A unique, all-in-one design system solution. For developers, loved by designers.
Flowbite - Tailwind CSS component library Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS Introduction #Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, templates, and more. It includes all of the commonly used
You are here: Creative Juiz › User Experience › There is no “Myths of Color Contrast Accessibility” Also available in: Français When you need to work on interfaces, color contrast is a real thing you have to take into account to make it accessible. You have the right to be afraid of losing part of the aesthetics of your beautifully well designed interface, and you are right if you are used to poor
On Leaving Facebook
I left Facebook (Meta) in 2021 to join a small startup called Replit. Leaving wasn’t easy, and during the process I’ve talked to half a dozen friends who were in the similar situation. I hope this post would be useful to senior engineers who are looking to leave. Disclaimers: This post isn’t sponsored by Replit, Facebook (Meta), or any other company or product mentioned here. The advice might not
Introducing Mono Icons – Mono
For the past years here at Mono we’ve tried all sorts of icons sets available online for our projects, but every time we encountered some recurring issues: It’s very hard to find an icon set that fulfils all your project needs, most of them feel incompleteIt is a lot of work to make consistent project icon sets on the flyUsing icon sets designed by tech giants (Material Icons, SF Symbols, etc.) ca
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
テキストエディター「Mery」ベータ版 Ver 3.0.4 を公開、矩形編集とマルチカーソルに対応
LIFFプラットフォームで動作するWebアプリの作り方 LINE向けアプリの作り方超入門
「Windows 10」のスタートメニュー、新デザインはライブタイルなしに
How platform teams get stuff done
Why do they ignore my awesome design documentation?
UIT Meetup vol.19『デザインシステムのリアル』を開催しました
Web Componentsで作られているDesign System ライブラリ - nekobatoken
Ultimate ChatGPT cheatsheet for UX UI Designers
2021-08-10のJS: pnpm 6.12.0、webpack 5.49.0(import http resource)、Vue 3.2
ウェブアクセシビリティ簡易チェックリスト | アクセシビリティ | SmartHR Design System
UI2: Figma's Design System | Figma
Kamii | Raksul Design System
Tailwind vs Semantic CSS
Angular と Tailwind CSSについての所感 | Marginalia
Backlight - Build Design Systems - Tool for front-end teams
Flowbite - Tailwind CSS component library
There is no “Myths of Color Contrast Accessibility”