#デザインシステム記事まとめ

🍳半熟なデザインシステムを育てていく - noteの事例あれこれ振り返り

先日開催された「半熟デザインシステム vol.1」に、note社から登壇させていただきました。たくさんの方にご参加していただけて、とてもありがたかったです！オフライン開催ならではの、リアルな取り組みや悩みについてディスカッションできて、登壇しながらもとても勉強になりました。今回はそのなかでお話しした、noteのデザインシステムの取り組みについて、内容を振り返りつつ、補足できるポイントも合わせてのまとめです。イベント全体がまとまったレポートは、こちらの記事に書いていただ

インタラクションを"感覚"から"言語"へ - インタラクションデザインシステム - 前編

こんにちはー！アクセンチュアソングでインタラクションデザインのリードをしている佐々木です。先日、アクセンチュア・イノベーション・ハブ東京にてFigma Japanさんの2周年記念イベントが開催されました。改めまして、Figma Japanさん、2周年おめでとうございます！イベントのセッションでは、「インタラクションを”感覚”から”言語”へ」と言うテーマで、私たちアクセンチュアソングのインタラクションデザイナーが開発した”atom Interaction”というシ

デザインシステムイベント Framework by Figma開催！

今週からFigma主催のデザインシステムイベントであるFramework by Figmaが開催されます。知る人ぞ知る、2022のSchema以来のデザインシステムをテーマとしたイベントです。今回のFrameworkでは、各社のデザインシステムの取り組み、デザイナーとエンジニアの連携などのベストプラクティスや、そしてFigmaからの新しいお知らせがあります。このお知らせは、Figmaを使っている皆さんにとって待望のアレかもしれません（？） Frameworkは各国で開

皆で創るデザインシステム

・・・はじめに株式会社エムハンドの岩松です。アートディレクターとして、弊社のアウトプットの品質向上に注力しております。また、コンサルティング部のマネージャーと兼任で、今期（2024年11月）からデザイン部全体のボトムアップにも取り組んでおります。その一環として「皆で創るデザインシステム」を合言葉に、様々なプロジェクトを立ち上げ推進しています。デザインシステムというと様々な業種・業態で取り組みがあり、広く公開されている状況ですが…今回の記事では概念的なことは省略し、弊社

デザイナーに向けたデザインシステムを作る

こんにちは、Onjiです。今回は、社内で使用しているデザインシステムの見直しに携わる機会をいただき、進めていく中で得た知識や整理した内容をご紹介させていただきます。（PCやタブレットでの閲覧推奨） 🍞 デザインシステムの見直しBrewusは受託開発を行う企業で、新規デザインファイルを立ち上げる頻度が多く、テンプレートが必要でした。これまではカラー/フォント/コンポーネント等、Figma上で別々のテンプレートとして管理され、案件ごとに複製をして使用していました。しかし、U

Design Reflections: Design Systems Reimagined/デザインシステムの再構築

Surface&Architectureのjournalでは、S&Aの新しいメンバーでトルコ出身のMerve（メルヴェ）によるデザインレポートを全10回にわたり公開していきます。レポートでは、毎回2023年のデザイントレンドをテーマとして設定し、グローバルな視点で考察していきます。テーマ「デザインシステムの再構築: 個性と効率の架け橋」The design system we explore in this series refers not only to a coh

0からはじめるデザインシステム | タイポグラフィ定義

株式会社アガルートテクノロジーズのデザイナーの生ハムです。新しくWebアプリをつくるにあたり、以前初めてタイポグラフィを定義した際に考えていたことのまとめと数ヶ月運用してきての反省を踏まえて、改めて文字と行間の大きさについて考えました。自分用の備忘録として残しつつ、これからデザインシステムをつくる方の参考になればと思います。タイポグラフィの構成要素まず前提として、サイトで使用するタイポグラフィについて決めなければいけない要素は、Adobe Spectrumに記載されて

デザインシステム - アイコンのビフォーアフターを紹介します

こんにちは、株式会社エクサウィザーズプロダクトデザイン部の高田です。エクサウィザーズではアイコンライブラリを公開しています。詳しくは過去の記事をご覧ください。上記記事内でも触れていますが、私たちはライブラリ公開後も毎月コンスタントに新規アイコンを作成し、ライブラリを拡張しています。また、新規作成だけでなく、ガイドラインに準拠していない、視認性が悪い等、過去に作成したアイコンに対しても都度アップデートを加えています。この記事では、一度はデザインされたものの、何らかの理

世の中のデザインシステムを色々知ろう【海外記事メモ】

本日はこちらの記事を取り上げたいと思います。なお、画像も以下から引用します。デザインを行う中で、全体の統一感の調整などに苦労しないためにデザインシステムを参照しているデザイナーは多くいらっしゃるかと思います。そんな中AppleやGoogleなどの有名企業のみならず、多くの企業や団体がデザインシステムを公開しています。日本だと特にデジタル庁が出したデザインシステムが話題となっていました。今日はそんなデザインシステムに関する記事を読んでみようと思います。よければお

Variablesをデザインシステムに導入してみた。

初めまして、23卒デザイナーのharuto🐒です。今回は、config 2023でのvariantsの新機能の発表を受けてデザインシステムにどのように適応することにしたのかをまとめたいと思います。同じようなフェーズのデザインシステムの運用をしている方の参考になれば嬉しいです。 1. 結論：RadiusとSpacingを導入することにした1.1 前提運用しているデザインシステムの範囲はiOSとAndroidで、定義したスタイルをドキュメントとしてデザインシステム内に残

翻訳記事：プロジェクト・メタクロシス：如何にしてUIキットを世界的なムーブメントに変えたか @frog のデザインシステム

お仕事する機会がある方々には、デザインシステムを作るというのは、かっこいいデザイン原則を決めることでも、きれいなFigmaデータの構造を作ることでも、力技でロジカルっぽいデザイントークンを作ることでもなく、デザインと実装の運用方法（DesignOps）や継続的な組織体制（DesignOrg）を作ることだよく伝えてる。とはいえ、おしゃれなデザインシステムのドキュメントのウェブサイトが公開することのほうが実績っぽくて組織としてもやってる感あるあるでどうしてもそちらに注目されが

一貫性のあるイラストが誰でも作れる「イラストシステム」構築までの経緯

株式会社 Zaim でデザイナーをしている miya です。今回は Zaim でよく使うイラストを「効率的に一貫したイラストを誰でも量産できる」ことを目指したイラストシステムを用意したので、その経緯をまとめたいと思います。イラストシステムを構築したきっかけそもそもイラストシステムは「ユーザーにサービスの世界観が伝わる」「一貫したユーザー体験を提供できる」「誰でも同じタッチのイラストを効率的に作成できる」ことを目指した仕組みかと思います。とくに Zaim では、実在す

デザインシステム改善のその後！追加したルールや整理したこと

家計簿サービス Zaim のデザイナー imaizumi です。最近デザイナー採用や取材対応をしていて、「デザインシステムはどう運用していますか？」という質問をよくいただきます。そこで今回は Zaim のデザインシステムの note を書いてから約 1 年経って、その後どんな改善をしたか、まだできていないことは何かをふりかえってみようと思います。「デザインシステムって何？」「改善ってどんなことをしたの？」という話はこちらの記事でお話ししています。続いていること、

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

私ごとですが、ついにデザイナー歴が17年を超えてきました。時代の変化とともにツールや常識も変わりつづけています。現在はFigmaがUIツールとしては一強で、UIデザイナーの方はほとんどの方が使われているのではないかと思います。とても使いやすく管理もしやすいツールですが、使い方を理解していないと混乱を招いたり、自分しか使えないコンポーネントも作り得てしまいます。今回はUI,UXでいうと10年以上携わってきた私が経験を通して考える、使いやすいFigmaのVariant

¥150

フォローしませんか？

#figma

🍳半熟なデザインシステムを育てていく - noteの事例あれこれ振り返り

インタラクションを"感覚"から"言語"へ - インタラクションデザインシステム - 前編

デザインシステムイベント Framework by Figma開催！

皆で創るデザインシステム

デザイナーに向けたデザインシステムを作る

Design Reflections: Design Systems Reimagined/デザインシステムの再構築

0からはじめるデザインシステム | タイポグラフィ定義

デザインシステム - アイコンのビフォーアフターを紹介します

世の中のデザインシステムを色々知ろう【海外記事メモ】

Variablesをデザインシステムに導入してみた。

翻訳記事：プロジェクト・メタクロシス：如何にしてUIキットを世界的なムーブメントに変えたか @frog のデザインシステム

一貫性のあるイラストが誰でも作れる「イラストシステム」構築までの経緯

デザインシステム改善のその後！追加したルールや整理したこと

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

#デザインシステム 記事まとめ

フォローしませんか？

#figma

🍳半熟なデザインシステムを育てていく - noteの事例あれこれ振り返り

インタラクションを"感覚"から"言語"へ - インタラクションデザインシステム - 前編

デザインシステムイベント Framework by Figma開催！

皆で創るデザインシステム

デザイナーに向けたデザインシステムを作る

Design Reflections: Design Systems Reimagined/デザインシステムの再構築

0からはじめるデザインシステム | タイポグラフィ定義

デザインシステム - アイコンのビフォーアフターを紹介します

世の中のデザインシステムを色々知ろう【海外記事メモ】

Variablesをデザインシステムに導入してみた。

翻訳記事：プロジェクト・メタクロシス：如何にしてUIキットを世界的なムーブメントに変えたか @frog のデザインシステム

一貫性のあるイラストが誰でも作れる「イラストシステム」構築までの経緯

デザインシステム改善のその後！追加したルールや整理したこと

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

#デザインシステム記事まとめ