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.
Every year, we are surprised by what we learn from the perspectives of people who work with design systems day in and day out. This year, we took particular interest in learning from both the people building and maintaining a design system and those who use or contribute to it in addition to their other responsibilities. We shared this survey for four weeks across our social media network, in Slac
noteのデザインシステムのはじまりとこれから
noteのデザインシステムのはじまりとこれから スライドショー 共有ログインお使いのブラウザのバージョンはサポートが終了しました。 サポートされているブラウザにアップグレードしてください。閉じる ファイル編集表示ヘルプユーザー補助機能デバッグ ドライブに変更を保存できませんでした新しい変更を表示 ユーザー補助機能 閲覧のみ プレゼンテーションの HTML ビュー
こんにちは。クラウドワークスでデザイナーをしているYUCCAです。 今回「デザインシステムを導入する為にやって良かった事５選」のお話をしたいと思いますが、デザインシステムと一言で言ってもいろんな側面を持ち抽象度が高いので、前提としてこの記事でのデザインシステムのスコープや私たちのデザインシステム「norman」について軽く紹介させてください。 クラウドワークスのデザイン基盤チームでは、スケーラビリティを持ちながらUIデザインの品質を高められようにする為の一貫した仕組み（デザインシステム）づくりをしています。 このデザインシステムを私たちは「norman」と呼んでいます。 クラウドワークスで使用されている自社CSSフレームワークは2013年から根本的には変わっていない背景があります。なぜ変わっていないのかをここでは省略しますが、10年くらい前のものなので、レガシーなデザインが引き起こす様々な
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
Schema by Figma
I agree to receive emails from Figma, and that my data will be processed in accordance with Figma’s Privacy Policy.
"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
SPEEDA Design Systems "FALCON" には、デザインの基盤となる「コンポーネント」や「テンプレート」が含まれています。 コンポーネントはカスタマイズができ、再利用が可能です。 [ Ver.3.0 2023.11.09 ] 追加点： デザイン原則イラストモジュールPrimitive Color / Semantic colorVariable設定Accordion / Notification Barなど各コンポーネント [ Ver.2.0 2022.07.01 ] ----- SPEEDA Design Systems "FALCON" includes "...
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
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
About - Pepabo Design
Inhouseとは Inhouseとは、GMOペパボ株式会社の共通基盤デザインシステムです。 デザインシステムとは、ブランドがタッチポイントを活用した体験設計を効率的におこなうために、あらかじめ原則やガイドラインを定めて、その実装としてカラーパレットやコンポーネントライブラリなどのアセットを用意したものです。その上で、各サービスが個別に考えていているような、原則やガイドライン、実装していたアセットのうち、重複しているものをすべてのサービスで使えるように一般化して、あらかじめ用意しておいたものが共通基盤デザインシステムです。ペパボでは、この共通基盤デザインシステムに、「Inhouse」という名前をつけて呼んでいます。 デザインシステムに沿っていないものは作ってはいけない、というルールを設けたいわけではありません。別のデザインへリソースを回せるように、「もっとデザインする」ために、デザインシス
こんにちは。クラウドワークスでデザイナーをしていますYUCCAです。 デザイン基盤チームでは、プロダクトや組織が成長・変化していく中でも品質を担保しながら拡張していける仕組みを作るべく、プロダクト開発としての技術的負債文脈や生産性文脈でのデザインシステム開発に取り組んでいます。 詳しくはこちらの記事に記載しています デザインシステムに関わってかれこれ3年程になりますが、デザインシステムを作る上での壁にぶち当たるポイントってたくさんありまして……その中でもプロジェクトを前に進めていく上での「判断基準を身につける」事が難しい。 今回は「デザインシステムにおける意思決定の質を上げる」をテーマで弊社ではどうやっていったかをお伝えできればと思います。 前提としてcrowdworks.jp （2023年3月末時点で、当社提供サービスのユーザーは558.8万人、クライアント数は90.5万社）のプロダクト
Frontend Talk 〜デザインシステム構築のリアルな裏側〜 2022/03/10 合同登壇 株式会社 ヘイ デザイナー 井出 優太 株式会社 ヘイ フロントエンドエンジニア 藤井 大祐 https://andpad.connpass.com/event/238368/
プロフェッショナルなデザインチームを目指して —— デザインシステムと課題解決の仕組みを作りました | Visional Designer Blog
こんにちは、デザインマネージャーの大河原です。デザイン本部 プロダクトデザイン室に所属し、HRMOS事業でプロダクト開発に関わるデザイナーのマネジメントをしています。プロダクト開発におけるパフォーマン...
Very rarely is exactly one design system created to serve exactly one product that expresses exactly one design language. Nearly all the design systems we’ve worked on require a high degree of flexibility in order to properly serve our clients’ needs. Some of this flexibility is achieved by variability in component structure, style, behavior, and content. But advanced aesthetic flexibility is ofte
Introduction The Guardian website is made up of a series of fronts and articles. Introduction Fronts are made up of containers — these allow stories to be grouped in a logical manner, by theme or subject matter. Introduction Containers are composed of modular story cards. These are designed to be flexible; they expand and contract depending on the number of stories added to them. Introduction Card
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
How does your design system team notify subscribers that new features are being released, bugs are being fixed, or security holes are being patched? Patrick discusses versioning strategies and the advantages of automating that process. Imagine, if you will, that we’re part of a team working together to produce some software. Our team knows that in six months, our minimum viable product (MVP) needs
Figmaでコンポーネント作るマン、hassyです。 業務でしばしば「ほとんどコンポーネントがないファイル」にコンポーネントを作りまくって置き換える、ということをやってきたので、ざっと心得的なものをメモっておきます。 正直そんなコツのいる話でもないですが、初めてこの作業を長大で膨大なファイル相手にやろうとすると心が挫けそうになるだろうな…と思い、少しでも道筋が開けて見えることを目指して書いてみることにしました。 スピード優先で作られたデザインファイルを落ち着いて整理するとき、引き継いだファイルを自分好みにカスタマイズするときなどに参考になれば👍 では順番に行きます。 0. これから作るデザインデータの基準・ゴールと進め方を決めておくこれが必要なファイルと必要でないファイルがあると思いますが、もしも前任者がいない・デザインの基準やルールが設定されていない、たとえば「マージンや文字サイズを何
アンドパッドのデザインシステムの
今までとこれから（Frontend Talk 〜デザインシステム構築のリアルな裏側〜）｜sizucca
この記事は、2022年3月10日（木）に開催された「Frontend Talk 〜デザインシステム構築のリアルな裏側〜」のイベントに登壇した内容の記録用です。 転職してから初のイベント登壇でしたが、他社の方々の現場のお話を伺うことができたり、完全オフラインイベントだったため、イベント後にTwitterで参加者による2次会が開催されたり、と想像以上に楽しい1日を過ごすことができました。 登壇者の皆様、視聴してくださった皆様、本当にありがとうございました。 以下、各種アーカイブです。 発表資料デザイナー（自分）の発表資料
こんにちは！atama plus UX/UIデザイナーのヌマタ @n_m_ta です。 私たちは現在、デザインシステムの構築に取り組んでいます。 この連載は、スタートアップのインハウスデザイナーたちが、デザインシステムを1から構築する様子をまとめ、誰かの参考になればという趣旨ではじめました。デザインシステムの構築に至るまでの経緯や、プロダクトの概要についてはこちらをご覧ください。 前回は、デザイン原則を作りました。今回は、認知パターンを考える前段階として、ムードボード作成によるデザインのトンマナの認識合わせについてお伝えします。 ※記事内すべての画像にぼかしを入れています。活動の雰囲気のみを感じ取ってもらえればと思います。 ※本記事は、2019年前半に実施した取り組みをまとめたものです。 認知パターンとは 認知パターンは、色、タイポグラフィ、アイコン、形状、アニメーションなど、プロダクトの
We often talk about design systems as singular entities. “The design system saves time and increases quality.” “Oh, the design system provides that.” “Update to the latest version of the design system.” The reality is that a design system is a multi-faceted layer cake, and also operates as part of other layered systems within an organization. Design systems are systems of systems, but not all syst
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The 2022 Design Systems Survey by Sparkbox
デザインシステムを導入する為にやって良かったこと５選｜YUCCA
Can I get an Encore? Spotify’s Design System, Three Years On
SPEEDA DesignSystem 'FALCON' | Figma
デザインシステムにおける意思決定の質を上げる方法｜YUCCA
STORES のデザインシステムのこれまでと現状
The Many Faces of Themeable Design Systems
The Guardian digital design style guide
Version Management for Design Systems
Figmaであとからコンポーネントを作りまくるときのコツ｜hassy
ムードボードを作ってトンマナの認識を合わせよう -デザインシステム構築奮闘記④-｜ヌマタ
Design Systems are for user interfaces