ラスタライズと解像度。 Figmaは元々Web用のデザインツールのためか、現時点（2023年11月）では「解像度」の設定がない。 「ラスタライズ」は下記の手順でできるが、解像度はおそらく「72ppi」となると思われる。 Illustratorでは、テキストや画像にぼかしやシャドウ、透明効果などを使用した場合、印刷用入稿データにする際に「ラスタライズ」を行う...
Figmaでラスタライズをする方法と注意点。
Memos
Figmaのツールバーやサイドバーが消えてしまったときの対応。
Figmaのツールバーやサイドバーが消えた！？ UIの表示/非表示の切り替え。 Figmaを使ってデザインなどを行なっているとき、意図せずに上部のツールバーや左右のサイドバーが無くなっていることがある。 一瞬焦るが、そんなときは、「UIの表示/非表示」パネルから元に戻すことができる。 （※UIは「User Interface / ユーザーイン...
Remove BGのアカウント作成と、Figma用APIキーの作成方法。
Remove BGのアカウント作成手順。 Remove BGのサイトから。 アカウントはRemove BGのサイトの右上の「Sign up（サインアップ）」から無料で作成可能。 アカウントを作成。 「Sign up（サインアップ）」をクリックすると、アカウント作成の画面に切り替わる。 日本語翻訳。 日本語化されていないページがある...
Figmaのカーニング、文字詰めのショートカットの使い方。
Figmaのカーニングは「alt + >」と「alt + <」で。 Figmaは基本的にWebデザイン向けのツールだが、カーニングができる。 イラレやフォトショと同じく、「alt + >」と「alt + 」は大なり、「」で調整。 文字と文字の間隔を詰めたい場合は「alt + 」 or 「alt + （大なり）」や「」は「.（ピリオド） / る」、「...
フリーランスHubへ掲載。Figmaで名刺を作ってみたら。
フリーランスHubへ。 Figmaで名刺を作ってみた結果を公開していたところ、一例としてフリーランスHubさまで掲載していただけることに。 今回の掲載先。 CHIBA DESIGN（チバデザイン）さまによる名刺デザインのコツや、株式会社山櫻さまによるQRコードのメリットについての記事が紹介されています。 ひと工夫で魅力的なデザインに！名刺づくりの参考にしたい記事まと...
Figmaでのスライドの作り方と、デジタル庁のデザインシステム。
Figma上にある、デジタル庁によるデザインシステム。 デザイン庁のサイト。 デジタル庁のサイトはシンプルでまとまりが良く、お手本となるWebサイトのひとつ。 サイト制作におけるビジョンや過程がスライド形式でアップされているため、プレゼン用などFigmaを使ったスライド作りの参考にもなる。 デジタル庁のデザインシステム。 Webサイトやアプリのためのデザインシ...
FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
TinyImage Compressorプラグインとは？ 圧縮だけでなく、印刷用やWeb用などにも。 TinyImage Compressorは、Figmaからエクスポートするファイルを軽量化してくれるプラグイン。 Figmaでは現時点サポートされていないCMYKに変換したり、画像形式をWebPなどに変換してくれる。 印刷用にしたい場合はCMYKでPDFのエクスポー...
FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。
GeniusをAI仲間に、Figmaでデザインを。 AIの勢いが止まらない。 デザインツール「Figma」にも、AIのデザイン・コンパニオンがやってくる。 開発元のDiagram社のサイト上で公開されている動画によると、「Companion（コンパニオン）」という名の通り、付き添う仲間や友、連れ、という役割をしてくれる様子。 ざっくりとデザインを考えているときなどに...
FigmaからWebPで書き出しす方法。Olive Pressの使い方
Figmaのプラグイン「Olive Press」とは？ WebPで書き出すことが増えている。個人的にはWeb用の画像のほとんどは.webp形式を使用している。 現時点、FigmaやIllustratorなどのソフトはデフォルトでWebPは書き出せないが、画像形式を変換できるWebサイトはネット上に多々ある。 また、Figmaのプラグイン「Olive Press」は、Fig...
Figma プラグインを削除する方法。追加も削除もシンプルに。
Figmaへ追加したプラグインを削除したいとき。 Figmaはプラグインのインストールが簡単なので、ついつい色々なものを追加してしまう。 そうしているうちに、数日後、数ヶ月後には、あれ？と、何のためのプラグインだったかがわからなくなってしまったり、増えすぎて探しづらくなってきたりする。 Figmaからプラグインを削除する手順。 プラグインの追...
Figmaがもし有料化されたら。Next Figmaのデザインツール。Pixso。
Pixso。Figmaがもし有料化されたら。 無料プランでも十分に使えるFigma。 Adobe社に買収されてから、いつかFigmaも有料化されるのでは？と内心不安を抱えている人たちは、結構いるのではないだろうか。 例えば、 初心者の方や学習中の方たちが、ちょっと使ってみたいな、というとき。 職場ではAdobeのプランがあるけど、自宅にないと不便だな、というと...
Figma 削除したファイルを復元したいとき。復元の方法。
Figma使用中に削除してしまったファイルを復元したい。 Figmaで作業中に、誤ってファイルを削除してしまうときがある。 ゴミ箱を探しても、残念ながらFigmaにはゴミ箱はない。 焦ってしまうが、ゴミ箱的な場所は存在し、そこから復元することは可能だ。 Figmaの削除ファイルを復元する手順。 「Drafts / 下書き」をクリ...
Material SymbolsをFigmaへ。インストールしてすぐに使える。
GooleのアイコンフォントをFigmaへ。Material Symbols。 Google Fontsから手軽に使えるアイコンフォント「Material Symbols」が、デザインツール「Figma」のプラグインとして配布されている。 Googleの案内では現時点、2,500以上のアイコンが使えるらしい。 かつ「Outlined（輪郭）」、「Rounded（角丸）」、「S...
Figmaのルーラー（定規）の出し方。表示方法がイラレとちょっと違う！
Figmaのルーラー（定規）は「shift + R」で。 Figmaのルーラー。 Figmaでデザインをしているときにルーラー（定規）を出そうと「command + R」 or 「Ctrl + R」を押しても出てこない。 あれ！？と思い、じゃあ、と右クリックで出そうとしてもメニューにもない。 IllustratorやPhotoshopで慣れているとつ...
Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
Figmaのペンツールとマスクで、背景から切り抜く。 IllustratorやPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。 AIの普及などにより被写体の切り抜き精度が上がっている。が、それでもうまく切り抜けない時は、結局人の手によるペンツールに頼ることになる。 また、ペンツールはロゴやアイコンなど、図形やイラストを描くときに重宝する。い...
Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
Figmaで名刺を作成、印刷してみたところ、無事に完成。 デザインツール「Figma」で、紙媒体の名刺を作って実際に発注し、仕上がりを確認してみた。 Figmaは元々デジタルデバイス向けなので、単位がpxオンリー、カラーモードはRGB、印刷物向けのデータ形式はPDFのみ、などと制限がある。が、工夫すれば問題なく入稿でき、実際の紙に印刷された名刺は特に問題なか...
Figmaを日本語化。言語切り替えの使い方。再起動も不要。
Figmaを日本語に切り替える方法。MacもWinも使い方は同じ。 2022年のFigmaの日本法人設立により、Figmaはデフォルトで英語⇄日本語の言語切り替えが可能となっている。 特に再起動の必要もなく、早ければ数秒〜数十秒ほどで言語の切り替えができる。 インストール版でもブラウザ版でも手順は同じ。 Figmaの画面右下のhelpマーク（...
Figmaで検索・置換する方法。ショートカットからでOK。
Figmaで検索・置換が可能に。 Figmaのアップデートで検索と置換の機能が実装されていた。 ショートカットで検索、置換ができるので、なかなか使い勝手が良い。 使い方は簡単で、以下のショートカットですぐに覚えられる。 ショートカット Mac：「Command」 + 「F」 Win：「Ctrl」 + 「F」 ※「F」は「Find...
Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
Figmaのモザイクプラグイン「Pixels」とは？ ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。 Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理...
Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
Print for Figma。Figmaの印刷物用プラグインとは？ Figmaで作るDTP。 Figmaはもともとデジタルデバイス向けのツールだが、工夫すればDTPやグラフィックデザインもできる。 無料で使え、初心者にも向いている。 FigmaはPhotoshopを意識して作られたデザインツールなので、カラーパレットやレイヤーなどの機能やインターフェイス、ペンツー...