マガジンのカバー画像

デザインシステム

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

#UIデザイン

デザインシステムをアジャイルで。表記ルールを自社サービスのデザインに

デザインシステムをアジャイルで。表記ルールを自社サービスのデザインに

以前、「 デザインシステムをアジャイルで構築する方法 」という記事の展開で、今回は表記ルールに関する部分をお送りしようと思っています。
とはいえ、デザインシステムの話で、表記ルール?と思われる方もいらっしゃるかもしれません。よくイメージされるのは出版社や大企業の印刷媒体を意識した言語表現に関するルールを記載したものというイメージでしょうか?
ですが、そう言った体系的にまとまっている例は少なくともU

もっとみる
Fluid Interfaces実践 - なめらかなUIデザインを実現する

Fluid Interfaces実践 - なめらかなUIデザインを実現する

こんにちは。プロダクトデザイナーのミカサ トシキ(@acke_red)です。レシピ動画アプリ「クラシル」のUI/UXのデザイン領域を担当しています。

この記事では、WWDC2018にてAppleが提唱し、昨今のUIデザインの新たな潮流である “Fluid Interfaces” をいかに取り入れていけば良いか、クラシルでの実践事例をあげつつ、考えていきたいと思います。

※この記事は dely

もっとみる
デザインガイドラインの初回構築時のポイントと運用方法

デザインガイドラインの初回構築時のポイントと運用方法

※過去ブログからの移転です

エンジニアとデザイナーが互いにプロダクト開発をしやすくするためにデザインガイドライン(あるいは拡張してデザインシステム)を作ることがあります。いま私がデザインしているプロダクトであるHERP ATSでは1年前にデザインガイドラインを設けて運用しています。

デザインガイドラインを実際に構築して1年ちょっと運用してみて「最初に構築するときここまで考えておけばよかったな」

もっとみる
まずはちいさくはじめよう!デザインシステム勉強会

まずはちいさくはじめよう!デザインシステム勉強会

ノゾエです(@conoito)

最近お世話になっている坪田さん(@tsubotax)の手配で、
吉竹さん(@ryo_pan)をお招きし、
デザインシステム勉強会を開催していただきました。

坪田さん:「これって内容をnoteとかにまとめて書いたりしても大丈夫ですよね?」
吉竹さん:「いいですよお」

とのことでしたので、ありがたくまとめさせていただきました〜〜〜感謝です🙏

ちなみにこの勉強会

もっとみる
Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。

ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。(スマートキャンプでもまだまだ模索中......)

スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet(ビスケット)」という新サービスを発表をしました。

まだ開発中のサービスですが、このBiscuet(ビスケット)

もっとみる
【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【まずやること編】 デザインデータをSketchからFigmaにお引越ししよう
もあわせてドウゾ

・・・

ノゾエ(@conoito)です。

今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。
約半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。

今日は、Figmaに移行してから行なった、
コンポーネントの整備からスタイルの最適

もっとみる
Sketch × inVision × Zeplin × GitHub(Abstract)からFigma に移行してみて

Sketch × inVision × Zeplin × GitHub(Abstract)からFigma に移行してみて

こんにちは! 株式会社スペースマーケットデザイン部の久保です。

ここ数年はデザインツールの戦国時代と言われるほど世の中には色んなデザインツールがありますが、2019年10月現在のスペースマーケットのデザイン部ではFigma をメインに使用しています。
この4年間でPhotoshop → Sketch ⇔ XD → Figma とスペースマーケットに合ったデザインツールを探して右往左往していました

もっとみる
エンジニアとデザイナーがデザインシステムを一緒に作った話

エンジニアとデザイナーがデザインシステムを一緒に作った話

こんにちは。UI/UXデザイナーの kotani(こにたん)です。
少し前まで担当していた SALON TOOL ( 以下、サロンツール )というアプリーケーションのデザインシステムを作った時の話を書きます。
今回はデザインシステムの中でも特に、エンジニアと協力した部分=コンポーネントの切り分け単位と命名について一緒に試行錯誤したお話です。

サロンツールとはまず、サロンツールがそもそもどんなもの

もっとみる
Atomic DesignからみたBootstrap

Atomic DesignからみたBootstrap

はじめまして。UIデザイナーの@nikoko45です。

最近Webサービスのデザインガイドラインを作っていて、特にコンポーネントをどうまとめたら良いのか模索中です。ユーザーには一貫したUIや世界観を提供でき、開発者にはもっと効率的に作業スピードをあげられる方法はないか考えてみました。

デザインガイドラインで目指したいこと

一貫性のあるデザインを維持するために、デザインファイルのテンプレート作

もっとみる