記事一覧
Figmaの操作についてnoteに投稿してみて
Figmaについては、自分の勉強も兼ねてこれから始める方と始めたばかりの方へ日本語での説明も多くはないので、Figmaの使い方を4月からnoteに投稿しはじめ半年間続けました。この半年間書いた記事のまとめとして今回投稿します。
Figmaについては半年前は初心者であまり知識もなく始める時に半年間書き続けると決め、そんなに書くことがあるかな？と思ってましたが機能は多いのでこれだけ書いても機能を網羅
Figma Webページデザインの作成その6 モバイル版の作成
前回はPC版のトップページを作成しましたので、今回はこのPCページのモバイル版を作成します。PC版がありますので、基本的にPC版から素材はコピーしてモバイル版に設置できそうです。
Frameの作成
まずはモバイル版のFrameを作成しますショートカット「A」を押すと右サイドメニューのプロパティパネルに「Phone」と表示されます。モバイルのテンプレートが多数用意されていますので、制作物にあっ
Figma Webページデザインの作成その5 Map画像の設置とフッターの作成
前回は「news」の 部分まで作成して徐々に形になってきましたので、今回は「company」部分を作成します。
Map画像の設置
「menue title」になる「company」の文字設定は前回テキストの設定を「Styles （スタイル）」として登録しておいたので、Stylesから選択します。
企業情報の社名や住所を入力します。右のサイドメニューのプロパティパネルで文字設定も行います。
Figma Webページデザインの作成その４ Styles （スタイル）とComponent（コンポーネント）
今回は「news」の 部分を作成したいと思います。前回のようにテキストはデフォルトでは「Roboto」になっているので変更したいと思います。
文字設定の登録
メニューのタイトルとなるテキストは何度か使用するので、その都度テキストの設定をしないで済むように、Figmaの基本操作 その8 Styles （スタイル）の登録でやったようにテキストの設定を「Styles （スタイル）」として登録してお
Figma Webページデザインの作成その3 Google Fontsを使用したテキストの使用と画像の配置
今回は「about us」の 部分を作成したいと思います。テキストはデフォルトでは「Roboto」になっているので変更したいと思います。
Google Fontsの使用
アルファベットで表記するメニューの項目はGoogle Fontを使用したいと思います。Google Fontsとは、Googleが提供するWebフォントのサービスで、オープンソースで提供されており、基本的に無料で使用できます
Figma Webページデザインの作成その2 ヘッダーとPluginsを使用した画像の設置
今回も仮の会社のWebページを作成したいと思います。まずはPC版の作成をしていきたいと思います。前回のFigma Webページデザインの作成その１ 作成準備で準備ができたので実際に作成していきたいと思います。
ヘッダーの作成まずはヘッダーを作成したいと思います。ヘッダーの長方形を設置します。
メニューから「Rectangle」かショートカット「R」で長方形を作成して、前回高さは100pxと設定し
Figma Webページデザインの作成その１ 作成準備
Figmaの基本操作を今までいくつか書いてきたことで基本操作をかなり知ることができました。今ままでの投稿を踏まえて実際に作業をしてみたいと思い、今回は仮の会社のWebページを作成したいと思います。まずはPC版の作成をして、その後SP版を作成したいと思っています。よろしくお願いします。
新規ファイルの作成
まずは新規ファイルの作成をします。New tabが作成しDesignを選択してください。
Figmaの基本操作 その12 「Grid」について
オブジェクトの配置や整列をより正確に行うために、「Canvas」上に「Pixel Grid」を表示することができます。方眼紙のようなマス目を表示させて、マス目を使用することで図形や線を書きやすくしてくれて大変便利です。また、グリッドの大きさを指定したり、グリッドにオブジェクトをスナップさせることができます。
Pixel Grid ピクセルグリッド
「Pixel Grid」を表示するには
トップメ
Figmaの基本操作 その11 「Auto Layout」で「Object」を並べる
Figmaには便利に自動でデザイン作成を助けて機能がいくつかありますが、今回「Auto Layout」という機能を紹介します。名前の通り自動でレイアウトしてくれる機能になり、X軸やY軸に沿って「Object」を並べて調整してくれます。
Auto Layoutの追加
どんな風に調整してくれるか「Object」を並べてやってみます、まずは「Object」を３つ作成し並べてみました。
３つ全てを選択
Figmaの基本操作 その10 Constraints（制約）について
「Object」を選択すると右のサイドメニューのプロパティパネルに「Constraints（制約）」のウインドウが表示されるのですが、この機能については暫くの間は「Constraints」って何だろう？と思いながらFigmaを使用していました。大雑把に説明すると「Frame」と「Object」の位置関係の制約といったところでしょうか？大雑把ではなくちゃんと説明していきます。
「Constrain
Figmaの基本操作 その9 図形の調整
Figmaの基本操作 その3 図形の作成で「Object 」を作成しましたが、今回は「Object 」を右のサイドメニューのプロパティパネルの上の部分で設定をして、様々な調整をしたいと思います。
Alignment （整列）
「Alignment （整列）」は、キャンバス上にある複数の「Object」のそれぞれを揃えて配置することができます。
まず「Object」を 1 つ選択し、複数のレイヤ
Figmaの基本操作 その8 Styles （スタイル）の登録
Styles （スタイル）「Styles （スタイル）」はFigmaの代表的な機能です。様々な設定を一括で管理できる便利な機能です。色、テキスト、効果、グリッドを定義できます。線や塗りを設定することができ、複数の「Object」に「Styles （スタイル）」として登録しておくと、作成後に編集が必要な場合に全ての「Object」の編集を一度で完了することが可能ですので、登録しておくことで統一感のあ
もっとみる
Figmaの基本操作 その7 画像の読み込みと調整
Figmaの基本操作 その4 図形の塗りと線の設定 の図形の塗りの部分でFigma内に画像が読み込めることを少しだけ説明したのですが、読み込んだ画像はFigma内で様々な調整をすることができます。今回は画像の調整について説明したいと思います。
画像の読み込み画像を「Object」の塗りとしての画像のアップロードができます。
1. キャンバスで「Object」を作成して選択します。
2. 右のサ
Figmaの基本操作 その6 影やぼかしの効果
前回のFigmaの基本操作 その5 保存と書き出しで基本的な作業はできるようになりましたので、今回はオブジェクトにエフェクトを使って加工をしてみようと思います。
エフェクトについて
FigmaにはShadow effect（シャドウエフェクト）が２つ、Drop shadow（ドロップシャドウ）とInner shadow （インナーシャドウ）、そしてBlur effect（ブラーエフェクト）が２つ
Figmaの基本操作 その5 保存と書き出し
前回のFigmaの基本操作 その4 図形の塗りと線の設定で簡単なデザイン作成ができるようになりましたので、作成したものを残すために保存や書き出しをしてみましょう。
Save （保存）
Figmaでの保存は基本的にクラウド上に自動で最新のものが保存されます。これはイラストレーターやフォトショップと異なり、自分の意志での保存ではなくて最新の作業が常に保存されますので、自分のコンピューターのフォルダに
Figmaの基本操作 その4 図形の塗りと線の設定
前回のFigmaの基本操作 その3 図形の作成でやっとキャンバスに図形を描けるようになりました。図解を描いたら色を塗りたいですね、今回は図形に色を塗って線の設定もしてみましょう！
Figmaで図形に色を塗る場合いくつかの塗り方があり、右サイドメニューのプロパティパネルの「Fill」内で設定します。
Fill （塗りつぶし）「Fill （塗りつぶし）」は、Figmaで色を塗る機能になります。テキス