Sketch LibrariesとAbstractを使ったAtomic Designの実践💪 | Nagisaのすゝめ
はじめに こんにちは！ 社長室インキュベーションチームで新規サービスのデザインを担当しています田村です。 先日、デザイナーリーダーの川畑が執筆した記事にある通り、Nagisaではデザイン手法としてAtomic Designを採用しています。 Atomic Designは、コンポーネント指向のデザイン手法です。 コンポーネント指向はパーツの再利用と効率の良い運用を可能とし、デザインの追加・変更が容易であり作業の効率化に繋がります。 また、React Storybookなどを使用すれば「あのボタンがない」「カラーが違う」などの実装段階での抜け漏れも防げますし、デザイン変更のハードルも下がるかと思います。 コンポーネントの粒度がしっかりと定義できていれば、エンジニアさんとの共通言語が増えてコミュニケーションの質が高まることも期待できます。 このようにAtomic Designはデザイナーの作業効
“Atomic Design”を導入するときに便利な Sketchプラグイン – Coiney Product Team – Medium
デザインしちゃったあと、“Atomic Design”を導入するときに便利だった Sketchプラグインをまとめてみました。 目次はじめに ・社内管理画面のリニューアル ・Atomic Design…いきなり「原子」と言われても。 あってよかった便利なSketchプラグイン ・1. シンボルを整理整頓「Symbol Organizer」 ・2. リネイムの定番「Rename It」 ・3.レイヤー探すなら「Sketch Search Everywhere」 ・4. 空のフォルダ一斉削除!!「Cleanup Useless Groups」 ・6. おまけ はじめに社内管理画面リニューアル弊社では約1年前から社内管理画面のリニューアルをしています。ほぼ新管理画面へ移行が完了。 でも実は画面のデザインはかなり前に完成していました。 すでにリニューアルはほぼ完了しています。とはいえ、機能面のPDC
プロのWebデザイナーが使用している人気のツール、フォント、ワークフローなどのまとめ -Web Design Trend Report
プロのWebデザイナー、デベロッパーが実際に作業しているファイルを元に、Webデザインのトレンドをツール、カラー、フォント、エフェクト、ワークフローの観点から調査したレポートを紹介します。 安定して人気のあるトレンド、変化しているトレンドをチェックできます。 2016 Web Design Trend Report デザイナーとデベロッパーのコラボツール「Avocode」で利用された1,127,302のPSDとSketchファイルに基づき、2016年のデータとしてまとめたものです。 レポート公開にあたり、私もほんの少しだけ協力しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザイナーが使用しているツール デザインのコンポーネント化 ファイルのリビジョン ファイルの容量 Webデザインでもっとも人気が高いフリー
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
UIを制作するベストなアプリ、とばかりに普及したSketch。最近はHTMLコーディングに役立つSketch Pluginも増えてきました。 本日は、デザイナー視線ではなく、コーダーやプログラマー的な立場からみた、コーディングを10倍早くするSketch Pluginを紹介します。 はじめに紹介するのは、「Make Exportable」というプラグインです。画像の「Export」を爆速にするプラグインです。 Retina Displayのような高解像度ディスプレイも今や当たり前になり、画像を利用するときにも@1xや@2xなど、1つのレイヤーから複数種類の画像形式のファイルやサイズの書き出しをするのが当たり前になりました。 しかし、Sketchでは、そのような作業を行うときに欠点があります。複数の種類の画像形式のファイルやサイズの指定を一つ一つおこなうにはかなり面倒です。 そのような時に「
2018-bonfire-design-komerco-design-system
2018/04/20で発表したBonfire Design #3 の登壇資料です。
Sketchのバージョン41で追加された『シンボルのOverrides』を使ってUIデザインの状態管理をラクにする - よりぶろ
Sketchが装いも新たにバージョン41に上がりました。 今回のアップデートの目玉は何と言っても『Nested Overrides』ではないでしょうか。 説明文には Symbol instances can now override their nested Symbols to any other Symbol with the same size. と書かれています。これ、どんな機能かと言うと『シンボルのOverrides』なんですね。 Overridesについて軽くおさらいをすると、Sketchのシンボルには『インスタンスに対してラベルや画像を（親の情報を維持したまま）別の内容に上書きすることができる』機能がついているんですね。それがOverridesです。 こういったシンボルを作って インスタンスを複製して配置した後に、こんな感じにそれぞれのテキストや画像を変えられるのです。 ちな
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
SketchのシンボルをAtomicDesignで設計する。 - Qiita
概要 デザイン界隈でよく聞くAtomicDesignですが、 普段エンジニアの僕はReactのコンポーネント設計時にAtomicDesignに出会いました。 ReactやCSS(SCSS)側でも、AtomiDesignを採用しているのですが、 Sketchでも徐々にAtomicDesignを採用しています。 AtomicDesignは賛否両論あると思いますが、 賛成派の意見でAtomicDesignでのシンボル切り分けについて書きます。 AtomicDesignとは AtomicDesignとは、様々なパーツを合体させて、繰り返し可能なエレメントやテンプレートが作成できるシステムを構築することをいいます。 AtomicDesignのメリット Sketch/CSS/React全てで言える事だと思いますが、以下の様なメリットがあります。 保守性の高いUIを作る事ができる。 デザイン仕様の変更に
初心者でも簡単に使えるSketchのおすすめ時短プラグイン５選 | Tarokenlog
他にも設定できますが僕は上記の機能で十分ですので気になる方はググってください。 Prism これはドキュメントカラーズのパレットを作ってくれるプラグインです。 ここからダウンロード・インストール>>Prism Plugin / Prism / Generate Color Paletteをクリック こういうドキュメントカラーズだったら こんな感じになります。 よく使う色をDocument Colorsに追加してると思いますがこれで簡単にHexコードやrgbaも表示してくれます。 Craft これはめちゃくちゃ使えます!! モックなどを作る時、テキストや画像を一つ一つ入れ込むのがめんどくさい時に使えます。 絶対入れときましょう!! ここからダウンロードできます>>Craft インストールが完了すると勝手に”Data、Duplicate、Library、Sync(Beta)”がオンになっていま
Atomic Designの概念を参考にSketchのシンボルを効率的に管理する方法 | UXデザイン会社Standardのブログ
新年明けましておめでとうございます。 2017年も、未来の豊かさにつながる仕組みをデザインする組織として、STANDARDメンバー一同、常に学び、考え、邁進して参ります。本年もどうぞ、よろしくお願いいたします。 Sketchの連載記事を執筆しました 私事ですが、年末にWPJさんでSketchの連載記事を執筆させて頂きました。 吉竹 遼のSketch入門 for UIデザイナー – WPJ 対象はこれからSketchを触ろうと思っている方や、使っているけどもっと色々使い方を知りたい、という方です。今回はこの連載の中から、周りの反応が上々だったテクニックについて、編集さんに許可を頂き増補バージョンとしてお送りします。 Sketchはバージョン41以降シンボルのオーバーライドが可能になり、ますます効率化が進み使いやすくなりましたが、一方でシンボルを作成する機会も多くなり、管理の手間が増えてきまし
エンジニアがSketchにチャレンジ | CyberAgent Developers Blog
初めまして。サイバーエージェントのメディア部門でディレクションをしていますshono（@BowyerApp）です。ついこの前まではAndroidアプリのエンジニアをしていました。 先日、弊社デザイナーの井上さんにエンジニア向けのSketch勉強会を開いて頂きましたのでその内容をレポートします。 目次 背景 Sketch（スケッチ）のインターフェース説明 デザイナーはインサートを開かない Sketch（スケッチ）で実際にUIを作ってみる Sketch（スケッチ）のTips 画像の書き出し シンボルを作る シンボルのネーミングを工夫すると更に便利に マージンのシンボル化 まとめ 勉強会の資料 背景 エンジニアとの共通言語を持つことで、「最終的なプロダクトの品質を上げること」 これをきっかけに各々が自分に必要な領域へと技術の幅を広げていくこと Technical Creatorとは？ ー 求めら
WebデザイナーがSketchを愛する4つの理由 | Web制作 | あさぎブログ | あさぎデザイン 名古屋・Web制作
配色のブレを防ぐ 案件、プロジェクトをまたいで使う色は「Global Colors」パレットとして登録しておけばどのSketchファイルでも使えます。特定の案件だけで使いたい配色は「Document Color」パレットとして登録しておいて、そのSketchファイル内のみ使えるようにしています。 SketchファイルをコピーすればDocument Colorは引き継がれますし、プラグインで他のSketchファイルに読み込むこともできます。 Sketch Palettes CSSフレームワークを導入するプロジェクトにも最適 Sketchには「Sketch App Sources」というSketch形式（.sketch）の素材配布サイトがあります。「Bootstrap」「Foundation」などのCSSフレームワークのUIキットも揃っています。 Bootstrap 4 Beta 2 Libr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/sketch-icon-color
https://tondemodesign.com/sketch-tips-slice/