コンテンツ
- 01.ガイドのコピーと貼り付け
- 02.スケッチクリーナー
- 03.アニマ
- 04. React Sketch.app
- 05. GitSketchプラグイン
- 06. ImageOptim
- 07.マジックミラー
- 08.もっとエクスポート
- 11.マーケッチ
- 12.セグメント化された円
- 13.スケッチランナー
- 14.アイコンフォント
- 15.検索して置換
Sketchプラグインは、Sketchをさらに改善するのに役立ちます。 Sketchは多くの人に選ばれているUIWebデザインツールであり、その優れた点の1つは、カスタムプラグインを構築することでその機能を拡張するために取り組んでいる人々のコミュニティです。
Sketchプラグインの管理がこれまでになく簡単になりました。プラグインは自動的に更新され、古いプラグインは無効になります。プラグインエコシステムをさらに便利にするのは、誰でもサインアップできるファイル共有サービスであるSketch Cloudです。このサービスでは、Sketchから直接、または非公開で共有されているSketchドキュメントを表示、ダウンロード、コメントできます。
それでは、ユーザーインターフェイスの設計方法を大幅に変える可能性のある最高のSketchプラグインを見てみましょう。必要なものを見つけたら、Sketchプラグインのインストール方法を読んでください。 Webツールが気に入った場合は、お気に入りのWebデザインツール、Webサイトビルダー、クラウドストレージのまとめをお見逃しなく。また、Webホスティングプロバイダーの選択は、サイトの成功にとって非常に重要であることを忘れないでください（ガイドが役立ちます）。
01.ガイドのコピーと貼り付け
- ここからダウンロード
- 価格： 自由
- 概要： アートボードからガイドをコピー、貼り付け、または削除します
すべてのデザイナーはガイドとの愛/憎しみの関係を持っています。時にはそれらは絶対に不可欠であり、それ以外の時間はあなたの邪魔をしているだけです。 Sketchのレイアウトオプションの代わりにガイドを使用している場合、複数のアートボード用にガイドを変更するのは悪夢ですが、このプラグインを使用すると、すべてのアートボードからガイドを簡単にコピー、貼り付け、削除できます。
02.スケッチクリーナー
- ここからダウンロード
- 価格： $2
- 概要： 笛のようにきれいなデザインファイルを入手してください
数回の反復を経たSketchデザインは、非表示のレイヤー、一貫性のない境界線の位置、未使用のレイヤースタイルなど、途中で少しのがらくたを拾うことになります。
乱雑なSketchファイルがあるのは世界の終わりではありませんが、それはハンドオフに影響を与える可能性があり、将来的にそれを理解する必要がある人にとっては生活が楽になります。すべてを手作業で行うのではなく、Sketch Cleanerを使用して、すべての一般的な問題に自動的に対処します。
03.アニマ
- ここからダウンロード
- 価格： 上向きに無料
- 概要： レスポンシブで忠実度の高いプロトタイプを作成する
以前は個別の無料プラグイン（自動レイアウトとランチパッド）として利用可能でしたが、Animaは、ピン、スタック、パディング、およびすべての画面に適合する忠実度の高いプロトタイプを使用してレスポンシブレイアウトを作成できるように設計されたオールインワンプラグインになりました。 1つのプロジェクトをサポートする無料バージョンがまだあります。無制限のプロジェクトの場合、価格は月額25ドルからです。
04. React Sketch.app
- ここからダウンロード
- 価格： 自由
- 概要： Reactコンポーネントをスケッチにレンダリングする
Sketchでの設計資産の管理は難しい場合があります。この便利なSketchプラグインは、アセットを管理するためのより簡単で信頼性の高い方法を提供します。デザインをReactコンポーネントとしてコードに実装し、このプラグインを使用してスケッチにレンダリングします。また、実際のデータをフェッチしてSketchファイルに実装するのも簡単になります。
React Sketch.appは、デザイナーと開発者の間のギャップを埋めることを目的として、そのデザインシステムで使用するためにAirbnbによって開発されました。
05. GitSketchプラグイン
- ここからダウンロード
- 価格： 自由
- 概要： Sketchに組み込まれたGitクライアント
このプラグインは、バージョン管理をSketchに導入することを目的としています。これは、デザインのすべての部分の画像をエクスポートし、かなりの差分を生成することで機能するため、どのような変更が加えられたかが明確になります。設計プロセスの各ステップを文書化することにより、チームの全員が設計の進捗状況を確認できます。
Git Sketch Pluginは、Kactusと呼ばれるより包括的な有料バージョン管理システムの作成に移行したMathieuDutourによって作成されました。
06. ImageOptim
- ここからダウンロード
- 価格： 自由
- 概要： Sketchでの画像の最適化
SketchはSVGファイルを最適化するための独自のソリューションを提供しますが、JPGおよびPNG画像を圧縮するためのさまざまなオプションはありません。 ImageOptimは何年にもわたって堅実なサービスを提供してきたので、この機能をSketchにもたらすことは理にかなっています。
読み込み時間と画像の最適化を気にするデザイナー（すべてのデザイナーである必要があります）は、ツールボックスにImageOptimを追加する必要があります。プラグインだけでなく、macOSシステムにコアImageOptimアプリ（無料）をインストールする必要があります。また、Sketchでレイヤーをエクスポート可能としてマークする必要があります（開始するには、[すべてのアセットをエクスポートして最適化]に移動します）。
07.マジックミラー
- ここからダウンロード
- 価格： 月額4ドルから
- 概要： 画像透視変換ツール
印象的な製品のモックアップを作成しようとしているが、トリッキーなものに対処するためにPhotoshopに飛び込み続ける必要がある場合は、MagicMirrorが命の恩人になる可能性があります。これは画像の遠近法変換ツールであり、Sketchを離れることなく、遠近法のモックアップやその他の歪んだ効果を作成できます。
08.もっとエクスポート
- ここからダウンロード
- 価格： 自由
- 概要： プレースホルダー画像を自動的に生成します
デザインにプレースホルダー画像を追加することはプロトタイピングの必要な部分ですが、実際の画像を見つけるのは面倒な場合があります。したがって、時間を無駄にするのではなく、すべてをDayPlayerに任せてください。これにより、さまざまなプレースホルダー画像サービスから、カスタマイズしたプレースホルダー画像を任意のSketchドキュメントに追加できるため、ビルマレー、ニコラスケイジ、子猫のいずれを使用するかを決定する必要があります。
11.マーケッチ
- ここからダウンロード
- 価格： 自由
- 概要： CSSスタイルを測定および取得できるhtmlページを生成します
SketchデザインからCSSスタイルを取得したい場合は、Marketchのようなプラグインが絶対に必要です。これにより、SketchアートボードをHTMLドキュメントでいっぱいのzipファイルとしてエクスポートし、それを抽出して、すぐに使える甘いCSSをたくさん引き出すことができます。
12.セグメント化された円
- ここからダウンロード
- 価格： 自由
- 概要： 正確な円形グラフィックを作成する
グラフや図のセグメント化された円を作成する簡単な方法は次のとおりです。このプラグインは、破線や目盛りの円を含むさまざまなスタイルの円形図を作成でき、厚さはコンマ区切り値の単純なリストを介して制御されます。
13.スケッチランナー
- ここからダウンロード
- 価格： 自由
- 概要： 検索のためのスポットライト
Sketchは、最小限のキーボードワークフローで愛されています。そうは言っても、Photoshopのような別のデザインアプリといつも忘れたり混乱したりするようなキーボードショートカットが常に2つか3つあります。キーボードショートカットがなく、奥深くに隠されているあまり一般的ではないツールや機能を忘れないでください。スケッチメニュー。
Sketch Runnerはこれらの問題を解決し、macOSユーザーが慣れ親しんだ方法で解決します。SketchRunnerはmacOS Spotlightですが、Sketch用です。
14.アイコンフォント
- ここからダウンロード
- 価格： 自由
- 概要： アイコンフォントを管理する
アイコンフォントは、大量の画像アセットをエクスポートして最適化することなく、Webデザインでアイコンを使用する非常に効率的な方法です。通常、アイコンフォントは 頭> CSSやJavaScriptの場合と同様に、HTMLWebページのセクション。ただし、Sketchでそれらを使用するのは少し複雑です。ありがたいことに、アイコンフォントはそれを簡単にします。
Sketch IconFontをダウンロードしてインストールした後、SVGフォントファイルをダウンロードするか、FontAwesome、Material Design Icons、Ion Icons、Simple LineIconsのフォントファイルを含むこのフォントバンドルをダウンロードしてください。完了したら、[プラグイン]> [アイコンフォント]> [フォントバンドルのインストール]に移動し、[ファイルを開く]ダイアログからダウンロードしたフォントを選択してから、[プラグイン]> [アイコンフォント]> [グリッド挿入]> [目的のアイコンフォント]に移動して挿入します。アイコン。
デザイン用のカスタムアイコンセットをデザインする場合でも、既製のアイコンを自由に使用できると、デザインの初期段階でのラピッドプロトタイピングに役立ち、忠実度の低いモックアップにもう少し明快さ/忠実度を追加できます。 。
15.検索して置換
- ここからダウンロード
- 価格： 自由
- 概要： 選択したレイヤーのテキストを検索して置換
検索して置き換える必要があるのはテキストエディタだけではありません。Sketchでも役立ちます。このプラグインには多くの高度なオプションがあり、選択したレイヤー（およびその中に含まれるすべてのもの）のテキスト内の特定の単語やフレーズのインスタンスを検索して、簡単に置き換えることができます。
次のページ：より多くの時間を節約するSketchプラグイン
