Enter an idea for an app or site and see endless design options just by scrolling.
We're witnessing the birth of a new kind of designer: The AI Designer. Designers who work in evals, prompts, and tool calls. Designers who have as much of a taste for models as they do for fonts. Designers who think in mental models, agents, and intelligence. There's no textbook for this kind of design (and things change so fast, it wouldn't make sense to write one). Instead, we need a field guide
World-renowned design systems experts Brad Frost (creator of Atomic Design) and Ian Frost teach you everything you need to know about creating an effective design token system to help your organization design and build at scale. Over 13 hours of in-depth videos Figma & code sample architecture Naming & governance workflows PDF slides with over 150 resources Certificate of completion Live team trai
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
概要 サービスやプロダクトのデザインをまとまりのあるものにするための「デザインシステム」の重要性が知られるようになった昨今ですが、有効なデザインシステムを作る流れや、実効的に運用・見直しを行っていくための知見はまだまとまっていない状況にあります。本書ではそのような「生きたデザインシステムを作り運用するためのノウハウ」を一気通貫で解説します。 目次 第1章：デザインシステムとは 理念とデザインシステムの関係性 デザインシステムの構成要素 公開されているさまざまなデザインシステム 設計・導入から運用までの流れ 第2章：デザインシステムが必要なとき デザインシステムの導入で期待できること デザインシステムの展開・運用の難しさ あなたの現場にデザインシステムは必要？ デザインシステムをどこまで作り込む？ 第3章：デザインシステムを作る前に 課題を洗い出す 背景を定義する 目的を定義する 調査をもと
デザインエンジニアの安田（@_yuheiy）です。 この記事では、社内向けに提供しているライブラリの使用状況を把握すべく作成した、プロダクト全体のソースコードを解析して、提供しているモジュールおよびそれを使用しているプロダクトごとに個別に自動集計する仕組みとその実装方法について解説します。 ライブラリ開発の問題と使用状況の解析 弊社では、KARTEのプロダクト群全体のデザインシステムである「Sour」を開発しています。その一環として、React製のUIライブラリ「sour-react」を作成し、社内向けのnpmパッケージとして提供しています。現在、sour-reactはKARTEのいくつものプロダクトにおいて採用されており、UI開発に欠かせないものになるほど浸透しています。 作成したライブラリが広く使われるようになるのは喜ばしくもありますが、一方、それに伴って新たな問題が生じることもありま
公開日 : 2019年12月19日 (2023年5月17日 更新) カテゴリー : アクセシビリティ / ユーザビリティ この記事は、Web アクセシビリティ Advent Calendar 2019 の19日目の記事です。 このたび監訳で関わらせていただきました「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」が、このクリスマスシーズンに出ることになりました。2018年にドイツの Smashing Magazine から刊行された、Adam Silver 著「Form Design Patterns - A practical guide to designing and coding simple and inclusive forms for the web」の日本語訳です。 言うまでもなく、ウェブにおけるフォームは、インタラクションの
先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ
2023年のFigmaのグローバルカンファレンスConfigでVariablesが発表され、デザイントークンはますます注目を集めています。しかし、デザイントークンという言葉は聞いたことあるものの、デザイントークンとは何なのか、また、何から始めたらいいかわからない方も多いのではないでしょうか。 本書では、これまでGMOペパボ株式会社で複数のブランド向けにデザイントークンを設計した際に得た知見や、株式会社スマートバンクでモバイルアプリ向けにデザイントークンを設計した際に得た知見を共有します。デザイントークンを利用するメリットから実際の作り方まで幅広く網羅していますので、これからデザイントークンを設計する皆さんのお役にたてると幸いです。 [著者] putchom（Ryo Fukushima） GMOペパボ株式会社でSUZURIのデザインリード及び共通基盤デザインシステムInhouseの設計を担当
デジタル庁では「誰一人取り残されない、人に優しいデジタル化を。」の実現を目指し、ウェブサービス・ウェブアプリケーションの使い勝手や情報の探しやすさ、アクセシビリティ等の向上に取り組んでいます。 その一環として、「デザインシステム」の構築を推進し、官民問わずすべての方が参照できる形で公開しています。よりよいデザインの普及・啓発に向けて拡充と更新を継続的に行い、あらゆる人がデジタル化の恩恵を享受できる社会に貢献します。 2024年5月30日 デザインシステムのコンテンツは専用サイト「デジタル庁デザインシステムβ版」へ移行しました 専用サイトで、ガイドラインやデザインデータ等の各アセットを案内しています。 イラストレーション・アイコン素材 行政手続きをもっとわかりやすくするために作成した素材集です。どなたでもご利用いただけます。 最近の取組2024年5月 専用サイト「デジタル庁デザインシステムβ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く