Figmaで作字してみた

2021年3月17日 20:35

Figmaで文字のアウトライン化を使わずに作字するのにも慣れてきたので、備忘録も兼ねて過程を書き残しておこうと思う。

1.文字を決める

まずは文字を決める。好きな言葉や本のタイトル、好きな曲、適当に作った言葉などなんでもいい。今回は某曲の「蓮の台を分つ」という歌詞から辿り着いた、運命を共にするという意味の「一蓮托生」にした。

Figmaで適当なフレーム(自分はいつもインスタのサイズ)を作ったら、文字の下書きをTextで打ち込む。レイヤーの透明度を下げておくと作業がしやすくなる。フォントはなんでもいいが、イメージに近いものだと作りやすい。

四字熟語系は正方形にしたいので、Letter Spacingを10%に設定し、line-heightをフォントサイズ + Letter Spacing(今回は330 + 33)にするといい感じになる。どうせ後から変わるのでこの辺はお好みで。

点は丸にする、四角の部分は五角形にする、などあらかじめパターンを決めておくと作りやすい。

例えばこの「栄枯盛衰」は文字のイメージから、「栄」と「盛」の点は星、「枯」と「衰」の点は丸で表すと決めて作ったものだ。

今回の「一蓮托生」は運命を共にすることから、繋がっているイメージが強いので、

Rectangleを使って思い切って繋げてみた。
右上がりなのは、まっすぐ引いてしまうと車の2つ目の横棒につながってしまうからである。

次にこの横棒に合わせて他の横線を引いていく。option + ドラッグでコピーして大体の長さや位置を下書きに合わせる。下書きが意味をなさない場合は、終点を他の図形に合わせたり、等間隔で配置したりするといい感じになる。

「托生」の方も横線をコピーしながら引いていく。

続いて同じように、縦線もRectangleで下書きに合わせて引くとこんな感じになる。だいたい完成である。

Figmaで用意してある図形を組み合わせるだけでもいいが、イメージに近いものがなかったら自分で作るのも一つの手だ。

今回は、「蓮」のしんにょう部分と「生」の一画目を逆三角形に、点を勾玉のような形にしてみようと思う。

これはPenで適当に描いてPaint bucketで塗り潰したものだが、それだけでもいい感じに見えるのではないだろうか。太さや位置はあとで微調整するのでとりあえず次に進む。

勾玉を作るにはまずEllipseで大きい正円を描き、中にその半分の大きさの円を2つ縦に並べた図形を作る。

↑こんな感じ

次に上の画像の赤い部分を消せば完成だ。

塗り潰して「蓮」に配置する。ほぼ完成だ。

ここから先は好みの話である。自分は可読性を大事にしているが故に作字自体には芸術性があまりないので、背景や色でポイントを稼いでいく。(可読性も芸術性も高い作字、ほんとすごい)

今回はPixabayから、蓮の花の写真を拝借した。

字の背景に写真を置き、文字色を白にした。完成である。

最後にバランスやコントラストの調整などを行った。これで真の完成だ。

案外楽しいしFigmaでできるので気が向いたら是非。

この記事が気に入ったらサポートをしてみませんか？