Design Token-Based UI Architecture
Design tokens are design decisions as data and serve as a single source of truth for design and engineering. Utilizing deployment pipelines, they enable automated code generation across platforms, allowing for faster updates and improved consistency in design. Organizing tokens in layers—progressing from available options to tokens that capture how they are applied—ensures scalability and a better
ソースコードを解析して社内向けUIライブラリの使用状況を自動で集計する
デザインエンジニアの安田（@_yuheiy）です。 この記事では、社内向けに提供しているライブラリの使用状況を把握すべく作成した、プロダクト全体のソースコードを解析して、提供しているモジュールおよびそれを使用しているプロダクトごとに個別に自動集計する仕組みとその実装方法について解説します。 ライブラリ開発の問題と使用状況の解析 弊社では、KARTEのプロダクト群全体のデザインシステムである「Sour」を開発しています。その一環として、React製のUIライブラリ「sour-react」を作成し、社内向けのnpmパッケージとして提供しています。現在、sour-reactはKARTEのいくつものプロダクトにおいて採用されており、UI開発に欠かせないものになるほど浸透しています。 作成したライブラリが広く使われるようになるのは喜ばしくもありますが、一方、それに伴って新たな問題が生じることもありま
音楽、数学、タイポグラフィ
先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
デザインシステム開発優先度の「難しさ」と「対策」｜hikaru-takase /Loglass
こんにちは、ログラスのデザイナー高瀬です。 今回はデザインシステムの理想と現実について話していきたいと思います。 デザインシステムって素晴らしいけど、いざ実装しようとするとプロジェクトの扱いや開発優先度の調整って難しいですよね？ 今回はそんなデザインシステムにまつわる開発優先度と対策の話をしていきたいと思います。 前提 ・私達は経営管理クラウドLoglassというプロダクトを開発しています ・toB SaaS 視点での見解が多いです ・現在デザインシステム構築中です ・Loglassのデザインシステム構築の中で感じた理想と現実について話していきます デザインシステムは美しくも辛いデザインシステム導入の目的や方法に関して、今では優良なnoteや書籍がたくさんあり私もとても参考にしました。ユーザーの体験・ブランド価値の提供や開発の効率化など、その効能や目的はとても美しいです。 一方でデザインシ
You Don’t Need A UI Framework — Smashing Magazine
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. In this article, Josh Comeau is going to make his case for why you probably don’t need these tools. He’ll also share some of his go-to strategies for building professional-looking applications
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
Visual Breaking Change in Design Systems
#4 of 6 of the series Releasing Design Systems: Outputs | Cadence | Versions | Breaking | Dependencies | Process Design systems establish a baseline visual style that’s an essential dependency. These choices — color, typography, space and more — are robustly specified and expected to stably, predictably change release by release. When an adopter upgrades, a design system shouldn’t break their stuf
Best Practices For Mobile Form Design — Smashing Magazine
About The AuthorNick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on … More about Nick ↬ Users can be hesitant to fill out forms. That is why it is our goal as designers to make the process of filling out a form as easy as possible. The primary goal with every form is completion. Two factors have a ma
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design System Generations