デザインシステム知見まとめ

本

noteにある様々なデザインシステムの知見をまとめていくマガジンです。良い記事を選定してくれる運営メンバーも募集中です。

運営しているクリエイター

#figma

【Figma】10 万通り以上のイラストが生成できるモジュールを公開しました

こんにちは。株式会社くふう AI スタジオでデザイナーをしている miya です。今回、どなたでも簡単にイラスト生成できる「イラストモジュール omiso」を Figma Community に公開しました。作成したきっかけ前回 Zaim のイラストシステムを構築する際に、イラストモジュールを作成しました。 Zaim のイラストは、課題として「描く人によって微妙に絵柄が異なる」「塗り面があったりなかったりし、汎用性に欠ける」といった課題がいくつかありました。そこで

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

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

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

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

Figmaでminneのイラストモジュールができるまで

こんにちは。 GMOペパボ株式会社のハンドメイドマーケットサービス「minne」でデザイナーをしております、sziaoreoです。以前「minneのブランドを反映したイラストができるまで」の記事を公開しましたが、そのイラストをより簡単に活用できるように、Figmaでのモジュール化にチャレンジしてみました。そのままではモジュールに展開するのが難しい状態だったイラストに対して行った作業ステップや、モジュール化してみての気づきについてご紹介していきたいと思います。（Fig

Figmaからさまざまなカラートークンを生成して最高の色世界を保守する noteUIDev#1

この記事は、Figma 開発 Advent Calendar 2022 の17日目の記事です。こんにちは 🐈 ぼくは CDO 室直下のデザインシステムプロジェクトで、コンポーネントライブラリ開発をしている UX エンジニアです。デザインと実装を繋いで、一貫性のある体験を提供することをテーマ取り組んでいます。これから少しづつ日々のチームでの開発 note を書いていきますので、お時間あればお付き合いください◎ _ _ これはデザイナーが把握している色世界を、実装側にい

SmartHRのプロダクトデザインの生産性を高める“デザイン”のためじゃないデザインシステムとは（Schema2022）

こんにちは。 SmartHRでプロダクトデザインをしている@wentz_designです。本記事は、2022年11月2日に開催された「Schema by Figma 2022 Tokyo」で発表した「“デザイン”のためじゃないデザインシステム」のスライドを元にした内容になります。早口で話して20分くらいかかる内容になりますので、お時間のある時に読んでみてください。また、記事に構成する上で文字だけのスライドなど一部を省略していますが、全スライドはFigma Comm

Figma Communityでフォローしておきたい企業アカウント7選+α

Figma Communityは世界中のFigmaユーザーがそれぞれのリソースを公開し、自由に使うことができるコミュニティです。具体的にはUI Kitやテンプレート、アイコンのようなUIデザインに使えるリソースや、またはFigmaやFigJamの作業を便利にするプラグイン、ウィジェットなどが公開されています。ユーザーによっては自身のポートフォリオや、ワークショップ資料やプレゼンテーション資料などを公開していることもあります。 Figmaアカウントを持つユーザーが公開できる

デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える

カンムでプロダクトデザインをしている osanai です。こんにちは。前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページ

２週間で爆速整備したデザインシステムと運用ルールを公開

こんにちは、カウシェDesignerの@Kana Kikuchiです。サービスのデザイン運用って難しいですよね。カウシェはリリースから約2年が経過するプロダクトですが、つい1年前まではデザインシステムやFigmaの運用ルールがおざなりの状態でした。そこで今回は、そんな適当デザイン運用から、ある程度の運用ルールが整うまでの怒涛の2週間について記載し、整備したデザインシステムやFigma運用ルールをご紹介したいと思います！なぜやったか1人でデザインしていたカウシェに

SmartHRのプロダクトデザイングループのFigmaの運用を大公開！第1弾：デザインデータに対する考え方

こんにちは。 SmartHRでプロダクトデザインをしている@wentz_designです。入社して16ヶ月が過ぎ、そろそろ入社エントリなるものを書く機運か？と思い至り、これまで取り組んだことについて書いてみることにしました。私は現在、メインでSmartHRの基本機能の開発に携わっています。サブプロジェクトとしてユーザーリサーチ推進室の運営、SmartHR Design Systemの運営、Figmaというツールの社内利用推進および組織アカウントの管理・運用に関わって

「楽天カードらしさ」を追求した楽天カードのデザインシステムの導入と今後について

楽天グループはさまざまなサービスを展開しており、楽天カードのお客様においても楽天カードだけではなく楽天市場や楽天銀行など、ほかの楽天グループのサービスも多くのお客様にご利用いただいています。それぞれご提供するサービスは別ですが、お客様にとっては1つの「楽天ブランド」であるため、楽天グループ共通のデザインを踏襲しながらも、金融サービスに特化した顧客体験を提供できるよう、楽天カードのデザインチームによりカード事業独自で「楽天カードのデザインシステム」と呼ぶデザインシステムを構

DesignSystem"FALCON"ver2.0を公開するまでの話

こんにちは。SPEEDAのUIデザイナーのあんざいです。先日大幅にアップデートされたFigmaの機能に合わせて、SPEEDA Design System "FALCON"もアップデートして2022/07/01にver2.0を公開しました！今回は公開までの流れとデザインシステムの更新をFigmaアップデートに合わせて行う際の注意点などを紹介したいと思います。公開までの流れSPEEDAでは実際に使用してるマスターファイルと公開ファイルは分けているので、下記のような順番で

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

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

デザインシステム初心者が勉強会を開いて知った泥臭く生々しい5つの運用ヒント

ここ数年よく耳にするようになった「デザインシステム」という言葉。なんとなくチームの生産性を上げる方法論くらいには理解しているけど、本を読んでも教科書的な話しか無くていまいちピンとこない、と思った人は多いのではないでしょうか。私もそう感じる中の一人でした。デザインシステムは業種、職種、組織規模、事業形態によって目指すべき形が変わるものです。また、組織の中で定着させるための定型的なフォーマットが無いので、なかなか本格的に手が出しにくい、やってはいるものの上手くいってるか分から