マガジンのカバー画像

デザインのルール設計

41
デザイン原則、デザインシステム、ガイドラインの考え方や運用について理解を深めるためのまとめ
運営しているクリエイター

#figma

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

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

デザインシステム完全版|Figmaでの作り方、事例など【2024年版】

このドキュメントの目的デザインガイドライン・システムに関する理解を深め、UIUXを通したプロダクト価値の最大化が業界として底上げされるといいなと思っています。 あとは、私rikikaが個人的にいろいろなお仕事で作らせて頂く機会をいただくのですが、そのたびに事例や作り方のハウツーが目まぐるしく変わっていき、インターネット上に情報が散らばっていると感じていたのでそのsingle source of truthの役目を担いたいという気持ちもあります。 とはいえ、絶対これが正し

FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話

いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。 改めて軽く自己紹介昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。(ここに関しては入社半年エントリー記事で詳しく書く予定) 普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でも

デザイントークンって何?

「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこの W3C では という定義がされています。 実態としては至極シンプルなものですが、もっと分かりやすくするために具体例を見てみようと思います。 上記では色の値とそれに

Figmaのリファクタリングからはじめるデザインシステムの構築

こんにちは、GaudiyデザイナーのTORAJIRO(@jirosh1998)です。 『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。 このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋(mizoさんをはじめmikanのみなさん、具体的なアウトプットの公開まで許可いただき感謝です!心広すぎ!) デザインシステム本

2020年、事業会社の開発組織で機能するデザインシステムを目指して #1 背景と原則編

こんにちは!株式会社スペースマーケット デザイン部の伊東です。 リモート勤務が常態化した中で、デザイン部としても"これからの働き方"を模索した上での試みが増えています。 例えばリモートランチや、週2のチェックイン(仕事へ入り込む前の朝にアイスブレイク的に行われるリモート雑談。毎回簡単なテーマを設定して話します)、Figmaを活用したペアデザインなどです。まだまだ課題も残しているのが実際の所ではありますが、完全リモートの体制以前と比べて仕事の効率を損なわないよう各々が意識しな