Web開発者のための10の無料スケッチプラグイン

スケッチは、Webデザイナーや開発者の間で大きな注目を集めています。これはおそらくそれが原因です 直感的で覚えやすい Webサイトのプロトタイプを簡単に作成できるようにするための機能がたくさんあります。それは、このアプリケーションが拡張可能であるということでもあるかもしれません、すなわちあなたがプラグインの助けを借りて簡単にアプリケーションに新しい機能を追加することができる.

Sketchを使用する際の生産性を向上させるのに役立つ10のプラグインがあります。コンテンツジェネレータ、カラーパレットセレクタなど、さまざまな種類があり、レイヤの測定値を表示したり、レイヤにパディングを自動的に追加したりするのに役立ちます。.

1. CSSバディ

CSSバディ スケッチワークスペースでCSSをレイヤーに追加できます。基本的には、CSSを使用して、幅、高さ、不透明度、ボックスシャドウ、境界線、および背景をレイヤーに適用できます。.

このプラグインをインストールしたら、レイヤーを選択してから選択してください。 選択に適用 プラグインメニューから。スタイルシートを入力するように促すダイアログが表示されます。 CSSクラスなしでCSSコンテンツを追加し、あなたのレイヤーが形作るのを見る.

2.材料設計カラーパレット

あなたが材料設計の傾向に従うならば、あなたが気付くであろう顕著なことは独特の色の使用です。材料設計は素晴らしいカラーパレットを持っています。今、あなたはそれをあなたのワークスペースに持って来ることができます 材料設計カラーパレットプラグイン.

このプラグインは、ワークスペースを閉じなくても、数秒でカラーパレットを生成します。プロジェクトに適したカラーパレットを生成するには、[色相]、[値]、または[色見本]を選択します。.

3.スケッチノート

時々私達はコメントでまたはドキュメンテーションによって私達がしていることを示す必要がある。あなたが他のデザイナーとのプロジェクトやクライアントの関与に取り組んでいるなら、これはまた必要であるのであなたは結果が皆が狙っていたものであることを確実にすることができます.

スケッチノート Sketchであなたのデザインを簡単に文書化するためのプラグインです。デザイン上の任意の要素に追加したコメントを含む、追加のサイドバーがワークスペースに追加されます。コメントの並べ替え、再配置、削除、およびコメントの表示/非表示切り替えができます。.

4.デイプレイヤー

実際の画像をデザインに使用する前に、デザインプロセスをスピードアップするためにプレースホルダ画像を使用することがよくあります。スケッチの場合は、あなたが使用することができます デイプレイヤー Placehold.it、LoremPixel、Unsplashなどの6つのプレースホルダイメージサービスから、カスタマイズしたプレースホルダをSketchワークスペースの任意のレイヤに追加します。有効にすると、画像の幅、高さ、その他の情報を設定できます。.

5.コンテンツジェネレータ

プレースホルダー画像を挿入するためのプラグインは既にありますが、一般的なコンテンツ用の画像はどうですか。? コンテンツジェネレータ アバター、名前、位置情報などのダミーデータを追加するのに役立ちます。モックアップデザインや、その場でデータを生成する方法を見つけようとすることによる頭痛の種を減らすのに最適です。.

ダミーデータを追加するには、レイヤーを選択してから プラグイン>ジェネレータ, そして選ぶジオ, ペルソナ または 写真.

6.スケッチメジャー

スケッチメジャー スケッチのための測定ツールです。それはあなたのデザインの中の1つまたは複数の層の長さやサイズを測定します。また、レイヤーの余白と余白、および2つのレイヤー間の距離も取得できます。スケッチメジャーは、色、ボーダー、不透明度などのレイヤープロパティも印刷できます。すべての測定値はキーボードショートカットで起動できます.

7.動的ボタン

動的ボタン 固定パディング付きのボタンを簡単に作成できます。テキストの長さに関係なく、指定した値に基づいてパディングが自動的に調整されます。プラグインをインストールすると、ショートカットCommand + Jを使ってテキストを構造に変換することができます。必要なパディング量は、（フレックスボタングループの下の）（0：0：0：0）テキストレイヤーにパンチインできます。.

8.活版印刷スケール

Typographic Scaleは、選択したテキストレイヤーを活版印刷スケールにするためのプラグインです。このプラグインを使用するには、テキストレイヤー（単一または複数）、または少なくとも1つのテキストレイヤーを含む混合レイヤーを選択してから選択します。 プラグイン>文字体裁 ダイアログで値を調整します。結果は、活版印刷の尺度の規則に従った尺度の変更されたテキストのセットです。.

9.モジュライザー

あり モジュライザー キーボードショートカットのShift + Command + Mで、デザイン上のボタン、モジュール、または領域の余白を制御できます。すべてのレイヤーを組み合わせてグループ化し、ショートカットを使用して必要な余白値に基づいて余白を自動的に調整できます。。これを実際に見るためにビデオデモを見なさい.

10.ブレード

デザインをスケッチからHTMLに変換することを考えたことはありますか？もしそうなら、あなたはおそらく得る必要があります刃, あなたのデザインから自動的にHTMLファイルを生成するSketchプラグイン。それはグループをに変換します div, テキストを p 等々.

Bladeを使用しているときは、層に[btn]やinput [text]のように特別な名前を追加することによって、どのDOM要素を生成するかをプラグインに指示することができます。内側の外観については、このビデオデモをチェックしてください.

今読む：WordPress開発者のための12の便利なプラグイン