タグ

Sketchに関するstiloのブックマーク (6)

  • PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ

    PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは! 飼いなのですがに顔をうずめるのが難しい季節になってまいりました(毛まみれ) 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、1ページにつき1ファイル、スマートフォンもPCも別フ

    PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ
    stilo
    stilo 2018/07/13
    Atomic Design 導入事例。良い。『XDとAtomic Designの相性はイマイチ/ Atomic Designとの相性が良いSketchに移行しようという結論になりました』
  • Atomic Designの概念を参考にSketchのシンボルを効率的に管理する方法 | UXデザイン会社Standardのブログ

    新年明けましておめでとうございます。 2017年も、未来の豊かさにつながる仕組みをデザインする組織として、STANDARDメンバー一同、常に学び、考え、邁進して参ります。年もどうぞ、よろしくお願いいたします。 Sketchの連載記事を執筆しました 私事ですが、年末にWPJさんでSketchの連載記事を執筆させて頂きました。 吉竹 遼のSketch入門 for UIデザイナー – WPJ 対象はこれからSketchを触ろうと思っている方や、使っているけどもっと色々使い方を知りたい、という方です。今回はこの連載の中から、周りの反応が上々だったテクニックについて、編集さんに許可を頂き増補バージョンとしてお送りします。 Sketchはバージョン41以降シンボルのオーバーライドが可能になり、ますます効率化が進み使いやすくなりましたが、一方でシンボルを作成する機会も多くなり、管理の手間が増えてきまし

    Atomic Designの概念を参考にSketchのシンボルを効率的に管理する方法 | UXデザイン会社Standardのブログ
    stilo
    stilo 2018/04/17
    Atomic Designの解説。わかりやすい。
  • Sketchのシンボル活用で新規サービスの開発効率が2倍になった|北川レオ / hicard

    先日、SNSを使ってカンタンに募集することができるbosyuというサービスをリリースしました。 bosyuのデザインを作っていく中で、sketchのシンボルを活用してみたのですが、とても効率よく作業を進めていくことができました。Basecampに入った当初、ほとんどシンボルが使えていなかった頃に比べると開発効率が2倍ほどになったと思います。 あくまでも僕流なので、「自分はこうしてるよ。」っていうアドバイスを募集します!!!(bosyuリンクを記事の最後に貼っておくのでぜひ応募お願いします!) 命名規則はAtomic Designを参考する僕は基的にAtomic Designと言われる考え方をベースにシンボルを作っています。Atomic Designって何やねんって方はこちらの記事がわかりやすいので、ぜひ読んでみてください。 カンタンに言うと、デザインを小さい順からAtoms(原子)、Mo

    Sketchのシンボル活用で新規サービスの開発効率が2倍になった|北川レオ / hicard
    stilo
    stilo 2018/04/17
    『Sketchのシンボルをしっかり使えるようになってからは、作業効率も一気に上がりました。』
  • 基本機能からプロトタイプ制作まで!用途別・Sketchのおすすめプラグイン50選|Goodpatch Blog グッドパッチブログ

    こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。

    基本機能からプロトタイプ制作まで!用途別・Sketchのおすすめプラグイン50選|Goodpatch Blog グッドパッチブログ
    stilo
    stilo 2018/04/17
    永久保存版
  • デザインのバージョン管理をGitHubでしてみたら修正点が3秒で分かるようになった話 - Money Forward Developers Blog

    こんにちは。デザイナーの大橋です。 今日は、私が担当している “(しら)ずにお金が(たま)る”自動貯金アプリ『しらたま』 で導入してました、デザインのバージョン管理の話を紹介します。 デザインのバージョン管理といえば、AbstractやKactusがありますが、今回はあえてGit Sketch Pluginを試してみました。 デザインデータをGitHubで管理しようと思ったキッカケ 私以外のチームメンバーがみんなエンジニアだから、間違いなくGitHubに寄せたほうが効率いいんじゃないか。 新しいツールを導入すると、プロジェクトに関する情報が分散してしまいがちで、エンジニアも招待したり登録してもらったりしなきゃいけないのかなという印象。※あくまで印象です。 Kactusはプライベートレポジトリが有料。 こんな感じでなんかファイルが増えてく。。。(忙しいと放置しがちでよくない。。 GitHub

    デザインのバージョン管理をGitHubでしてみたら修正点が3秒で分かるようになった話 - Money Forward Developers Blog
    stilo
    stilo 2018/01/23
    「GitHub+SourceTree+Git Sketch Plugin」という組合せ。変更した画面のみ diffが出る。スワイプで変更箇所を確認できる。
  • 珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD

    概要: Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に

    珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
  • 1