Sketch + InVision + Zeplin + Abstractで効率化するデザインフロー
デザイナーの西田です。 弊社では目的に応じて、複数のデザインツールを使い分けてUIデザインを作成しています。 昔は各々好きなデザインツールを使っていたのですが、事業がどんどん拡大し、メンバーが増えていくと、チームで統一されたワークフローがないと回らない状況になっていきました。各ツールの長所＆短所を何度も議論した結果、現在はSketch + InVision + Zeplin + Abstractの組み合わせで進めています（2018年9月時点） 今回の記事では、現状のデザインツール＆フローに至った経緯を紹介していきます。 目次 1. プロダクト＆チーム プロダクト チーム 2. ワイヤーフレーム：自由 3. モックアップ：Sketch vs AdobeXD vs Photoshop Zeplin連携 Sketch Librariesによるコンポーネント化 4. プロトタイプ：InVision
CI&UIリニューアルしながらデザインシステムを作った話｜Yoko Nishida
「コデアル」という求人サービスのデザインシステムを作ってみました。CIリニューアルに伴う全スタイル＆コンポーネントの刷新、エンジニア＆デザイナー間の協業、そして約3ヶ月運用してみた感想をつづってみます。 実際に使っているドキュメント、Sketchファイルはこちら↓ ・Codeal Design Guideline ・Codeal UI Kit.sketch ・Sketch Tips for Codeal Design Guideline Codeal Design Guidelineの中身はこんな感じ。 1. デザインシステムとは組織やサービスの形態によって解釈は分かれると思いますが、私はデザインシステム＝ブランド、設計、開発をつなげるガイドラインだと認識しています（引用：結局デザインシステムは何なのか） スタイルガイドやテンプレートだけではなく、それらをチームでどう活用するかを言語化して
エンジニアが Zeplin を使って自社デザインフレームワークを取り入れる過程について — みんなのウェディングエンジニアリングブログ
みんなのウェディング、松久です。 みんなのウェディングでは、「Esthe（エステ）」という自社デザインフレームワークを導入しました。エステは、デザインガイドラインとCSSフレームワークを兼ねています。 エステの導入背景は、「チームで作るユーザーファーストなデザイン 」に書かれています。エステの開発自体は、「社内CSSフレームワークを作ったった」に書かれています。 今回は、自社デザインフレームワークを導入していく過程で、エンジニアは何をしたのか？ご紹介します。 今までのマークアップの課題 マークアップについては、マークアップエンジニアとデザイナーが中心に行っていました。デザイナーから、デザイン指示書と呼ばれる画像や書類に、色の指定、マージン、余白、線の幅について指示をデザイナーが行っていました。 作業の課題として、下記のようなことがありました JPEG 画像ファイルを開き計測して実装 画像を
SketchでSolarizedカラーパレットを作ったよ - Qiita
Viibarアドベントカレンダー、本日12/8は@ngtkがゆるゆると書きます。 LT;DR SketchでSolarizedカラーパレットを作ったよ モチベーション SketchでSolarizedのカラーパレットが欲しいとふと思った。 というのもSketchでterminal.appの絵を描く必要があったから。 さてやってみる まず何が欲しい？ 本当はパレットにカラーがセットされているというのが理想なんだけど、カラーパレットを管理する機能はSketchにないみたいだ。(あったらこっそり教えてっ！) そこで、サンプルのオブジェクトがあってそのオブジェクトから色を参照できたら良いと考えた。 すでにある？ 単純に需要がないからだと思うけどが、特にそれっぽいものは見当たらなかった。 公式も見てみたが勿論ない。 カラーサンプルを作るプラグイン 任意のカラーHEX配列からカラーサンプルを作るSwa
Prottとsketchとzeplinのススメ
書籍化し、12万部突破しました。 【SlideShare広告回避用】 https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます ・自己学習や勉強会などの目的でしたらご自由にお使いいただけます ・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください ・記事への参考資料にする際は適切な出典明記をお願いいたします 【使っているフォントについて】 M+フォント「MigMix1P」です。こちらもメイリオ同様おすすめです。 フリーで使えます。 【個人HP】 > https://mocks.jp > 仕事のご依頼はこちらから 【書籍情報】 デザイン入門：https://amzn.asia/d/4WDsTI6 デザイン図鑑：https
Generating CSS (that makes sense) from designs
For the past few weeks, we’ve been brainstorming on how to generate CSS from the design data we have in Zeplin. There are apps/plugins for this out there, but most of them just don’t feel, or work right in real world scenarios. Let’s face it: No one will just copy and paste the generated CSS and be done with it. Every developer cherishes their own way of implementing things. More importantly, ther
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
Features
zeplin color palette - Google 検索
https://xkcd.com/color/rgb/
Generating CSS with Zeplin
The Friendly Sketch App Community