Figma 画像のトリミングについて調べてみた！
画像のトリミングについて（Figma） Figmaでは、画像をトリミングすることで不要な周辺部分を非表示にし、必要な範囲だけを表示することができます。このトリミング処理は、あとから再調整することも可能で、カットされた部分の画像データ自体は削除されることはありません。 一度トリミングした画像でも、後から編集して表示範囲を変更することができます。 Figmaで画像をトリミングする手順 Figmaでは、 […]
CATEGORY
Figma
Figma フォントの追加について調べてみた！
ここでは、Figmaのフォントの追加方法について説明していきます。 はじめに ✅ この機能を利用できるユーザー すべてのプランで利用可能 誰でもFigmaデザインにカスタムフォントを追加可能 📚 フォントの利用について Figmaでは、デフォルトでGoogle Fontsが組み込まれており、インストール不要でそのまま使用できます。しかし、Google Fonts以外の […]
Figma 日本語フォントについて調べてみた！〜Japanese Font Picker〜
Figmaで日本語フォントを快適に選べる神プラグイン「Japanese Font Picker」の使い方 「Figmaで日本語フォントを効率よく探したい…」そんな方におすすめ！本記事では、Figmaで日本語フォントの選定にお困りの方へ向けて、非常に便利なプラグイン「Japanese Font Picker」をご紹介します。 Japanese Font Pickerとは？ 「Japanese Fon […]
Figma 書き出し方法について調べてみた！
【初心者向け】Figmaから画像を書き出す方法 Figmaで作成したデザインを画像として書き出す目的は、大きく分けて次の2つに分類できます： ① デザイン確認・共有用に書き出す場合 等倍（1x）でフレーム全体を書き出せばOK チームメンバーやクライアントとの確認用には、.png や .jpg 形式が一般的 ② Webサイトやアプリで使用する場合 デバイス対応のため、複数のサイズ（1x、2xなど）で […]
Figmaを使って、文字を縦書きにする方法をまとめてみた！
Figmaで日本語テキストを縦書きにする方法 Figmaを使っていると、「日本語の縦書きテキストを使いたい」という場面が出てくることがあります。本記事では、Figmaでテキストを縦書きにする方法と、その際の注意点について解説します。 Figmaで縦書きテキストを作成する手順 テキストを選択し、プロパティから縦書きに変更 Figmaでは、テキストの方向を「縦書き」に設定することができます。 「Ver […]
Figma 画像挿入のやり方についてまとめてみた！
Figmaで画像を挿入する方法 Figmaで画像を挿入してみましょう。今回は、長方形シェイプと円シェイプに画像を配置し、Figmaでの画像操作の基本を学びます。 1. Figmaデザインに画像を挿入する基本方法 Figmaに画像を挿入するには、目的に応じて方法を使い分けることが大切です。大きく分けて以下の2パターンがあります。 A）画像を原寸サイズで挿入する 「とりあえず画像をキャンバスに置きたい […]
Figmaのアカウント登録/作成手順についてまとめてみた！
はじめに｜Figmaとは？ Figma（フィグマ）は、WebデザインやUI/UXデザインに特化したクラウドベースのデザインツールです。 UI（ユーザーインターフェース）：ユーザーの目に触れる「見た目」の部分 UX（ユーザーエクスペリエンス）：使いやすさや満足感など「体験」の部分 Figmaでは、以下のような用途で幅広く活用されています： Webサイトやアプリのワイヤーフレーム（設計図）の作成 ボタ […]
初心者必見！Figmaの使い方についてまとめてみた！
はじめに Web制作やWebデザインを進めるうえで、ワイヤーフレームを作成できると、クライアントとの方向性を事前にしっかりと共有できるため、その後の作業がスムーズに進みます。 今回は、そんなワイヤーフレーム制作におすすめのツール「Figma」の基本的な使い方をご紹介します！ ワイヤーフレームを作れるツール「Figma」とは？ **Figma（フィグマ）**は、ブラウザ上で使えるデザインツールです。 […]
Figma 日本語変換（言語設定）について調べてみた
Figmaでは、Webサイトやアプリ、マーケティング用のメールで使用する言語を変更できます。現在は英語と日本語に対応しています。その他の言語でFigmaを利用したい場合は、Google Chromeの翻訳機能を使って、さらに多くの言語に翻訳することも可能です。 言語設定の変更方法 Figmaでは、以下の3つの方法で使用言語を変更できます。 ① ファイルまたはファイルブラウザから変更す […]
Figma アイコンの入れ方についてまとめてみた！
はじめに UI/UXデザインにおいてアイコンは、視覚的な伝達力を高める重要な要素です。しかし、「Figmaでどうやってアイコンを追加するの？」「商用利用は大丈夫？」といった疑問を持つ方も少なくありません。 本記事では、Figmaで商用利用可能なアイコンを追加する方法と、利用する際のポイントについてわかりやすく解説します。 Figmaでアイコンを使用するメリット ■ ベクター形式で自由に編集可能 F […]