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」


「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

株式会社TerraceTechについて
最近起業しました。
株式会社TerraceTech

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

FaceBook -kennji.morita-

わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。

※業務連絡やお久しぶり連絡もチャットからお願いします。