Divya Kamath Staff Software Engineer, Slack Systems At Slack, we believe that designing an optimal keyboard experience is key to delivering a best-in-class product for all our customers. However, despite our design system components being individually accessible, we heard from keyboard users that we were still missing focus transitions in their end-to-end user experience. Non-sighted users who rel
SmartHRのモーションロゴを作りました｜merapon
2022.5.16 追記 現在は以下のように取り扱いを変更しています 「モーションロゴ ノーマルVer.」 → 「モーションロゴ」 「モーションロゴ フレンドリーVer.」 → 「ジングルムービー」 運用方法 https://smarthr.design/basics/logos/motion/ https://smarthr.design/communication/photography/jingle-movie/ SmartHRのブランドイメージをより豊かに広げていくため、また映像コンテンツに一貫性を持たせることでSmartHRの認知を高めるため、新たに “モーションロゴ” を製作しました。SmartHRが発信する映像やイベントで使用していきます。 SmartHRが社会に提供する価値と、サービスとしての “パーソナリティ” を表現した今回のモーションロゴ製作。3名のクリエイターの皆さ
While Material UI is excellent for building sleek user interfaces that adhere closely to Material Design, it can become unwieldy when your design system diverges significantly from the defaults. We get it. We've all been there. That's why we're building an entirely new library of headless React UI components and hooks called Base UI—to give you complete control over the look and feel of your user
Patterns, components, and design systems Stay organized with collections Save and categorize content based on your preferences. Many people use component-driven development using pattern style guides, component libraries, or full design systems in their development workflow process. Even if you have not used these tools formally, it's likely you use a similar process to break up a large design for
メルカリの2024年新卒エンジニア向け研修 “DevDojo”の資料と動画をご紹介！ | メルカリエンジニアリング
こんにちは、メルカリ Engineering Office チームの@yuki.tです。 メルカリでは「誰もが高い基準を志しながらお互いに成長できる組織」を目指し、メンバーが相互に学び合う仕組みや機会を大事にしています。 その仕組みの一つとして、社内技術研修「DevDojo」があります。 DevDojoでは、社内の有志によってメルカリで使用されている技術に関する研修を新卒エンジニアの入社タイミングに合わせて毎年提供しています。 そしてDevDojoの一部コンテンツはLearning materials Websiteで外部公開しています。 今年も4月に様々な研修が提供されました。このブログでは今年の研修の一部をご紹介します。 あらたに提供を開始したコンテンツもありますので、ぜひご覧ください。 技術研修DevDojoとは 新卒エンジニアのオンボーディングは、ビジネスマナーなどの働くうえで必要
デザインデータ（Figma）の更新をライブラリに適用する手順 | デザインデータ | SmartHR Design System
概要FigmaのSmartHR UI（ライブラリ）は組織全体で利用しているライブラリのため、意図しない更新から保護するために編集権限を制限し「ブランチ機能」を使って運用しています。 SmartHR UIにコンポーネントやスタイルを追加・変更したい場合は、本ページを参考にしてください。 コンポーネントの構造や命名などの考え方は、デザインデータ（Figma）の作り方を参考にしてください。 ブランチ運用上の注意SmartHR UIに変更を加える場合は、Figmaの「ブランチ機能」を利用してレビューを依頼する必要があります。 ブランチ作成時やレビュー依頼時は、以下の点に注意して作業してください。 守って欲しいルール「SmartHR UI」のライブラリを更新する場合は、「SmartHR UI 14px」も同じ内容でブランチを作成し更新してください。SmartHR UIはフォントサイズ基準が16pxと
Paste: The Design System for building Twilio customer experiences
Build inclusive, delightful customer experiences with Twilio’s open-source design system.
ReactNativeといえば検索サジェストで『オワコン』とでてしまう事で開発界隈の中で話題ですが、個人的には未だにベストプラクティスだと考えております。 その理由はいくつかありますが、それについてはまた別の機会でお話しするとして、今回はそんな2022年の今でも一戦級で使えるReactNativeを久々にやってみたい人や新しいライブラリの発見をしたい人のために、まとめを作ったので是非みてください 読者の対象はクロスプラットフォームが向いているであろう、個人開発〜中小規模の開発している方を想定しています。 時代と勢いを感じたライブラリ5選 1.react-native-purchase 今でもReactNativeでIAPを実装しようとすると、react-native-iap (https://github.com/dooboolab/react-native-iap)というライブラリが有力
For me, small and specific solutions in the form of single components, make more sense than the all-in-one solutions offered by component libraries. I like to pick and choose my own components, I don’t like long documentations and I’d like to avoid meaningless updates that often break things. A (frontend) library provides a consistent UI — an absolutely crucial thing. But, it may happen that you a
デザインシステム構築におけるデザイナーとエンジニアのコラボレーションの価値｜Goodpatch Blog グッドパッチブログ
昨今では、よく耳にするようになった「デザインシステム」ですが、クライアントワークでもデザインシステムを構築するケースが多くなっています。 デザインシステムは「UIの品質向上」や「開発の効率化」といった目的で作られることも多く、デザイナーとエンジニアの両者に関係があるものです。しかし、実際にデザインシステム構築をしていく際にデザイナーとエンジニアはどのように協力できるのでしょうか？ この記事では、Goodpatchで実際に行ったtoB SaaSのデザインシステム構築において、デザイナーとエンジニアのコラボレーションの取り組みや、その取り組みが生み出す価値について焦点を当ててみたいと思います。 デザインシステムについて デザインシステムの定義は文脈によってさまざまですが、この記事では「ブランドに紐づいたデザインの再現性を高め、ユーザーの利便性や開発効率を向上するための考え方とツールセット」とし
「Frontend Talk」は、ヘイ株式会社とnote株式会社と株式会社アンドパッドが合同で開催する Frontend Engineer と Designer 向けオンラインイベントです。今回のトークテーマは「デザインシステム構築のリアルな裏側」。note株式会社からは、uto-usui氏と、沢登達也氏が登壇。デザインシステムプロジェクトが始動した背景や、目標として描いている全体像、具体的な取り組みや成果について発表しました。 noteのフェーズと今持っている課題 沢登達也氏（以下、沢登）：「noteのデザインシステムのはじまりとこれから」について発表します。今日はエンジニアとデザイナーの1名ずつ話すので、自己紹介はそのフェーズでします。今日は「なんで始めたのか」という経緯と、「コードとデザインをつなぐこと」、「デザインをみんなでつかう」という3点についてお話しします。 今回盛り込めなか
『Designing Interfaces - Patterns for Effective Interaction Design』の第3版が2020年2月にオライリー社から発売されました。第2版はUI設計の際に辞書的にとても参考にさせてもらっているし、そこから10年後の改訂版なのでとりあえず手に入れてみました。が、分厚い英語本をサクサク読める能力が自分にはないので、紹介されているUIパターンの変化だけでも押さえておきたく、目次ベースで変更がある場所を自分なりに洗い出してみました。10年前の版との比較をすることで、いまのUIのトレンドも少し見えてくるかもしれない。 第3版どころか第2版も完全に読み込んでいるわけではないので、間違ってるところがあったらごめんなさい、指摘してください。あと比較しているのはパターンのみで、前段となる理論編には触れていません。理論編あんまり読んでない。 前書き第3
Storybook for design
Imagine a world where the design to development workflow was seamless. If you could connect design deliverables to the bonafide UI implementation, your team could build UIs faster with greater confidence. You’d stop hearing questions like “does this look right?”, “do you have a design for this?” and “is this documented anywhere?” You wouldn’t need to context switch from development to design tools
The form builder for the modern web.Before Formium: You waste time hand-coding forms and surveys in your app. It takes a JIRA ticket, an engineer, and a few hours to just "fix that typo on question 4." After Formium: You have your own in-house form builder that's fully integrated with your component library and design system. Everybody on your team can create, edit, and publish forms and surveys i
Headless components in React and why I stopped using a UI library for our design system
In the past five years I’v been working on major frontend projects at Gloat. In this blog post I’ll focus on what I learned when building Gloat’s design system and how I moved from using UI libraries like MUI to using headless components. When building our design system, I had to answer these requirements: Accessibility: the components must be accessible.Theming: each component should support mult
サイボウズでkintoneのデザインシステム開発をしているトビ（@0b1tk）です。こんにちは。 今回はデザイントークン、特にセマンティックトークンの命名方法について掘り下げます。 まずはデザイントークンの定義について、W3Cから設立されたデザイントークンの仕様策定をするコミュニティ「Design Tokens Community Group」の定義を引用いたします。 Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. （訳：デザイン・トークンとは、色、スペーシング、タイポグラフィ・スケールなど、デザインシステムを構成する不可分の要素のことである） Design Tokens Community Group このデザイントークンの名前づけについて
エクサウィザーズでAIプロダクトのUI/UXデザイナーを担当している吉田です。今回は自社のデザインシステムの一部である「カラーパレット」をどうやって作り上げていったかについて、ご紹介します！ 自社が必要とするカラーシステムとはどのようなカラーシステムを作り上げるかは、そのデザインシステムの対象によって異なります。 例えば、 Adobe のアプリケーションを対象とした Spectrum デザインシステムは、ユーザーがインターフェースのテーマを変更できる機能に対応するため、 2つの明るい色と2つの暗い色の4つのカラーテーマを持っており、そのテーマ毎にカラーパレットが定義されています。 出所: Color - Stectrum を元に筆者作成LINE の場合は、ブランド体験に直接的な影響を与える主要なUIに使う Primary Color Palette の他に、付加的な要素に使用する Rain
There are financial, legal, usability, and moral reasons to ensure your site is accessible. Here we look at five web accessibility examples you can learn from. First up, if you need a primer on web accessibility, check out this video on the business case for accessibility or our digital accessibility report. You might also want to explore this post on designing for accessibility, our response to t
Design systems are great. Working at large companies like Adobe, it's easy to quickly build functional UIs using a robust design system and component library like React-Spectrum. # Terminology For this post, I'll be referring to the collection of icons, images, fonts, color schemes, and general guidelines as a design system and the actual collection of JavaScript, HTML, and CSS as a component libr
こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 15日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう!! という企画です。 今回は、全4回の3回目、カラー編の後編です。前編に引き続き、デザインシステムの「色」について、比較・分析を行っていきます。 1回目・2回目・3回目前半の記事はこちらからご覧ください！ techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.j
Announcing Flutter 1.17
Includes Metal support for faster iOS performance, new Material components, new Network tracking tooling and more! Posted by Chris Sells, Product Manager, Flutter developer experience Today we’re pleased to announce Flutter 1.17, our first stable release of 2020. This year has been a challenging one for everyone. Our goal is to ship stable releases on a roughly quarterly cadence; however, this rel
デザインシステムの制作と運用を手軽にするSaaSプロダクト 『UXHub』公式ローンチのお知らせデザインシステムを簡単に制作し、一元管理することができる『UXHub』を公式ローンチ！システム開発やWebアプリケーション開発における、デザイン品質の向上とフロントエンドの開発効率をアップします。 業務システムのUX/UIデザインを専門に手がけるFixel株式会社（東京都千代田区）は、β版として提供していた、デザインシステム構築・運用支援ツール『UXHub』を11月4日から公式ローンチします。 ■VUCA時代のシステム開発で求められる『デザインシステム』 業務効率向上の観点から業務システムにおいても一般消費者向けアプリ同様にUX/UIの改善が重視されるようになり、当社は業務システムのUX/UI改善の50社、300案件以上を支援して参りました。 最近はビジネスの変化に柔軟に対応するシステム開発を
After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we’re excited to announce that the React Spectrum ComboBox component and React Aria useComboBox hook are now available! We’ve focused on the following areas to help you build quality autocomplete experiences. Accessibility — Our ComboBox has been tested with screen readers across d
チームでの共同デザインプロジェクトに最適なツールとして呼び声の高い、デザインアプリ Figma（フィグマ）。 はじめてでも迷わない簡単なFigmaの使いかたはもちろん、用途に合わせて自分好みにアプリの使いやすさを便利プラグインも人気の理由でしょう。 先日、Figmaのアップデートイベント Config 2022 が開催され、数多くの新機能が追加、発表されました。これまでFigmaによるデザインで気になっていた多くの点を解消してくれる大型アップデート。 今回は、Figmaに追加された新機能について詳しくみていきましょう。 コンテンツ目次 1. ダークモードの導入 2. より使いやすくなった Auto Layout 3. コンポーネントのプロパティ 4. 他のユーザーに追尾してもらうスポットライト機能 5. Figjam ウィジェットの追加 6. 可変フォントが利用可能に 7. ポヨンとしたバ
4月以降の体制変更議論によって Design Ops の優先度が下がりました🙇どうもです。 皆さんの会社では、デザイナーの数が少なかったり理解がイマイチだったり、アジャイルな組織に疲弊していたりしませんか？ 私が参画している GLOBIS にもデジタルプロダクトを作っている部署がありますが、事業会社あるあるなのか『もう少しどうにかならんかな〜』と思うところもあります。 特に GLOBIS はビジネスパーソン向けの教育事業をシフトさせるべくデジタル業界にも参入した会社です。なので BTC で言えば BT 型の組織なわけです。ありがたいことに部署への投資は潤沢なのですが、せっかく優秀なインハウスデザイナーがいるので、もうちょっとあれこれできたら楽しいのに！という状態でした。 そんな相談が響いたのか事業部長には『デザインへの理解が経営課題だ』とご認識いただいて、ついに Design Ops を
Text fields have evolved stylistically over the years. Designers are getting more creative with them, but sometimes a little too creative. One particular style that’s caught the eye of many is the underlined text field. Its novel and minimalist appearance may attract you in using it, but when you understand how it affects user behavior, you’ll think again. Underlined text fields are hard for users
Imperfect, by design
And it’s been an amazing journey. Here’s a behind-the-scenes look at how we got here… We wanted an art-first approach to our brand identity that encompassed emotion and expression. So rather than build the system up from each component part or build around a specific element, we embarked upon building a creative design system that’s intentionally imperfect. Instead of working with some of the larg
こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 14日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう!! という企画です。 今回は、全4回の3回目。デザインシステムの「色」について、比較・分析を行っていきます。 全4回目の3回目です。文章が長くなりすぎて3回目を2回に分けることになりましたが全4回の3回目です。「完成_最終稿_FIX_20230101最新版_確定_確定2」みたいなやつです。よくあることです
最近では、WebサイトやWebアプリケーション、あるいはOSにおいてダークモードがサポートされているケースが増えてきています。 （PC向けのWebアプリケーションとして）要件として必須であるケースはまだそう多くないかもしれませんが、UX向上のためにできればダークモードも提供できるようにしておきたいところです。 最近、UIフレームワークとしてCloudscapeを利用する機会があるのですが、Cloudscapeではダークモードがサポートされており簡単に導入することができます。 本エントリでは、Cloudscape( +Next.js)を利用したアプリケーションにダークモードの切り替え機能を実装する方法を紹介します。 なお、今回作成したサンプルは以下のリポジトリで公開しています。 https://github.com/amotz/cloudscape-dark-mode-sample 検証環境
Helsinki Design SystemThe central digital experience resource of Helsinki Design Language. Guidelines, design assets and component libraries for building a consistent and accessible digital brand across the city. Getting started
UX MILK ALL Night | デジタルなUXに関わるすべての人のためのUXデザインフェス において発表した内容です。 - - - プロダクトにおいては既にスタンダードになっているデザインシステム。しかし、「汎用的なデザインシステム」というのは以外にも知見があまり共有されていません…
Material 3 Design Kit | Figma
Introducing Material Design 3 Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started. Visualize dynamic color in your UI The Material 3 Des...
CSS in 2024 is amazing. Cross-browser support for nesting, :has(), container queries, and more¹ Powerful and fast new CSS tools Many frameworks and compilers to help optimize CSS loading performance This post will be a collection of my notes and thoughts about the CSS ecosystem and the tools I'm currently using. Design Constraints User Experience What does a great experience look like loading styl
AWS is creating a 'new open source design system' with React
No documentation yet, but big ambitions for UI components tailored for AWS services Amazon Web Services has released AWS UI, which the cloud services biz describes as "the first step in a larger process of creating a new open source design system." The context for this is the open-sourcing of the user interface code for the .NET Porting Assistant, a tool to scan Windows-only .NET Framework applica
SmartHRにおけるコミュニケーションデザイナーの関わり方 司会者：ではSmartHRさんに聞いてもいいですか？ コミュニケーションデザイナーのデザインシステムへの関わり方。 samemaru氏（以下、samemaru）：関わり方について、今までどうやっていたのか、体制の話ができればと思います。この話をするにあたって自分の話は避けて通れないなと思ったので、このへんも書いています。 私はプロダクトデザイナー側から入って、SmartHR UIというプロダクトサイドのフロントのベース、オープンソースのコンポーネントライブラリなどの立ち上げに関わっていたのですが、そのSmartHR UIにはブランドと一貫している思想があるわけではありません。スタートアップとして、カラーリングを揃えました、みたいなUIだったんですよね。 そこに「きちんとコミュニケーションデザインとして、ブランドとして根拠のある見
Atomic Design by Brad Frost inspired frontend developers to create design systems. It shifted our focus from implementing UIs one page at a time to creating reusable, atomic components. Design systems went from "nice to have" to "must have". But a majority of design systems ended up imploding. According to the 2021 Design Systems Survey, only 40% of the systems were successful. Why do some design
GPT-4/ChatGPTと画像生成（Stable Diffusion）の組み合わせを試したら、とんでもないクォリティのイラストができたので記事にしました。GPT-4に情景描写をさせてプロンプトに変換するものですが、あまりにGPTの描写能力が強いです。もう人間が1からプロンプトを作る時代は終わったのではないでしょうか。 はじめに あまりにやばい画像ができたので公開するかどうか迷っていたのですが、そのうち誰か公開しそうだったので公開します。 GPTを使って画像生成のプロンプトを生成するのは誰でも思いつきそうなものなのですが、特に最近出たGPT-4では得意な内容がある程度明らかになってきました。 エンジニア兼SF作家がGPT-4執筆支援を実戦投入できないか実験してわかったこと これを見ると、 文章構成 情景描写や人物描写 どこかに当てはまる言葉を探索したい このへんが強いそうですね。あれ、ちょ
B O O K O F N E W S Microsoft Ignite 2019 Orlando, November 4 – 8, 2019 | Foreword by Frank Shaw 9 Section 1 Azure 10 Chapter 1 Azure Infrastructure 11 Item 1.1.1 Azure Arc: Extended Azure management and security to any infrastructure Item 1.1.2 Azure Data Services Preview: Run Azure data services anywhere Item 1.1.3 Azure Da v4 and Das v4 series virtual machines Item 1.1.4 Serial Console for Azur
React Spectrum
React Spectrum A React implementation of Spectrum, Adobe’s design system. Get started • GitHub AccessibleReact Spectrum components are designed with accessibility top-of-mind and include full screen reader and keyboard navigation support. AdaptiveReact Spectrum components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive design principles to deliver a
Mercari improves UI development productivity by 56% with Jetpack Compose
Posted by Chiko Shimizu, Developer Advocate and Tamao Imura, Developer Marketing Manager Mercari allows millions of people to shop and sell almost anything. The company was founded in 2013 in Japan, and it now is the largest smartphone-focused C2C marketplace in Japan. Mercari’s Client Architect Team started using Jetpack Compose in 2020 with the goal of using modern solutions and technologies tha
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Managing Focus Transitions in Slack - Slack Engineering
Introducing Base UI: the headless alternative to Material UI - MUI
Patterns, components, and design systems | web.dev
【浦島太郎さん必見】2022年にReactNativeでアプリ作うべきライブラリ5選
10 Useful React Components for 2020
社員急増で生じた「noteらしさ」の解釈多様化 UXエンジニア×デザイナーが目指す“全社お役立ちキット”
Designing Interfaces の 第2版と第3版をざっくり比較する｜toofu
Formium: Headless Form Builder For Developers
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita
デザインシステム【カラーパレットの定義】〜アルゴリズムを活用した開発〜｜エクサウィザーズ HR note
Web accessibility examples: 5 sites doing it right
React Aria - A better approach to design systems
デザインシステムめっちゃ見る③-2 カラー編 (後編) - JMDC TECH BLOG
デザインシステムの制作と運用を手軽にするSaaSプロダクト 『UXHub』公式ローンチのお知らせ
Creating an accessible autocomplete experience
Figma Config 2022で大幅アップデート 新機能を全てまとめてみた
はじめました！ Design Ops.｜HikaruTayama
Why You Shouldn’t Use Solid or Underlined Text Fields
デザインシステムめっちゃ見る③-1 カラー編 (前編) - JMDC TECH BLOG
Cloudscape + Next.jsでダークモード切り替え機能を実装する | DevelopersIO
Helsinki Design System | Home page
Design system for Client Work
How I'm Writing CSS in 2024
「デザイナー以外にも、もっと血肉として使ってもらいたい」 SmartHRにおける、デザインシステムの理想と課題
Why most design systems implode
GPT-4と画像生成を組み合わせたらヤバすぎた | Shikoan's ML Blog
Book of News - Ignite 2019