Figma の使い方: 初心者向けガイド

グラフィック デザイン ソフトウェアの世界は巨大で、多くの競争があります。figma は、世界中の UX/UI デザイナーのトップを目指して競争しているデザイン ツールの 1 つです。しかし、この直感的なツールについて何を知っていますか?

シンプルですが、他のデザイン ツールに慣れている場合は学習曲線もあります。Figmaとその使い方を見てみましょう。figma101へようこそ。

figmaとは？

ここ数年、グラフィック デザイナーや Web デザイナーとして働いたことがある人なら、Figma のことを聞いたことがあるでしょう。あなたもそれを使ったことがあるかもしれません。

Figma はデザイン ツールであり、Adobe XD、Adobe Photoshop、Sketch などの Web デザインなどのオプションが急上昇し、デジタル デザイナーの間で着実に人気が高まっています。ただし、2022 年に Adob​​e が Figma を買収したため、リーダーボードを再編成する変更が行われる可能性があります。

figma には多くの用途があります。主にデジタル デザインに使用され、印刷用に CMYK でデザインすることはできません。Figma の主な用途には次のようなものがあります。

• プロトタイピング
• UX/UIデザイン
• アプリのデザイン
• ウェブデザイン
• プレゼンテーションのデザイン

Figma モックアップ プラグインを使用して、デザインを見せびらかしたり、プラグインを使用して実際の Web ページを Figma デザインに変換したり、Figma デザインのマスター テンプレートを作成して繰り返しのデザイン タイプで時間を節約したりすることができます。

figmaの価格は？

Figma のサイトで、またはFigma アプリをダウンロードすることで、無料で Figma アカウントを作成できます。無料アカウントは、アプリのすべての設計面の機能を提供します。Figmaと、FigmaのコラボレーションツールであるFigJamでデザインできます。

愛好家または個人のフリーランサーとして Figma を使用している場合、Free Forever バージョンはほぼ完璧です。すべてのプラグインに引き続きアクセスでき、無制限の共同編集者を招待し、無制限の個人ファイルを使用し、すべてのプラットフォームから Figma を使用できます。

Figma の無料版は標準的なデザイナーにとって十分な機能を提供しますが、Figma Professional サブスクリプションでは、チーム メンバーを招待したり、チーム ライブラリから作業したり、無制限の Figma ファイルやバージョン履歴にアクセスしたりできます。エディターごとに月額 12 ドルで利用できます。学生または教職員の方は、無料で Figma Professional を入手できます。

Figmaの使い方：基本

Figmaアプリでもブラウザ版でも、簡単にフォローできます。

Figma を開くと、新しい Figma ファイル、新しい FigJam ファイルを開始するオプション、または Sketch や Adob​​e XD などの別のプログラムで作成されたファイルをインポートするオプションが表示されます。以前に Figma を使用したことがある場合は、開いて作業できる以前の Figma プロジェクトも表示されます。

Figma ワークスペースのナビゲート

新しいファイルを開くと、最初はやる気がないように見えます。他の多くのデザイン プログラムとは異なり、アートボードやキャンバスから始めるのではなく、完全に空白のデザイン ページから始めます。しかし、インスピレーションに満ちた心で、何もない空間に長くとどまることはありません。

左上の水平メニューは、メイン メニューアイコン (Figma ロゴ) で始まります。メイン メニューを選択すると、他のファイル、Figma クイック アクション、一般的なファイル オプション、およびプラグイン、ウィジェット、ライブラリへのアクセスに移動できます。

次に、移動ツール ( V ) があり、その下にスケールツール ( K ) があります。これらのツールは、要素を移動したり、デザインの一部を拡大または縮小したりするためのものです。これらのツールの右側には、Region ツール、Frame ( F )、Section、Sliceが一緒に配置されています。

Figma では、フレームは他のプログラムがアートボードまたはキャンバスと呼ぶものです。[フレーム]を選択して、カスタム サイズのキャンバスを描画します。選択すると、右側のメニューに、一般的なデバイス サイズ (スマートフォン、タブレット、デスクトップ、スマートウォッチ、プレゼンテーション、ソーシャル メディア オプション) 用の既成のフレーム オプションが表示されます。フレームをクリックして直接ドラッグして、カスタム サイズにすることもできます。

左上のメニューに戻ると、領域ツールの右側には、シェイプツール、ペンツール、およびテキストツールがあります。続いて、 Resources ( Components、Plugins、およびWidgets )と、ファイル内を移動するためのHandツールが続きます。そして最後に、メモを作成したり、チームメイトと協力したりするのに最適なコメントツールです。

figmaデザインメニュー

フレームが作成されている状態で、そのタイトルを選択すると、フレームがアクティブになり、デザインの準備が整います。右側のメニューには、Design、Prototype、およびInspectのタイトルが表示されます。名前が示すように、[デザイン] オプションは、フレームの要素をデザインするために使用するメニューです。

最初の [デザイン] メニューはやや単純化されていますが、デザインに要素を追加すると、メニュー オプションが進化します。最初に、メニューは上から下に配置ツール、サイズ変更ツール、自動レイアウト、レイアウト グリッド、レイヤー、塗りつぶし、線、効果、およびエクスポートで実行されます。これらのいくつかはデフォルトで最小化されていますが、+記号をクリックすると、任意のメニューを開くか、最小化することができます。

プロジェクトのメイン フレームを描画したら、図形ツールまたはペン ツールを使用して図形を描画したり、画像プレースホルダーを追加したりできます。また、テキスト ツールを使用して、おそらく他のソフトウェアで行った方法でテキストを追加できます。

フレームに図形やテキストを配置したら、さまざまな右側のメニュー オプションを使用して、それらの要素を編集および設計します。レイヤーメニューには、不透明度とブレンド モードがあります。塗りつぶしを使用すると、露出、コントラスト、温度などの編集機能を使用して、色を追加したり、画像を挿入したりできます。

プロジェクトでさらに要素を構築すると、[アセット] タブの横にある左側の[レイヤー] メニューにレイヤーが形成されます。レイヤーのタイトルをダブルクリックして要素を見つけることができます。デザイン要素をダブルクリックして、強調表示されたレイヤーを見つけることができます。タイトルをダブルクリックすると、最適な編成のために名前を変更できます。

figma プロトタイプメニュー

[デザイン] メニュー オプションの右側には、[プロトタイプ] メニューがあります。デザインの視覚的な側面を完成させ、画像ボックスとテキストを配置する場所を設定したら、プロトタイプ ツールを使用してアニメーションとトランジションをデザインに追加できます。

プロトタイプメニューを使用すると、フレームまたはコンポーネントをトランジションとして接続できます。各フレームが別のフレームに遷移する順序と方法を選択できます。

これは、あるスライドから次のスライドにアニメーション化する Figma プレゼンテーションを作成する場合に最適ですが、このツールを使用すると、アプリや Web デザインのボタンやメニューのアニメーションを巧みに視覚化することもできます. ページごとに複数のトランジションを追加して、ウェブサイトがライブのときにユーザーがどのように関与するかを確認できます。

Figma を使用して Web サイトをデザインすることは、実際の Web サイトを作成することと同じではありませんが、Figma のデザインを開発チームに引き渡すことができます。開発チームは、プロトタイプのインタラクションを Web サイトの実際のアニメーション デザインとして再現できます。これは、クリック、時間、またはその他のインタラクションによって、ページからページへ遷移できることを意味します。

Figmaを始めるのは簡単

これで、Figma レイアウトをナビゲートする方法と、基本的な設計ツールとプロトタイプ ツールがどのように機能するかがわかりました。Figma はとても簡単にアクセスできるので、このデザイン ツールをいじくり回して、作成できるものを見てみましょう。