まずは、スマートフォン用のフレームを1つ作成し、左右にガイド線（16px など）を引いておきます。
このフレーム内で、図形やテキストを正しい位置に配置する“整列”の練習をしてみましょう。
Contents
長方形を描いて整列の練習
- 長方形ツール（R）を選択
- 幅や高さを任意に指定して配置
- 色（塗り）をつけてもOK
この長方形を使って、整列の方法を一度確認します。
整列の基本（単独で選択した場合）
図形をひとつだけ選択すると、プロパティパネルに「整列アイコン」が表示されます。
- 水平方向（左右の位置）
- 左揃え
- 中央揃え
- 右揃え
- 垂直方向（上下の位置）
- 上揃え
- 中央揃え
- 下揃え
このときの整列は、フレームを基準とした位置合わせになります。→ つまり “スマホ画面のど真ん中に置く” といった操作ができます。
図形をコピーして、複数要素の整列
Alt(option)キーを使って２つ複製し、横に並べます。Shiftキーを押してクリックすると複数選択した状態になります。選択した複数の図形の中で上揃え・中央揃え・下揃えになります。
均等配置・垂直方向に等間隔に分布・水平方向に等間隔に分布
テキストツールの基本操作
長方形の上にタイトルとなるテキストを入力してみます。
- テキストツールクリック
- 任意の文字を入力（ここではタイトルを入力）
- 右側のパネル タイポグラフィのところで調整
- フォントサイズ 12px → 32px
- フォント Googleフォントから Noto Sans CJK JP
- 文字の塗りは任意 初期設定は黒（#000000)
複数行のテキスト
１行単位も文字を入力する時は、テキストツールを挿入したい場所でクリックしますが、複数行の場合は、折り返し幅や高さまでの長方形をテキストツールで描きます。描いた後に文字が高さより溢れてしまった場合は、レイアウト＞高さの自動調整を行います。
書体について
Figmaではすべてのフォントの他に、人気のフォントや、このファイル内のフォントなど便利な選択が可能です。フォントは選択しなければ、欧文専用の「Roboto」になりますので、日本語のテキストの場合は日本語フォントを選択しましょう。
