Google StitchとFigmaの使い方。 Stitch to Figma（スティッチからフィグマへ） StitchはGoogleアカウントで使える。 Stitchは現在無料で使用可能。 Googleアカウントでログインすれば、すぐに作成できる。 StitchとFigmaのURL。 Stitch：https://stitch.withgoogl...

Figmaでスケッチからベクターへ。 Figmでのベクター化。 ラスターからベクターへ変換可能に。 いよいよFigmaでも、スケッチからベクターへ変換できるように。 紙へ描いたスケッチやラフの写真（ラスターデータ）画像を、Figmaのデフォルト機能でベクターデータにできる。 Photo by A S Figmaでベクター化をする手順。 ...

Figmaにフォントが反映されない。 ヒラギノや游明朝がFigmaから消えた。 日本語フォントが消えている！？ なにかの拍子にFigmaからヒラギノが消えていた。フォントのパネルから検索しても出てこない。 ヒラギノだけでなく、游書体など、他の日本語フォントも消えていた。 英語フォントも消えている！？ 一部の英語フォントも消えていた。 おそらく自分で...

Figmaへガラスエフェクトが追加。 Figmaのガラスエフェクト。 ガラスエフェクトは現在ベータ版。 ガラスエフェクトはベータ版だが、無料ユーザー含め、現時点ではFigmaの全ユーザーが使用できる。 ガラスエフェクトが見つからない、ならないとき。 ガラスエフェクトは、フレームへの適用となる。 長方形ツールなどで作成した図形には適用できないので、...

Figmaの文字を斜めに変形する「Skew」。 Skewプラグインで斜めに変形。 Figmaの文字を斜めにする。 Figmaでデザインをしているとき、文字を斜めにしたいときがある。 そんなときに便利なのが、Skewプラグイン。 テキストをアウトライン化しなくても、斜めの状態で文字編集ができる。 斜めの指定方法。 Skewプラグインを使用した...

Figmaのプラグイン「Liquid Glass」。 Appleの新デザイン、Liquid Glass風エフェクト機能。 Liquid Glass風エフェクト。 Appleデバイスの新しいUIデザインとなる「Liquid Glass」。 Windows Vistaの再来となるか、新しいトレンドとなるかが試される。 Figmeのリキッドグラス用プラグイン。 ...

FigmaのWebデザイン用画面が見つからない？ FigmaのUI/UXデザインが変更。 Figma Sitesの登場。 Figma Config 2025の開催後、FigmaのUI/UXがアップデートされており、機能がもりもりになっている。 デザイン用の画面も、AIとノーコードツールの流れによって、機能やインターフェイスが変わっている。 Webサイトデザイン...

Figmaの縦書きプラグイン「Vertja」とは？ Figmaで文字を縦書きにしたいとき。 縦書き用のプラグイン。 Figmaは日本語対応はしているが、縦書きへの対応は現時点ではされていない。 デザイン上、縦書きにしたい箇所も出てくるので、プラグインがあると助かる。 Vertjaで縦書きができる。 Figmaの縦書きには、Vertical（バーティカル）...

FigmaのAI機能、「背景を削除」。 プラグイン不要。Figmaだけで背景削除。 「ツールバー」>「アクション」>「背景を削除」。 FigmaのAI機能を使った背景削除ができるようになっている。 手順は簡単で、選択ツールで画像を選択し、下部にあるツールバーから、アクションへ進み、背景を削除を選ぶだけ。 今回はFigmaが生成した画像を使用。 ツール...

Figmaのエクスポートによる書き出しは4種類の画像形式。 PNGのメリット。 どうしてPNGなのか？ Figmaのエクスポート（画像書き出し）は、デフォルトではPNGとなっている。 PNGはUI/UXデザインを行うときに便利で、アイコンやボタン、ロゴなどを書き出しやすい。 イラストやトリミングされた画像も、PNGが向いている。 PNGは透過が可能。 ...

Figmaでのマスクのかけ方。 FigmaのマスクはIllustratorやPhotoshopと少し違う。 イラレと違い、フォトショとも違う。 Figmaのマスクのかけ方は、Illustratorのクリッピングマスクと違い、Photoshopのクリッピングマスクともちょっと違う。 オブジェクトと重ね順。 FigmaやIllustrator、Photoshopで...

Figma Slidesとは？ Figma Slides。スライドがテンプレートから作れる。 Figma Slidesの使い方について。 Figma Slidesは現在ベータ版として用意されており、アカウントがあれば2025年初頭まで無料で使用が可能。 使い方はシンプルで直感的。 使い方は簡単で、テンプレートなのですぐに慣れる。 スライド画面のサイズはモ...

UI3というFigmaのインターフェイス。 FigmaのUI3ベータ版に。 FigmaのUI3ウェイティングリストから。 ウェイティングリストに登録していたFigmaのUI3が、ベータ版として使用可能となっている。 （※スクショはダークモード時のもの。） UI3と従来のUIの違い。 ツールバーが上部から下部へ移動。 大きな変化としては、以前...

FigmaでデザインされたWebサイト。 Figmaでデザインされたサイトの判断。 このサイトはFigmaでデザインしている？ 現代ではさまざまなデザインツールが普及している。 そのため、Webサイトの見た目だけで、使用しているデザインツールを特定するのは難しい。 またFigmaには、WordPressやWix、STUDIO、Canvaなどのような、Webサイ...

Figmaで日本語フォントが無料で。おすすめな33選。 無料で商用利用も可能な日本語フォント。 日本語フォントのまとめ。 Figmaで使える無料の日本語フォントがまとめられている。 50種類あり、商用利用も可。 （※細かな利用条件は各フォントの公式サイトでチェック。） 参照：無料で商用利用も可！日本語フォント集 50選 / 50+ Fre...

Figmaのエフェクト機能でぼかし。 Figmaには4種類のエフェクトがある。 Figmaにデフォルトで備わっているエフェクトは下記の4種類。 インナーシャドウ ドロップシャドウ レイヤーブラー 背景のぼかし （※「ブラー（Blur）」は日本語で「ぼかし」の意味。） この中の、「レイヤーブラー」と「背景のぼかし」で、写真にぼかしをかけることができる。...

カラーパレットと色相環。 色相環ベースのカラーパレット。 Color Wheel デザイナーは色彩を適切に選択し、調和のあるカラーパレットを作成することが求められる。 そんなときに便利なのが、Web上で色相環を基にカラーパレットを作れるジェネレーター。 参照：https://www.figma.com/ja-jp/color-wheel Color ...

RGBとCMYK。色の仕組み。 RGBとCMYKのカラーモード。 RGBとは？ CMYKとは？ .cyan { color: #00A1E8; } .magenta { color: #E5007F; } .yellow { color: #FFF101; } .black { color: #000　; } .red { colo...

Figmaで作成する画像の解像度。 Fifmaからエクスポートしたデザインデータは72ppiになる。 Fifmaは元々Web向け。 FifmaはWebデザイン、Webアプリに適したツールなので、書き出したデザインの解像度はデフォルトで72ppiとなる。 IllustratorやPhotoshopのように、解像度の設定や変更をすることもできない。 印刷物には一工...

Figmaのクイックアクションバーの開き方。 覚えると便利なクイックアクションバー。 開き方。 「メインメニュー（Main menu）」 > 「クイックアクション...（Quick actions...）」と進む。 または、下記のショートカットから開く。 Figmaのクイックアクションバーの使い方。 クイックアクションバーで検索。 ...

Figmaのアウトラインはすごく簡単。 アウトライン化はDTPではほぼ必須。 DTPデザインを行なった場合、基本的にテキストを「アウトライン化」して、入稿することが必要となる。 またDTPに限らず、テキスト（ブランド名やキャッチコピーの文字列など）から、パスを使ってロゴや見出しなどをデザインするときも同様。 アウトラインはイラレやフォトショでも。 Illust...

解像度とラスタライズと。 解像度の設定。 Figmaの場合。 Figmaは元々Web用のデザインツールのためか、現時点では「解像度」の設定がない。 Illustratorの場合。 Illustratorでは、テキストや画像にぼかしやシャドウ、透明効果などを使用した場合、印刷用入稿データにする際に「ラスタライズ」を行う。 ...

Figmaのツールバーやサイドバーが消えた！？ 無意識にうちにどこかを触っている。 サイドバーがない？ Figmaを使ってデザインなどを行なっているとき、意図せずに下部のツールバーや左右のサイドバーが無くなっていることがある。 FigmaとPhotoshopとIllustratorの違い。 Figmaはフォトショとイラレと共通点が多いが...

Remove BGのアカウント作成手順。 Remove BGのサイトから。 アカウントはRemove BGのサイトの右上の「Sign up（サインアップ）」から無料で作成可能。 アカウントを作成。 「Sign up（サインアップ）」をクリックすると、アカウント作成の画面に切り替わる。 日本語翻訳。 日本語化されていないページがある...

Figmaのカーニングは「alt + >」と「alt + <」で。 Figmaのカーニング、文字詰めの方法。 カーニングで、詰めたいときと広げたいとき。 Figmaは基本的にデジタルデバイス向けのツール。でも、カーニングができる。 イラレやフォトショと同じく、ショートカットの「alt + >」と「alt + 」は大なり、「」で調整。 文字と文字の間隔を...

フリーランスHub。 Figma作った名刺が。 フリーランスHubへ。 Figmaで名刺を作ってみた結果を公開していたところ、一例としてフリーランスHubさまで掲載していただけることに。 名刺制作の参考として。 CHIBA DESIGN（チバデザイン）さまによる名刺デザインのコツや、株式会社山櫻さまによる二次元コードのメリットについての記事などと一緒に、ふらっ...

Figma上にある、デジタル庁によるデザインシステム。 デザイン庁のサイト。 とにかくシンプル。 デジタル庁のサイトはシンプルでまとまりが良く、ページの表示速度も速い。 色々とお手本となるWebサイトのひとつ。 デジタル庁のデザインシステム。 まとめられた、デザインデータ。 Webサイトやアプリのためのデザインシステムも公開されている。 スラ...

TinyImage Compressorプラグインとは？ 圧縮だけでなく、印刷用やWeb用などにも。 TinyImage Compressor TinyImage Compressorは、Figmaからエクスポートするファイルを軽量化してくれるプラグイン。 CMYKや、WebPへの変換も。 Figmaでは現時点サポートされていないCMYKに変換したり、画像形式...

GeniusをAI仲間に、Figmaでデザインを。 AIの勢いが止まらない。 デザインツール「Figma」にも、AIのデザイン・コンパニオンがやってくる。 開発元のDiagram社のサイト上で公開されている動画によると、「Companion（コンパニオン）」という名の通り、付き添う仲間や友、連れ、という役割をしてくれる様子。 ざっくりとデザインを考えているときなどに...

Figmaのプラグイン「Olive Press」とは？ FigmaからWebPで書き出せる。 Olive Press 画像ファイルをWebPの形式で使うことが増えている。 現時点、FigmaやIllustratorなどのソフトはデフォルトでWebPは書き出せないが、画像形式を変換できるWebサイトはネット上に多々ある。 また、Figmaのプラグ...

Figmaへのプラグインの入れ方の手順。 プラグインの入れ方と保存。 便利なFigmaのプラグイン。 Figmaのツールバーから、「アクション / Actions」へ進む。 画面下部のツールバーの、「アクション / Actions」メニューをクリック。 （※バージョンアップなどで画面のデザインが変わっていることがあります。） ...

Pixso。Figmaがもし有料化されたら。 無料プランでも使えるFigma。 Adobe社からの買収と撤回により、いつかFigmaも有料化されるのでは？と内心不安を抱えている人たちは、結構いるのではないだろうか。 例えば、 初心者の方や学習中の方たちが、ちょっと使ってみたいな、というとき。 職場ではAdobeのプランがあるけど、自宅にないと不便だな、というと...

Figma使用中に削除してしまったファイルを復元したい。 Figmaで作業中に。 Figmaで削除してしまったファイル。 Figmaで作業中に、誤ってファイルを削除してしまうときがある。 ゴミ箱を探しても、残念ながらFigmaにはゴミ箱はない。 焦ってしまうが、ゴミ箱的な場所は存在し、そこから復元することは可能。 Figmaの削除...

GooleのアイコンフォントをFigmaへ。Material Symbols。 Material Symbols 手軽に使えるアイコンフォント。pets Google FontsのMaterial Symbols。 Google Fontsから手軽に使えるアイコンフォント「Material Symbols」が、デザインツール「Figma」のプラグイン...

Figmaのルーラー（定規）の出し方。 ルーラー（定規）の表示方法。 Figmaでルーラーを表示させたい。 Figmaでデザインをしているときにルーラー（定規）を出そうと「command + R」 or 「Ctrl + R」を押しても出てこない。 あれ！？と思い、じゃあ、と右クリックで出そうとしてもメニューにもない。 IllustratorやPhotoshop...

Figmaのペンツールとマスクで、背景から切り抜く。 ペンツールで切り抜き。 覚えると便利なペンツール。 IllustratorやPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。 AIの普及などにより被写体の切り抜き精度が上がっている。ただ、それでもうまく切り抜けない時は、結局人の手によるペンツールの方が速かったりする。 また、...

Figmaで名刺を作成、印刷してみたところ、無事に完成。 FigmaでDTP。 Figmaで名刺？ デザインツール「Figma」で、紙媒体の名刺を作って実際に発注し、仕上がりを確認してみた。 Figmaを印刷用に工夫。 単位やカラーモード、ファイル形式などを印刷用に。 Figmaは元々デジタルデバイス向けなので、単位がpxオンリー、カラー...

Figmaを日本語化。設定方法はMacもWindowsも同じ。 Figmaが日本語対応。より使いやすく。 言語変更で日本語のUI（ユーザーインターフェイス）に。 2022年にFigmaの日本法人が設立されてから、Figmaはデフォルトで英語⇄日本語の言語変更が可能となっている。 参考：Figma日本語対応のお知らせ Figmaの言語変更はシンプ...

Figmaで検索・置換が可能に。 Figmaのアップデートで検索と置換の機能が実装されていた。 ショートカットで検索、置換ができるので、なかなか使い勝手が良い。 使い方は簡単で、以下のショートカットですぐに覚えられる。 ショートカット Mac：「Command」 + 「F」 Win：「Ctrl」 + 「F」 ※「F」は「Find...

Figmaのモザイクプラグイン「Pixels」とは？ Pixelsで画像にモザイクを。 写真や文字にモザイクをかけたいとき。 ネット上などに写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、こういうときはプラグイン。 Pixelsでモザイクをかけられる。 プラグインを探し...