Figmaでアウトライン化、フラット化をする方法と注意点。デザイナー、コーチ、ディレクター / 井川

.

Memo

です・ます調の文章でなくすみません。

当初の名残りです..pets

Figma(フィグマ)でアウトライン化する方法。

Figmaのアウトラインはすごく簡単。

DTPデザインを行なった場合、基本的にテキストを「アウトライン化」して、入稿することが必要となる。

またDTPに限らず、テキスト(ブランド名やキャッチコピーの文字列など)から、パスを使ってロゴや見出しなどをデザインするときも同様。

IllustratorやPhotoshopの場合でも、それ以外のソフトでも、必須的なもの。

Figmaでアウトライン化。Figmaのロゴ。

アウトライン化の方法。

アウトライン化の手順

いくつかの方法があるが、特に簡単な手順は以下の通り。

アウトライン化したいテキストオブジェクトを選択する。

アウトラインをかけたいテキストオブジェクトを、クリックで選択。

Figmaでアウトライン化の手順。

「右クリック」 > 「線のアウトライン化」を選択。

メニューの中から、「線のアウトライン化」をクリック。

Figmaでアウトライン化の手順。

アウトライン化される。

アウトライン化されると、ベクター形式のオブジェクトとなる。

この状態で保存すると、文字を変えることができなくなるなど、後からの修正が厳しくなるので、注意が必要。

Figmaでアウトライン化の手順。

ショートカット。

アウトライン化のショートカット

ショートカットに慣れている場合は、以下のショートカットでも同じことが可能。

  • Mac: 「command」 + 「shift」 + 「O」
  • Win: 「Ctrl」 + 「Shift」 + 「O」

フラット化(統合)の方法。

Figmaには「フラット化(統合)」という、同じような機能がある。

フラット化(統合)の手順

アウトライン化と同様いくつかの方法がある。特に簡単な手順は以下の通り。

フラット化(統合)したいテキストオブジェクトを選択する。

フラット化(統合)したいテキストオブジェクトを、クリックで選択。

Figmaでフラット化(統合)の手順。

「右クリック」 > 「統合」を選択。

Figmaでフラット化(統合)の手順。

フラット化(統合)される。

Figmaでフラット化(統合)の手順。

ショートカット。

フラット化(統合)のショートカット

アウトライン化のように、以下のショートカットでも同じことが可能。

  • Mac: 「command」 + 「E」
  • Win: 「Ctrl」 + 「E」

アウトライン化、フラット化の際の注意点。

ベクター化されたテキストは編集できない。

一度アウトライン化やフラット化をすると、ベクターオブジェクトになので、基本的に元に戻すことができない。

ショートカットで戻ることはできるが、戻りきれない場合や、一旦保存して再度ファイルを開いた場合は、元のように編集はできない。

「戻る」のショートカット
  • Win: 「command」 + 「Z」
  • Win: 「Ctrl」 + 「Z」

戻り過ぎた場合は、、、

「進む」のショートカット
  • Win: 「command」 + 「shift」 + 「Z」
  • Win: 「Ctrl」 + 「Shift」 + 「Z」
バージョン履歴が残っていれば。
バージョン履歴。

Figmaには、無料プランでは30日間まで、有料プランでは無制限の「バージョン履歴」がある。

Figmaのバージョン履歴についての画像。

ここに残っていれば、アウトライン化、フラット化の前の状態に戻すことは可能。

Figmaでアウトライン化、フラット化をする方法と注意点。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

Figma 関連メモ。

デザインツールFigmaのロゴ。
使い方 & プラグインなど。

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。