わかー

わかー

Figmaの操作についてnoteに投稿してみて

Figmaについては、自分の勉強も兼ねてこれから始める方と始めたばかりの方へ日本語での説明も多くはないので、Figmaの使い方を4月からnoteに投稿しはじめ半年間続けました。この半年間書いた記事のまとめとして今回投稿します。 Figmaについては半年前は初心者であまり知識もなく始める時に半年間書き続けると決め、そんなに書くことがあるかな？と思ってましたが機能は多いのでこれだけ書いても機能を網羅できたわけではありませんし、Figmaが頻繁に機能アップデートをするので、書いて

わかー

    • Figma Webページデザインの作成その6 モバイル版の作成

      前回はPC版のトップページを作成しましたので、今回はこのPCページのモバイル版を作成します。PC版がありますので、基本的にPC版から素材はコピーしてモバイル版に設置できそうです。 Frameの作成 まずはモバイル版のFrameを作成しますショートカット「A」を押すと右サイドメニューのプロパティパネルに「Phone」と表示されます。モバイルのテンプレートが多数用意されていますので、制作物にあったものを自由に選択してください。今回は一般的なiPhoneの横幅のサイズの375

      わかー

      • Figma Webページデザインの作成その5 Map画像の設置とフッターの作成

        前回は「news」の 部分まで作成して徐々に形になってきましたので、今回は「company」部分を作成します。 Map画像の設置 「menue title」になる「company」の文字設定は前回テキストの設定を「Styles （スタイル）」として登録しておいたので、Stylesから選択します。 企業情報の社名や住所を入力します。右のサイドメニューのプロパティパネルで文字設定も行います。 今回住所下部にMapを挿入します。簡単にできるやり方がありますので、是非やって

        わかー

        • Figma Webページデザインの作成その４　Styles （スタイル）とComponent（コンポーネント）

          今回は「news」の 部分を作成したいと思います。前回のようにテキストはデフォルトでは「Roboto」になっているので変更したいと思います。 文字設定の登録 メニューのタイトルとなるテキストは何度か使用するので、その都度テキストの設定をしないで済むように、Figmaの基本操作 その8　Styles （スタイル）の登録でやったようにテキストの設定を「Styles （スタイル）」として登録しておきます。 前回設定したテキストの「about us」を選択して「Text St

          わかー

        Figmaの操作についてnoteに投稿してみて

        わかー

        • Figma Webページデザインの作成その6 モバイル版の作成

          わかー

        • Figma Webページデザインの作成その5 Map画像の設置とフッターの作成

          わかー

        • Figma Webページデザインの作成その４　Styles （スタイル）とComponent（コンポーネント）

          わかー

          Figma Webページデザインの作成その3　Google Fontsを使用したテキストの使用と画像の配置

          今回は「about us」の 部分を作成したいと思います。テキストはデフォルトでは「Roboto」になっているので変更したいと思います。 Google Fontsの使用 アルファベットで表記するメニューの項目はGoogle Fontを使用したいと思います。Google Fontsとは、Googleが提供するWebフォントのサービスで、オープンソースで提供されており、基本的に無料で使用できます。様々な言語のフォントも用意されています。IllustratorやPhotosh

          わかー

          Figma Webページデザインの作成その3　Google Fontsを使用したテキストの使用と画像の配置

          わかー

          Figma Webページデザインの作成その2　ヘッダーとPluginsを使用した画像の設置

          今回も仮の会社のWebページを作成したいと思います。まずはPC版の作成をしていきたいと思います。前回のFigma Webページデザインの作成その１　作成準備で準備ができたので実際に作成していきたいと思います。 ヘッダーの作成まずはヘッダーを作成したいと思います。ヘッダーの長方形を設置します。 メニューから「Rectangle」かショートカット「R」で長方形を作成して、前回高さは100pxと設定しましたので、W1200×H100で作成して上部に合わせました。 色は背景色は白

          わかー

          Figma Webページデザインの作成その2　ヘッダーとPluginsを使用した画像の設置

          わかー

          Figma Webページデザインの作成その１　作成準備

          Figmaの基本操作を今までいくつか書いてきたことで基本操作をかなり知ることができました。今ままでの投稿を踏まえて実際に作業をしてみたいと思い、今回は仮の会社のWebページを作成したいと思います。まずはPC版の作成をして、その後SP版を作成したいと思っています。よろしくお願いします。 新規ファイルの作成 まずは新規ファイルの作成をします。New tabが作成しDesignを選択してください。 新たなファイルが作成されます。ここで作成していきます。 Frameの作成まずは

          わかー

          Figma Webページデザインの作成その１　作成準備

          わかー

          Figmaの基本操作 その12 「Grid」について

          オブジェクトの配置や整列をより正確に行うために、「Canvas」上に「Pixel Grid」を表示することができます。方眼紙のようなマス目を表示させて、マス目を使用することで図形や線を書きやすくしてくれて大変便利です。また、グリッドの大きさを指定したり、グリッドにオブジェクトをスナップさせることができます。 Pixel Grid ピクセルグリッド 「Pixel Grid」を表示するには トップメニュー→「View」→「Show Pixel Grid」 チェックが入っていない

          わかー

          Figmaの基本操作 その12 「Grid」について

          わかー

          Figmaの基本操作 その11　「Auto Layout」で「Object」を並べる

          Figmaには便利に自動でデザイン作成を助けて機能がいくつかありますが、今回「Auto Layout」という機能を紹介します。名前の通り自動でレイアウトしてくれる機能になり、X軸やY軸に沿って「Object」を並べて調整してくれます。 Auto Layoutの追加 どんな風に調整してくれるか「Object」を並べてやってみます、まずは「Object」を３つ作成し並べてみました。 ３つ全てを選択し、右のサイドメニューの「Auto Layout」の「＋」アイコンをクリックしま

          わかー

          Figmaの基本操作 その11　「Auto Layout」で「Object」を並べる

          わかー

          Figmaの基本操作 その10 Constraints（制約）について

          「Object」を選択すると右のサイドメニューのプロパティパネルに「Constraints（制約）」のウインドウが表示されるのですが、この機能については暫くの間は「Constraints」って何だろう？と思いながらFigmaを使用していました。大雑把に説明すると「Frame」と「Object」の位置関係の制約といったところでしょうか？大雑把ではなくちゃんと説明していきます。 「Constraints」を使用することで「Frame」のサイズ変更した場合に「Frame」内の「O

          わかー

          Figmaの基本操作 その10 Constraints（制約）について

          わかー

          Figmaの基本操作 その9　図形の調整

          Figmaの基本操作 その3　図形の作成で「Object 」を作成しましたが、今回は「Object 」を右のサイドメニューのプロパティパネルの上の部分で設定をして、様々な調整をしたいと思います。 Alignment （整列） 「Alignment （整列）」は、キャンバス上にある複数の「Object」のそれぞれを揃えて配置することができます。 まず「Object」を 1 つ選択し、複数のレイヤーを選択します。「Alignment （整列）」には９種類ありますので選択したそ

          わかー

          Figmaの基本操作 その9　図形の調整

          わかー

          Figmaの基本操作 その8　Styles （スタイル）の登録

          Styles （スタイル）「Styles （スタイル）」はFigmaの代表的な機能です。様々な設定を一括で管理できる便利な機能です。色、テキスト、効果、グリッドを定義できます。線や塗りを設定することができ、複数の「Object」に「Styles （スタイル）」として登録しておくと、作成後に編集が必要な場合に全ての「Object」の編集を一度で完了することが可能ですので、登録しておくことで統一感のあるデザインにすることが可能です。 下記の４種類の登録ができます。 Colors

          わかー

          Figmaの基本操作 その8　Styles （スタイル）の登録

          わかー

          Figmaの基本操作 その7　画像の読み込みと調整

          Figmaの基本操作 その4　図形の塗りと線の設定 の図形の塗りの部分でFigma内に画像が読み込めることを少しだけ説明したのですが、読み込んだ画像はFigma内で様々な調整をすることができます。今回は画像の調整について説明したいと思います。 画像の読み込み画像を「Object」の塗りとしての画像のアップロードができます。 1. キャンバスで「Object」を作成して選択します。 2. 右のサイドメニューのプロパティパネルの「Fill」下の四角いカラーアイコンをクリックす

          わかー

          Figmaの基本操作 その7　画像の読み込みと調整

          わかー

          Figmaの基本操作 その6　影やぼかしの効果

          前回のFigmaの基本操作 その5　保存と書き出しで基本的な作業はできるようになりましたので、今回はオブジェクトにエフェクトを使って加工をしてみようと思います。 エフェクトについて FigmaにはShadow effect（シャドウエフェクト）が２つ、Drop shadow（ドロップシャドウ）とInner shadow （インナーシャドウ）、そしてBlur effect（ブラーエフェクト）が２つ、Layer blur （レイヤーブラー）とInner shadow （インナ

          わかー

          Figmaの基本操作 その6　影やぼかしの効果

          わかー

          Figmaの基本操作 その5　保存と書き出し

          前回のFigmaの基本操作 その4　図形の塗りと線の設定で簡単なデザイン作成ができるようになりましたので、作成したものを残すために保存や書き出しをしてみましょう。 Save （保存） Figmaでの保存は基本的にクラウド上に自動で最新のものが保存されます。これはイラストレーターやフォトショップと異なり、自分の意志での保存ではなくて最新の作業が常に保存されますので、自分のコンピューターのフォルダに整理して保存する必要はなく、ファイルブラウザと呼ばれる起動時に表示されるダッシュ

          わかー

          Figmaの基本操作 その5　保存と書き出し

          わかー

          Figmaの基本操作 その4　図形の塗りと線の設定

          前回のFigmaの基本操作 その3　図形の作成でやっとキャンバスに図形を描けるようになりました。図解を描いたら色を塗りたいですね、今回は図形に色を塗って線の設定もしてみましょう！ Figmaで図形に色を塗る場合いくつかの塗り方があり、右サイドメニューのプロパティパネルの「Fill」内で設定します。 Fill （塗りつぶし）「Fill （塗りつぶし）」は、Figmaで色を塗る機能になります。テキストやあらゆるベクター・オブジェクトに適用できます。「Fill （塗りつぶし）」の

          わかー

          Figmaの基本操作 その4　図形の塗りと線の設定

          わかー