Click here to view prototype SmartHR UI
You appear to be a a Slack bot. If you are human, please contact [email protected] (InVision)
You appear to be a a Slack bot. If you are human, please contact [email protected] (InVision)
一人ひとりの学習を最適化するAI先生「atama＋(アタマプラス)」を提供するatama plusは、2018年末ごろからデザインシステムの構築に取り組みました。そのプロジェクトに携わったUX/UIデザイナーの税所亮（さいしょりょう）さんが、実体験を交えながらデザインシステムのイロハを解説する本連載。初回となる今回は、構築を検討するべきタイミングや、実際の始めかたについてです。 こんにちは、atama plusというスタートアップでUX/UIデザイナーをしている税所です。 デザインシステムの取り組みに興味がある、取り組みたいけれどどこから手を付けたらいいかわからない、そもそもデザインシステムとはなにかがあまりピンと来ない――。そんな方に向け、私の実体験をもとにお伝えしていきます。本連載が、デザインシステムを考える上でのなにかヒントになれば幸いです。 デザインシステムとはなにか まず、デザイ
Hacker UI is a design system for the modern developer.
GitHub - design-tokens/community-group: This is the official DTCG repository for the design tokens specification.
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
Nord Design System
Full article at https://arie.ls/2022/launching-nord-design-system/
Design tokens - Spectrum
Design tokens are design decisions, translated into data. They act as a “source of truth” to help ensure that product experiences feel unified and cohesive.
はじめまして。 YAMAP デザイナーの樋爪（@hizumedaisuke）と申します。 2020年、YAMAPはブランドのリニューアルを行い、企業のビジョンとミッションを再定義しました。 これに伴い、プロダクトデザイン、サービスのビジュアル、コミュニケーションに至るまで、新たなブランドをこれからどのように実装していくかのデザイン原則を策定しました。 このnoteでは、YAMAPの新たなデザイン原則「RIDGE DESIGN」がどのようなものか、ご紹介できればと思います。 1. YAMAPの新たなビジョンとデザインの役割 YAMAPがブランドのリニューアルに伴い、新たに掲げたビジョンは以下のものです。 これは単にアウトドアのアクティビティとして山に行ってもらうだけでなく、人間が古来より共存してきた自然との繋がり・共生を再発見し、更に自然の大いなる価値を次の世代へと繋げていくことを意味してい
Extending Atomic Design
Atomic design is now over 6 years old (which is nuts!). I’m thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens. I thought I’d be sick of talking about this by now, but I’m still passionate about atomic design after hearing so many success stories, as well as w
Swiss-army knife for custom CSS-in-JS and design-system needs. Shorthands, custom properties, value maps, design tokens, static/dynamic extraction, and much more... Tiny coreCCSS is an opinionated, low-level utility to deal with CSS style objects. It's not an out-of-the-box styling solution. It helps you deliver your own, tailor-made tool. It is built on the top of transformed (3.8 kB, 1.5 kB comp
こんにちは、カウシェDesignerの@Kana Kikuchiです。 サービスのデザイン運用って難しいですよね。 カウシェはリリースから約2年が経過するプロダクトですが、つい1年前まではデザインシステムやFigmaの運用ルールがおざなりの状態でした。 そこで今回は、そんな適当デザイン運用から、ある程度の運用ルールが整うまでの怒涛の2週間について記載し、整備したデザインシステムやFigma運用ルールをご紹介したいと思います！ 菊池 佳奈 / @Kana Kikuchi 2013年金沢美術工芸大学卒業後、総合広告代理店2社を経てDeNAでヘルスケア事業部に配属される。その後在職中にカウシェで複業を始め、2022年3月に正社員としてジョイン。 趣味は映画とペットと遊ぶこと。 なぜやったか1人でデザインしていたカウシェに続々と新たなデザイナーさんがジョインリリースから1年ほどの間、カウシェは当時
2024年リリースのMulti-Editに対応しました。 Figmaconfig2023にリリースされたVariables,Developer mode,NestedComponentに対応しました。 Figmaconfig2022で発表されたComponent PropertyとAutoLayoutについても追記しました。 世の中のFigmaの日本語ドキュメントがショートカットや基本機能の解説に終始していることで、毎回チームに運用マニュアルをインストール必要が出てきて辛いのでこちらにオープンドキュメントとしてまとめておきます。 コピペしてアップデートしてもらって大丈夫です。各社のNotionページにPullしてあげてください。 あくまで現状のFigmaの仕様の前提で個人的な運用最適解としての見解です、こういったたたき台があることで議論が活発になると嬉しいなという気持ちです。💕気に入って
letsxd.com
Click here to enter
昨今、「デザインシステム」という手法を目にする機会が増えましたよね。 多くのWebアプリケーションやモバイルアプリケーションでデザインシステムが設計されるようになり、最近ではデジタル庁のデザインシステムも話題になりました。 デザインシステムは、設計よりも浸透に時間がかかる点において難しさがあると私は考えます。自社事業でももちろんその難しさはありますが、クライアントワークは特に「納品」という段階が最後に存在することで難易度が跳ね上がるように思います。クライアントワークにおいて、どのようにデザインシステムと向き合えば良いのでしょうか。 例えば、とりあえず「デザインシステム」らしきものを作っても、それは「デザインガイドラインの納品」としてしか機能しない場合が多くあるように感じます。ただ、クライアントワークだからと諦めずに本気で取り組めば「デザインシステムを改善可能な形で納品する」ことは可能なので
Unitテストはロジックを担保するために作成するもので、レイアウト確認には適していません。 UIテストやマニュアルテストでは、アプリを操作し画面を確認します。 ただし、アプリを操作するためのデータは実際のユーザーとほぼ同じ環境で作成しなければいけません。 メルペイでは@vvakameさんがMerpay Advent Calendar 2020 4日目に「テスト用お客さまデータ作りツール user-tkool の近況」で公開したように、テストに必要なお客さまデータを簡単に作成できる仕組みが整っています。 またテストの環境がクライアントに閉じず、通信状態やサーバーの状態に依存するといった不確実性を伴います。 スナップショットテストはコードからViewをレンダリングして画像に出力することで、アプリを起動しなくても画面の確認・比較をするテストです。 そのため、モックデータを差し込めるので、安定した
Spectrum CSS
Spectrum CSS is an open-source implementation of Spectrum, Adobe’s design system. It includes components and resources to make applications more cohesive. Robust documentationSpectrum CSS is designed to be used in partnership with Spectrum’s detailed usage guidelines. View Spectrum guidelines
こんにちは、ほぼフルタイムのフリーランスとして株式会社mikanでデザイナーをしています、三上蒼太(@sota_mikami)です。 英語アプリmikanは、もうすぐ10歳になる長寿アプリです。アプリ自体はシンプルさを保ち続けていますが、多くの実験が積み重ねられてきた歴史があります。 ただその歴史ゆえに古い画面のデザインデータが一部なかったり、設計意図や当時の背景がわからず評価の難しい画面があったりと、デザインデータと意図を管理するための標準化が一つの重要な課題となっていました。 今回は、その一環としてmikanにおけるデザインデータの命名規則を策定した話を記録します。 なぜ命名規則を作ったのか？デザインファイルにおける命名規則を策定するのは、チーム内での共通認識を高めて効率的なコミュニケーションを図ることが目的です。 命名規則がないと、デザイナーごとに異なる命名が行われ、他のメンバーがフ
Design tokens — What are they & how will they help you?
Design tokens — What are they & how will they help you? Translating designs into products is hard! Learn how design tokens make building products easier for both designers and developers.
@storybook/cli - Storybook
デザイントークン | 1人design system advent calender 4日目 - development log
4日目はデザイントークンについて見ていく。 Design Tokens（デザイントークン）とは Design Tokens are an abstraction for everything impacting the visual design of an app/platform.— Sönke Rohde (@soenkerohde) 2016年6月24日 デザイントークンとは、プロダクトのデザインに関するすべてのエンティティのこと。 マージン、テキストカラー、フォントサイズ、フォントファミリー、アニメーションの間隔、背景色、ボーダーカラーなどのデザインの情報をもつすべてのものがデザイントークンになる。 デザインシステムにおけるデザイントークンは、同じデザインシステムの上に成り立ってるプロダクト、ウェブやiOS、Androidなどのネイティヴアプリ、Sketchなどのデザインツールに
こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 14日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう!! という企画です。 今回は、全4回の3回目。デザインシステムの「色」について、比較・分析を行っていきます。 全4回目の3回目です。文章が長くなりすぎて3回目を2回に分けることになりましたが全4回の3回目です。「完成_最終稿_FIX_20230101最新版_確定_確定2」みたいなやつです。よくあることです
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
Design systems
Features Code examplesUsage guidelinesOpen sourceTone of voice
こんにちは。 エキサイトで内定者アルバイト（デザイナー）をしている齋藤です。 今回は、業務の中でデザイントークンを検討して実験的に使用しているので、「デザインの仕組み化」を実現するためのデザイントークンについて記してみたいと思います。 この記事では、デザイン要素のうち、カラーに焦点を絞りご紹介させて頂きます。 デザイントークンとは？ なぜデザイントークンは必要なのか 今回デザイントークンを定義する上で意識したこと カラーのデザイントークンを定義してみる デザイントークンの手法 今回のお題に沿ってデザイントークンを定義してみる プリミティブトークン セマンティックトークン Figmaで実装する マークアップで使用できるように環境を整備する おまけ：カラー定義で参考になるサイト Tailwind CSS Color Generator Primer Prism さいごに デザイントークンとは？
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.
Theme 第 61 回のテーマは 2019 年の Yearly Web です。 今年行った Monthly Web を振り返ります。 Show Note 2019 年キーワード Jxck WebTransport SXG/WBN ITP/SameSIte Default Lax DarkMode/HighContrast DesignSystem Document Policy Portal DoH myakura doh cookie firefox css support subgrid aspectratio apple/mozilla -> google chromium への不安 1 月 Chrome Intent to Ship: Signed HTTP Exchanges (SXG) Intent to Implement: High Contrast support In
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 "...
デザインシステムとは デザインシステムとは、デザインに関するあらゆる情報を構造化したものです。 デザインの目的・原則やデザインの基準を記したガイドライン、実装に落とし込むためのUIパターンやデザイントークンなど様々なものが含まれます。よく耳にするスタイルガイドやコンポーネントライブラリも、デザインシステムを形成するレイヤーの一部です。 このデザインシステムを用いることで、組織内でのデザインの一貫性を高め、再利用可能なコンポーネントを通じて効率的な作業フローを促進します。これにより、デザインと開発のプロセスをシームレスに連携させ、製品開発の時間とコストを大幅に削減することが可能となります。また、デザインシステムはユーザー体験の向上にも寄与します。デザインの一貫性が保たれることで、ユーザーはサービスの使用において一貫した体験を得られます。これによりユーザー満足度が向上し、ユーザーのロイヤリティ
Components
A component refers to an element that can perform a function by itself.
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE Growth Technology UITチームの keishima です。普段はフロントエンドエンジニアとして LINEポイントクラブの開発に携わっています。 本記事では、この半年間で LINE Growth Technology のエンジニア・プロジェクトマネージャーと、 LINE のデザイナーがタッグを組んで作成した、LDSG Figma Plugin についてご紹介します。 LDSGとは？ Figma Plugin の話に入る前に、まずは LDSG と、LDSG が提供している Figma Library についてご紹介します。 LDSG とは LINE Design System for Glo
Frontend Talk 〜デザインシステム構築のリアルな裏側〜 2022/03/10 合同登壇 株式会社 ヘイ デザイナー 井出 優太 株式会社 ヘイ フロントエンドエンジニア 藤井 大祐 https://andpad.connpass.com/event/238368/
こんにちは、エンジニアリングマネージャーの岡村です。 社員全員テレワークの環境にも慣れてきて、ワークフロー改善と共にREADYFORの開発環境も日々改善しております。 概要 StorybookをNetlifyへホスティングすることで、PR単位でデプロイされるためデザインの確認・レビューがとても楽になったので紹介です。 導入の背景 READYFORのアーキテクチャ上もっとも有効だった ざっくりREADYFORのフロントエンドアーキテクチャはReact On RailsとElements(UI Library)で構成されており、デザイン手法にAtomicDesignが採用されています。 Elements(UI Library)はDesignSystemの一部として構成され、ドメインに依存しないコンポーネントはElementsへ開発しています。 そのため、確認をする際にはElementsのコンポ
プロフェッショナルなデザインチームを目指して —— デザインシステムと課題解決の仕組みを作りました | Visional Designer Blog
こんにちは、デザインマネージャーの大河原です。デザイン本部 プロダクトデザイン室に所属し、HRMOS事業でプロダクト開発に関わるデザイナーのマネジメントをしています。プロダクト開発におけるパフォーマン...
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
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ページを開く
デザインシステム構築における最初の一歩とは 実体験を交えながらUX/UIデザイナーが解説
Hacker UI | a design system for developers
YAMAPのデザイン原則「RIDGE DESIGN」が生まれるまで｜YAMAP / ヤマップ
Kamii | Raksul Design System
Home | CCSS
２週間で爆速整備したデザインシステムと運用ルールを公開｜株式会社カウシェ
【Figma公式推奨】使い方ではなく、運用方法マニュアル2024年版｜rikika
生き続けるデザインシステムの実現に向けたデザイナーの取り組み｜Goodpatch Blog グッドパッチブログ
メルペイiOSチームのスナップショットテストを効率化した話 | メルカリエンジニアリング
デザインファイルにおける命名規則を策定した話【Figma】｜三上蒼太 / Sota Mikami
デザインシステムめっちゃ見る③-1 カラー編 (前編) - JMDC TECH BLOG
Helsinki Design System | Home page
デザインの仕組み化としてデザイントークンを考えてみる（カラー編） - エキサイト TechBlog.
ep61 Yearly Web 2019 | mozaic.fm
SPEEDA DesignSystem 'FALCON' | Figma
デザインシステムとは？｜国内外の参考になる事例10選と共に解説｜セブンデックス
社内のデザイナーの業務をサポートする LDSG Figma Plugin を作りました
STORES のデザインシステムのこれまでと現状
Storybookをホスティングしてレビューが爆速になった話 - READYFOR Tech Blog
Design Systems are for user interfaces