sketchは楽しい

【解決】Sketchでline-heightが効かない!!変!「Golden-Ratio-Line-Height-Sketch-PluginをPluginをGitHub上からインストールして設定&使用方法」

【解決】Sketchでline-heightが効かない!!変!「Golden-Ratio-Line-Height-Sketch-PluginをPluginをGitHub上からインストールして設定&使用方法」

sketchは楽しい

sketchは楽しい

line-heightの背景

デザイナーさんから「sketchでのline-height設定が効いている感じがしない」といわれ、

そんなわけないだろと思いながら実際使って見たら

計算の方法が複雑らしい

プラグインを勧めたが、

GitHub上にはあるが、
https://github.com/lorenzwoehr/Golden-Ratio-Line-Height-Sketch-Plugin

「これをどうやって導入したらいいかわからない。」
「確かに。。どうするんだっけ」
と思い調べた。

検索するとなかなかそこら辺の解決記事が出て来なかったので

困っている人多いのではと思い

line-heightやgithubからのsketch設定方法を

まとめることにした

sketchにおけるline-height使用、設定方法概要

1. プラグインをダウンロード
2. そのファイルをsketchが管理するプラグインフォルダに配置
3. sketch再起動
です。
順を追って説明します。

完成の様子。これを目指します。
「Golden-Ratio-Line-Height-Sketch-Plugin」設定終了後の使っている様子(クリックしてみてください)

【解決】Sketchでline-heightが効かない!!変!「Golden-Ratio-Line-Height-Sketch-PluginをPluginをGitHub上からインストールして設定&使用方法」

【解決】Sketchでline-heightが効かない!!変!「Golden-Ratio-Line-Height-Sketch-PluginをPluginをGitHub上からインストールして設定&使用方法」

1. プラグインをダウンロード

「Golden-Ratio-Line-Height-Sketch-Plugin」に関わらず欲しいプラグインがGitHub上にあったら、
導入方法は2つあります。
GitHub上の画面から直接ダウンロード
もしくは
Sketchからpluginsページへいって(当然直接行っても良い)ダウンロード
です。

GitHubの場合(何かのプラグインを導入しようとして開発ページに飛ばされた場合)

GitHub上のダウンロード押下

GitHub上のダウンロード押下

これでダウンロードできます。 -> 2の「 該当ファイルをsketchが管理するプラグインフォルダに配置」お進みください

Sketchからpluginsページでの場合

Plugin(メニュー) -> Plugins(タブメニュー) -> Get Plugins

sketchで便利なpluginの導入方法

sketchで便利なpluginの導入方法

Sketchからpluginsページに飛ばされる

sketchのpluginsから検索

sketchのpluginsから検索

https://www.sketch.com/extensions/plugins/
ここから検索
今回の場合 「line-height」で検索すると出てきます

https://github.com/lorenzwoehr/Golden-Ratio-Line-Height-Sketch-Plugin

これがダウンロードされます。
これは先のGitHubでダウンロードするのと同じことです。

2. 該当ファイルをsketchが管理するプラグインフォルダに配置

ダウンロードしたファイルをPluginsのフォルダに手動で直接置く、もしくはSketchから参照するようにします。

Plugins -> Plugins -> 設定アイコン -> Reveal Plugins Folder

Plugins -> Manages Pluginの画面

Plugins -> Manages Pluginの画面

プラグインファイルを入れるべきフォルダが開かれるので、ダウンロードしたファイルをそこに置く

22

 

3. sketch再起動

Sketchを再起動 -> Plugins 「Set Line Height」として使えるようになっている 「cmd + L」

スクリーンショット 2019-06-01 10.25.09

 

使っている様子。テキストオブジェクトを選択して、Cmd + L。そこに値を入れる。もしCmd + Lが効かなかったらキーバインドが他のショートカットキーとバッティングしている可能性あり。

【解決】Sketchでline-heightが効かない!!変!「Golden-Ratio-Line-Height-Sketch-PluginをPluginをGitHub上からインストールして設定&使用方法」

【解決】Sketchでline-heightが効かない!!変!「Golden-Ratio-Line-Height-Sketch-PluginをPluginをGitHub上からインストールして設定&使用方法」

このように完成しました
素敵なline-height生活を!
ありがとうございました。

※この2つちょっといじってみたい
Sketchでレスポンシブルサイトを作る
Sketch上でアニメーションがデザインできるプラグイン「Timeline for Sketch」


SNS
インド旅 instagram
適当な日常写真 instagram
シュールさーん instagram
シュールさーん LINEスタンプ
もりたけんじTwitter
ネタ帳Twitter
note

FaceBook -kennji.morita-
※わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
もしご興味ある方はチャットから自己紹介を兼ねてご連絡ください。
※業務連絡やお久しぶり連絡はチャットからお願いします

(Visited 1 times, 1 visits today)