Untitled UI — Figma UI Kit and Design System
The ultimate UI kit and design system for Figma. 10,000+ components.
The ultimate UI kit and design system for Figma. 10,000+ components.
メルカリDesign Systemの実装と責務
メルカリ Design System Web の実装と責務 2022-07-20 PWA Night vol.41 @nekobato
GitHub - Crayfisher-zari/digital-agency-design-system
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
SmartHRのプロダクトデザインシステム史上最大のアップデートがはじまります。 ー SmartHR Design Systemの現在地（2024年4月版）｜週刊プロデザ by SmartHR
開発組織も当然大きくなっていて、プロダクトデザイナーのプロダクト開発への関わり方もアップデートしつつあります。 「デザインシステムは、それを運用する組織の体制や構造に強く影響を受ける」ということで、現在2つの状況からデザインシステムは次のステップに進むフェーズにきています。 デザインシステムの進化を後押しする2つの状況 マルチプロダクト戦略SmartHRがマルチプロダクト戦略を打ち出したことで「ユーザーインターフェースの品質と一貫性がもたらす使いやすさ」がより重要になってきました。競合他社との機能のコモディティ化が進むなか、「使いやすさ」は商品価値として差別化要素の一つと位置づけられます。詳細はダイレクターのfumiya(@tyoys00)さんの前回の記事をぜひ読んでください。 プロダクトデザイン組織の拡大マルチプロダクト戦略を受けて、私たちは「プロダクトの使用性を担保する開発者である」
One of the most exciting developments in design for me in the past few years was the launch of the GOV.UK design system. Of course, the real power of a design system comes from the community of designers who maintain it, but GOV.UK does so much right that it made me want to raise the bar on my own projects. I wanted to make something that was: easily reused in any website or app by installing it a
GitHub - primer/view_components: ViewComponents for the Primer Design System
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
デザインデータ（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.
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
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デザインフェス において発表した内容です。 - - - プロダクトにおいては既にスタンダードになっているデザインシステム。しかし、「汎用的なデザインシステム」というのは以外にも知見があまり共有されていません…
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
2. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ ● California State University, San Bernardino グラフィックデザイン専攻 ● ソフトウェアエンジニア @ サイバーエージェント ● ABEMA 開発本部 ○ New Device チーム あらゆるデバイスにAbemaTV を展開するための技術を提供するチーム ○ Streaming Client チーム AbemaTV の再生品質を軸にUX エンジニアリングにコミットするチーム ○ 動画技術エバンジェリスト 世界各国に足を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール ○ DesignOps 推進バックエンド 大規模組織でスケールできるプロダクトデザイン開発組織を構築する活動
How to Create a Design System
Login to your account You must be logged in to perform this action.
5 Things I Wish I’d Known Before Starting a Design System at Spotify
Sure, this is the Spotify Design blog, and I dive a little into engineering in the article below — but design systems are cross-discipline at their heart and require a little bit from everyone and all disciplines to truly succeed! Author’s note: You’ll notice that throughout this article I use the word “customers” when talking about a design system's primary users -- your teammates. In most cases,
GitHub - govuk-vue/govuk-vue: A Vue 3 component library for GOV.UK Frontend and the GOV.UK Design System
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
Don’t make the mistakes I did moving your design system from Sketch to Figma
We set out to move our UX tools stack from Sketch, Invision, Craft and Abstract to Figma, Figma, Figma and Figma. After months of planning to replace our UX tool stack, we were finally ready to take the leap. We jumped into a boardroom on a Friday bright-eyed and rosy-cheeked imported every sketch file of every project just to realise: Oh snap our entire design system doesn’t work like it used to…
ライティングガイドラインは、SmartHRのプロダクトで表記する言葉についての指針を示したものです。 デザイン原則に基づき、わかりやすく統一感のある言葉を誰でも迷わずに決定できる状態を目指します。 「わかりやすい」の定義については、UXライティンググループミッション 〜プロダクトを、もっとわかりやすく〜を参照してください。 適用範囲SmartHRのプロダクトで表記する言葉すべてです。 プロダクトとは、アプリケーションだけでなく、ヘルプセンターなど、ユーザーがSmartHRを使うときに触れるものすべてを指します。 ライティングガイドを通じて実現したいことユーザーの読解の負荷を軽減するユーザーは「年末調整を円滑に実施したい」など、ある目的を持ってプロダクトを操作します。 プロダクト上の言葉がわかりづらいと、その言葉そのものを読解することにユーザーは注意を払うことになり、本来の目的である「年末調
Plan your design system in a single pageThe design system canvas is a tool to help designers champion the value of design systems in organisations. DownloadOpen in FigJamDownload as PNGDownload as PDFThanks for your interest! Subscribe on YouTube for more resources like this. Why use the DS Canvas?The Design System Canvas helps bring structure to the creation or updating of a design system. It’s a
The goal was simple: to define the main colors so that their relative luminances, as defined by WCAG, are close to each other. This way, when designers swap out one status color for another, they are guaranteed by the design system that the color contrast ratio still passes the accessibility requirement. In this design, we don’t want the “in progress” tag to be any more prominent than the “finishe
Heading 1H1Heading 2H2Heading 3H3Heading 4H4Heading 5H5Heading 6H6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas accumsan lacus vel facilisis. Massa tincidunt dui ut ornare. Amet nisl purus in mollis nunc sed id. Auctor augue mauris augue neque gravida in fermentum. Ut morbi tincidunt augue interdum velit euismod
今回はFigmaの公開ファイルの中からDesign System(デザインシステム)が綺麗にまとまっているものを紹介します。 Design System(デザインシステム)とは？UIデザインを制作する前に、このサイト・サービスで使うカラースタイルやフォントサイズ、コンポーネント（ボタンやフォームなどよく使うものをライブラリ化したもの）をまとめて、担当デザイナー以外の人でもパッと見てすぐにデザインを作成していけるよう、要素を整理したもののこと。 開発メンバーにもデザインシステムを理解してもらうことで、 「ここのフォントサイズはいくつで、ここのカラーは#000000で、、」 と毎回Instans(デザイン情報)を見なくても、 「ここはtext_small(小さいテキスト)、ここはPrimary Color(メインカラー)」 と、登録しているライブラリを呼び出し実装をすることが可能になります。さ
Duet Design System
Duet provides a set of organized tools, patterns and practices that work as the foundation for LocalTapiola and Turva digital products and experiences. Guides Follow these practical guides to get started designing and developing experiences for LocalTapiola and Turva.
Figmaライブラリへのアクセス方法利用申請後、Figmaにログインし「SmartHR UI」プロジェクトにアクセスしてください。 作成したコンポーネントライブラリはFigma Communityにも公開しています。 https://www.figma.com/community/file/978607227374353992 設計ルール前提Figmaを使ったSmartHR UIのコンポーネントのデザインモック作成を前提にした設計ルールですが、SmartHR UIのFigmaライブラリを利用してプロダクトのUI設計をする場合にも流用可能です。 実装を意識したコンポーネントの設計Figmaでの作業は実装と同義です。 コードと設計ロジックも踏まえ、可能な限り実装を意識した表層・コンポーネントの設計を心がけてください。 FigmaのAutoLayoutを活用することで実装（CSS）に近いコンポー
Choosing the right component library for your design system: MUI vs Chakra
Design systems can be very complex, or very simple depending on the needs of an organization. At the center of every design system though, is a component library. The goal of this project is to choose which component library is the best fit for Udacity’s next generation design system. TL;DRAfter testing the two libraries the results were nearly identical in every category— except for theming. Them
Creating A High-Contrast Design System With CSS Custom Properties — Smashing Magazine
Managing our colors can truly help people to access our content. In this article, Brecht de Ruyte takes a deep dive into how we can create a high-contrast system while maintaining a balance between designing something accessible and respecting the look and feel of a brand. Design should never be a trade-off when it comes to creating an accessible web. There are many features coming to the web that
A Global Design System
TL;DR: This is a call to action to create a Global Design System that provides the world’s web designers & developers a library of common UI components. A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. Sounds pretty good, right? I
Can I get an Encore? Spotify’s Design System, Three Years On
"For an audio company, you’re awfully quiet..." We last spoke publicly about what Spotify is doing in the design system space in 2019 when we introduced a new system called Encore. Since then it's been radio silence. We haven’t really said much or talked publicly despite being asked about it. We’ve had our heads down learning, thinking, and shipping. So, maybe you’re curious. What have we been up
プロダクト | SmartHR Design System
SmartHRのプロダクト群全体で再利用できる、デザイントークンやコンポーネントライブラリ（SmartHR UI）、デザインパターン、ライティングガイドラインを提供します。 これらを組み合わせることで、デザインの再現性を高め、統一感のあるユーザーインターフェースと一貫した製品体験を効率よく設計できるようにします。 また、このデザインシステムは、ドキュメントやガイドラインを素早く提供することを優先し、常にWork In Progressで運用されています。 デザインシステムをつくる目的デザインシステムの取り組みには、2つの目的があります。 包括的な「デザインの共通言語」をつくり、プロダクトの生産性と品質に貢献すること 具体的には、以下に関わるブレを低減し向上する：プロダクト開発におけるアウトプットの速度プロダクトにおける提供価値の品質ユーザーの体験品質（プロダクト利用時の一時的UX）Smar
We’d like to use analytics cookies so we can understand how you use the Design System and make improvements. We also use essential cookies to remember if you’ve accepted analytics cookies.
Successful design systems are finely tuned to the organization they serve. At the beginning of every client design system engagement, we spend a great deal of time learning about our client’s culture, politics, products, tools, and workflows. Sure, we’ll get links to decks, GitHub repositories, and Sketch libraries, but these artifacts don’t really tell the story of how digital products get built
Design/System 株式会社SEIES(セイエス)
SEIESは何でも屋ではありません。 でもクライアントのみなさまからは、何でも依頼されます。 お人よし？関西出身だから？という理由でもありません。 「言えば何とかなるでしょ。」 モチロンです。 あらゆるプロを独自のネットワークで揃えています。 出会ったからには、出来る限りお役に立ちたいからです。 一風変わった会社かもしれません。 それでも、私たちとの出会いがココに来て下さった方にとって、 イイご縁になりますことを、一同心より願っています。
Design System Communications
Operating a design system shares much in common with operating any product venture, from developing to supporting to marketing it. With marketing comes communications, spreading messages far and wide to engage designers and developers how they want to be engaged. Addressing their problems. Using the tools and places they observe and participate in. Marketing communications tools aren’t new. Yet, f
Creating a flexible design token taxonomy for Intuit’s Design System
This article covers how we evolved our tokens at Intuit to create a flexible taxonomy for a small but powerful set of semantic tokens. Intuit is the parent company for some well-known products such as Quickbooks, TurboTax, Mint, Mailchimp, and Credit Karma. Each product has their own design system. Several of them have their own dedicated design systems teams, as well as both Product and Marketing
UI/UXデザイナーLT会 Vol.6 の発表資料です。
GitHub - microsoft/WinUI-Gallery: This app demonstrates the controls available in WinUI and the Fluent Design System.
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
GitHub - figma/code-connect: A tool for connecting your design system components in code with your design system in Figma
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
GitHub - maiha2/accessibility-in-design-system: list of accessibility pages in design systems
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
Zomato’s new Sushi Design System
Say hello to Sushi — Zomato’s all-new design system that we’ve built from the ground up. It’s not just a design system for us, but more than that it helps us provide a new and enhanced experience for our users using the Zomato app. Let me break down what this actually means and what went into building Sushi. What is Design System?A design system is a large set of reusable components combined with
Flexible Design System Components With "as/is" Props
The "as" prop causes a component to render using the specified element Background Implementing a high-quality design system requires clear goals, common shared values and a consistent approach that strikes a fine balance between flexibility and a constrained design. The components in a design system are built upon these patterns and standards. While a full discussion on building design systems is
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Building a design system out of React components
Helsinki Design System | Home page
Design system for Client Work
conte - ABEMA's Design System
ライティングガイドライン | コンテンツ | SmartHR Design System
Design System Canvas — Download Now!
The “dark yellow problem” in design system color palettes
Design System Playground
Figma Design System(デザインシステム)参考テンプレートURL集｜Nviveto
デザインデータ（Figma）の作り方 | デザインデータ | SmartHR Design System
Get started – GOV.UK Design System
Design System Interview Questions
Design System ガイドライン策定のススメ