Figmaで作成する画像の解像度。 Fifmaからエクスポートしたデザインデータは72ppiになる。 Fifmaは元々Web向け。 FifmaはWebデザイン、Webアプリに適したツールなので、書き出したデザインの解像度はデフォルトで72ppiとなる。 IllustratorやPhotoshopのように、解像度の設定や変更をすることもできない。 印刷物には一工...
Memos
Figmaのクイックアクションバー。開き方と使い方とショートカット。
Figmaのクイックアクションバーの開き方。 覚えると便利なクイックアクションバー。 開き方。 「メインメニュー(Main menu)」 > 「クイックアクション...(Quick actions...)」と進む。 または、下記のショートカットから開く。 Figmaのクイックアクションバーの使い方。 クイックアクションバーで検索。 ...
Figmaでアウトライン化、フラット化をする方法と注意点。
Figmaのアウトラインはすごく簡単。 DTPではほぼ必須。 DTPデザインを行なった場合、基本的にテキストを「アウトライン化」して、入稿することが必要となる。 またDTPに限らず、テキスト(ブランド名やキャッチコピーの文字列など)から、パスを使ってロゴや見出しなどをデザインするときも同様。 IllustratorやPhotoshopの場合でも、それ以外のソフトでも...
Figmaでラスタライズをする方法と注意点。
解像度とラスタライズと。 解像度の設定。 Figmaの場合。 Figmaは元々Web用のデザインツールのためか、現時点(2024年03月)では「解像度」の設定がない。 Illustratorの場合。 Illustratorでは、テキストや画像にぼかしやシャドウ、透明効果などを使用した場合、印刷用入稿データにする際に「ラス...
Figmaのツールバーやサイドバーが消えてしまったときの対応。
Figmaのツールバーやサイドバーが消えた!? 無意識にうちにどこかを触っている。 サイドバーがない? Figmaを使ってデザインなどを行なっているとき、意図せずに上部のツールバーや左右のサイドバーが無くなっていることがある。 FigmaとPhotoshopとIllustratorの違い。 Figmaはフォトショとイラレと共通点が多いが...
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サイトのひとつ。 デジタル庁のデザインシステム。 まとめられた、デザインデータ。 Webサイトやアプリのためのデザインシステムも公開されている。 スラ...
FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
TinyImage Compressorプラグインとは? 圧縮だけでなく、印刷用やWeb用などにも。 TinyImage Compressor TinyImage Compressorは、Figmaからエクスポートするファイルを軽量化してくれるプラグイン。 Figmaでは現時点サポートされていないCMYKに変換したり、画像形式をWebPなどに変換してくれる。 ...
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のルーラー(定規)の出し方。 Figmaのルーラー。 ルーラー(定規)。 Figmaでデザインをしているときにルーラー(定規)を出そうと「command + R」 or 「Ctrl + R」を押しても出てこない。 あれ!?と思い、じゃあ、と右クリックで出そうとしてもメニューにもない。 IllustratorやPhotoshopで慣れて...
Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
Figmaのペンツールとマスクで、背景から切り抜く。 ペンツール。 IllustratorやPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。 AIの普及などにより被写体の切り抜き精度が上がっている。ただ、それでもうまく切り抜けない時は、結局人の手によるペンツールの方が速かったりする。 また、ペンツールはロゴやアイコン、図形やイラストな...
Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
Figmaで名刺を作成、印刷してみたところ、無事に完成。 Figmaで名刺? デザインツール「Figma」で、紙媒体の名刺を作って実際に発注し、仕上がりを確認してみた。 印刷用に工夫。 Figmaは元々デジタルデバイス向けなので、単位がpxオンリー、カラーモードはRGB、印刷物向けのデータ形式はPDFのみ、などと制限がある。 が、工夫すれば...
Figmaを日本語化。言語切り替えの使い方。再起動も不要。
Figmaを日本語に切り替える方法。MacもWinも使い方は同じ。 Figmaの日本語対応。 2022年のFigmaの日本法人設立により、Figmaはデフォルトで英語⇄日本語の言語切り替えが可能となっている。 特に再起動の必要もなく、早ければ数秒〜数十秒ほどで言語の切り替えができる。 インストール版でもブラウザ版でも同じ手順で行える。 ...