マガジンのカバー画像

デザインシステム

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

#UI

手戻りが少ないアトミックデザインの導入

手戻りが少ないアトミックデザインの導入



こんにちは、クックパッド株式会社デザイナーの藤井(@kenshir0f)です。
業務では主にKomercoというサービスのデザインを担当しています。

Komercoは料理が楽しくなる料理道具やうつわ、調味料や食材など料理が楽しくなるモノが買えるアプリです。
料理に興味がある方はぜひ触っていただけたら嬉しいです。

さて、今日お話しする内容は新規事業でアトミックデザインを導入したお話です。これ

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

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

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

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

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

もっとみる
デザインシステム構築ツール Specify (アルファ版) を使ってみた

デザインシステム構築ツール Specify (アルファ版) を使ってみた

デザインシステムを構築するためのツール、Specifyのアルファ版が使えるようになったので少し触ってみました。
(Ver 0.7.1)

なぜSpecifyに期待するのか私はWebアプリの(UI)開発に関わっているのですが、デザインのアウトプットとして一番管理されるべきなのは「ソースコード(HTML/CSSなど)」だと思っています。
(もちろん自分の役割、担当範囲、チームのスタイルによりますが)

もっとみる
クラシルのWebチームでデザインシステムを少しずつ構築していっている話

クラシルのWebチームでデザインシステムを少しずつ構築していっている話

delyのWebチームでプロダクトデザイナーをやってるkassyです。

現在、Webチームではデザインシステムを少しずつ導入しています。今日はその取り組みについてご紹介したいと思います。

今回の作業を行ったチームのメンバー構成
デザイナー × 1
フロントエンドエンジニア × 2
フロント兼サーバーサイドエンジニア × 1

デザインシステムとはなにか
とはいえデザインシステムと言われてもなん

もっとみる
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 とスペースマーケットに合ったデザインツールを探して右往左往していました

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

Atomic DesignからみたBootstrap

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

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

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

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

もっとみる
Sketchでデザインしながらガイドラインを作ろう

Sketchでデザインしながらガイドラインを作ろう

はじめまして。UIデザイナーのカミソルです。
わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。
今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います!

※この記事はSketch Advent Calendar 2017 19日目の記事です。

なぜデザインしながらガイドライン化したいのか

もっとみる