Sketchのテキスト編集周りの基本操作

今回はSketchのテキスト関連の操作についてまとめておきます。
テキスト追加の基本
まずはツールバーから選択するか、Tを押して、テキストツールに切り替えます。
あとはテキストを追加したい位置をクリックすると、黒い線が表示されるので、キーボードで文字を打ち込みます。
escかcommand + enterで入力完了です。

テキストオブジェクトとなるので、入力後は移動ツールで移動させられます。
修正したい場合は、移動ツールの状態でテキストオブジェクトをダブルクリックするか、テキストツールでクリックすれば編集状態に切り替わります。
ポイントテキストとテキストボックス
テキストツールの状態でクリックすると「ポイントテキスト」と呼ばれる状態になりますが、ドラッグアンドドロップすると「テキストボックス」を作成できます。

ポイントテキストと違い、テキストボックスの場合は右端で自動的にテキストが折り返します。
複数行の文を流し込む場合はテキストボックスを使用しましょう。
テキスト選択時のプロパティエリア
テキストを選択しているときに、画面右のプロパティエリアの表示項目もテキスト用に切り替わります。
TEXT
[TEXT]プロパティでテキストの基本的な設定をします。
![[TEXT]パネル](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_3-3.png)
| 内容 | 備考 | |
|---|---|---|
| フォント | フォント名を指定する | |
| 太さ | フォントの太さを指定する | |
| 色 | 文字色を指定する | |
| Size | フォントサイズの指定 | |
| Character | 行間の指定 | |
| Line | 1文字1文字の間隔を指定 | |
| Paragraph | 改行だけの行の間隔を指定 | |
| 横幅や高さの設定 | 下記の中から横幅や高さの設定を指定する
| このボタンでポイントテキストとテキストボックスの切り替えも可能 |
| 文字揃え(横) | 下記の中から文字揃えの設定を指定する
| |
| 文字揃え(縦) | 下記の中から文字揃えの設定を指定する
|
Text Options
[TEXT]プロパティの右上にある「歯車」アイコンをクリックすると、[Text Options]が[TEXT]の下に表示されます。
![[Text Options]の表示](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_4-2.png)
| 内容 | |
|---|---|
| Decoration | 下記から装飾を選択する
|
| Transform | 大文字・小文字の扱いを選択する
|
その他の操作
テキストのアウトライン化
テキストをアウトライン化したい場合は、右クリックして[Convert to Outlines]を選択するか、メニューバーの[Layer]→[Convert to Outlines(option + command + O)]でアウトライン化できます。


Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで
Figmaで要素のサイズを図って追加するするプラグイン「Redlines」
Figmaで使っている色やフォントなどを一括変更する「Batch Styler」
Figmaで画像からカラーパレットを生成するプラグイン「Image Palette」
Figmaでカラーやテキストのスタイルをまとめて登録するプラグイン「Styler」
Figmaの画像書き出し方法
Figmaのサイズの大きい画像を縮小せずにインポートするプラグイン「Insert Big Image」
Figmaでロゴやアイコンなどのビットマップ画像をベクターデータにトレースするプラグイン「Image tracer」
Figmaでサクッとワイヤーフレームが作れる素材検索プラグイン「Wireframe」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Local by Flywheelの「Starting Local Machine…」画面から進まないときに試すこと
文章を書くことだけに集中できる、高機能でシンプルなデザインのテキストエディタ「Ulysses」
Client Folder Makerをショートカットキーからすぐ実行できるようにする
macOSの環境をすぐに復元したり、別Macと同期するために必要な情報をまとめた「アプリ設定フォルダ」を作る
コーダー目線で理解するIllustratorのアピアランス機能
テキストエディタ.app起動時に表示されるダイアログボックスを非表示にする方法
CSS疑似要素の「:empty」でタグの中身が空のときのスタイルを設定する
Keynoteのプリセットカラーを好みの色にカスタマイズする方法
Google日本語入力のサジェスト(変換候補)の選択方法
新しいMacBook Proを購入して移行するときにやること|ユーティリティ系アプリの設定編