Figmaついて(初級編)

こんにちは。デザイナーのカヒブンです。

Figmaは、デザイナーにとってウェブやアプリデザインを効率的に行うツールとして知られています。弊社もFigmaを使って各種デザインプロジェクトに対応していますので、今回はFigmaついて解説します。

Figmaとは

Figmaは、ウェブやアプリデザインツールであり、特にUI/UXデザインに特化しています。クラウド上で動作するため、インストールの手間がなく、インターネット環境さえあればどのデバイスからでもアクセス可能です。また、複数人が同時に同じファイルを編集できるリアルタイムコラボレーション機能を持ち、デザインプロジェクトの効率化に大きく貢献します。これにより、チームメンバーが異なる場所にいてもスムーズな協力が可能となります。

ちなみに、Figmaの公式サイトはこちらです。

Figmaで作成できるもの

Figmaでは、主に以下のようなデザインを作成できます。

UI/UXデザイン

Figmaは特にウェブサイトやモバイルアプリのユーザーインターフェース（UI）デザインに適しています。フレームやコンポーネント、プロトタイプ機能を駆使して、直感的で魅力的なインターフェースを作成できます。

ユーザーエクスペリエンス（UX）デザインにおいても、Figmaはその強力なツール群で役立ちます。ワイヤーフレームやユーザーフローを作成し、ユーザーの体験を視覚化しながらデザインを進めることが可能です。

プロトタイピング

Figmaのプロトタイピング機能を使えば、インタラクティブなデザインを簡単に作成できます。クリックやホバーなどのアクションを設定し、実際の動作をシミュレートすることで、ユーザビリティのテストが行えます。

グラフィックデザイン

基本的なベクターグラフィックスツールを備えており、ロゴやアイコン、イラストレーションなどのグラフィックデザインも行えます。

初期設定とインストール

Figmaの基本的な使い方を理解するために、以下のステップを踏んでいきましょう。

1. アカウント作成

まず、Figmaの公式サイトにアクセスし、メールアドレスを使ってアカウントを作成します。Googleアカウントでの登録も可能です。アカウント作成後、基本的なプロフィール設定を行います。ここでは、名前やアバターの設定が含まれます。

2. デスクトップアプリのインストール（オプション）

Figmaはブラウザベースのツールですが、デスクトップアプリも提供されています。公式サイトからダウンロードし、インストールすることで、より快適な作業環境を整えることができます。

3. 日本語の有効化

Figmaの日本のユーザーが増えているため、Figma公式は日本語表示に対応しています。本当に便利ですね。まず左上、Figmaのロゴが表示されている箇所をクリックし、「Account Setting」を開きます。設定ページが開いたら、「Language（言語）」のドロップダウンメニューから「日本語」を選択します。言語を選択したら、自動的に設定が保存され、Figmaのインターフェースが日本語に切り替わります。（もし設定が反映されない場合は、ブラウザを再起動するか、デスクトップアプリを再起動してみてください。）

4. チーム設定

チームメンバーと共同で作業する場合は、チーム設定を行い、メンバーを招待します。これにより、共同作業がスムーズに進みます。

Figmaの基本を学ぶ

さて、Figmaの基本的な使い方を学んで、実践してみていきましょう。

フレーム

Figmaのフレームは、他のデザインツールでいうところのアートボードにあたります。フレームは、Figma で作成するほとんどのもののトップレベルのコンテナーとして機能するデザインの基本要素です。

Figmaでフレームを作成するには、いくつかの方法があります：

制約

制約を使用すると、デザインの要素を親フレームのさまざまな側面に固定できます。

これにより、同じグループ内で複数のデバイスサイズやブレイクポイントをサポートする、流動的なレイアウトを構築することができます。

コンポーネント

コンポーネントを使用すると、デザインの既存の部分を再利用することができ、繰り返しや面倒な作業の時間を節約することができます。

コンポーネントは、コピーではなく新しいインスタンスを作成するので、キャンバス上で直接プロパティをオーバーライドすることができます。

コンポーネントには、2つの側面があります：

1. メインコンポーネント：コンポーネントのプロパティを定義します。
2. インスタンス：コンポーネントの複製で、デザインで再利用することができます。

インスタンスはメインコンポーネントにリンクしているので、メインコンポーネントに加えた変更はインスタンスにも適用されます。

スタイル

スタイル機能を使用すると、オブジェクトの色、フォント、効果などの一連のプロパティを定義し、チームのデザイン全体で再利用することができます。

スタイルのプロパティを変更すると、そのスタイルを使用しているすべてのオブジェクトが即座に更新されます。

スマートセレクション

スマートセレクションを使用すると、オブジェクトの間隔を調整したり、オブジェクトを選択して均一なグリッドを作成したり、グリッドレイアウトの中でオブジェクトを再配置したりすることが可能です。
受信トレイのインターフェイス、ニュースフィード、フォトギャラリーのグリッドレイアウトをイメージしてください。

エクスポート

Figmaは、PNG、JPG、SVG、およびPDF形式での書き出しをサポートしています。
ブラウザでFigmaを使用する場合、エクスポートは自動的にデフォルトのダウンロードフォルダに保存されます。Figmaのデスクトップ・アプリケーションを使用してエクスポートし、保存先を選択してみてください。

コメント

コメントは、Figmaのコラボレーションに新たなレイヤーを追加します。キャンバス上のどこにでもコメントを追加することができます。コメントは、デザインファイルだけでなく、プロトタイプにも追加できます。

共有

Figmaでファイルを共有するのは簡単です。共有ダイアログを開いて、特定の権限を設定したり、リンクアクセスを有効にしたりします。リンクアクセスを有効にすると、ファイルの共有は、その URL を共有するのと同じくらい簡単になります。

 

他の便利な機能

リアルタイムコラボレーション

Figmaの最大の特徴の一つは、複数人が同時に同じデザインファイルを編集できることです。これにより、フィードバックの即時反映や、共同作業が非常に効率的に行えます。

プラグイン

Figmaには豊富なプラグインがあり、作業効率を向上させるために役立ちます。例えば、アイコンセットの追加、カラー管理ツール、アクセシビリティチェックツールなどが挙げられます。

Figmaのプラグインについて詳しく書いた記事がありますので、こちらをクリックしてご覧ください。

バージョン管理

Figmaは自動的に変更履歴を保存し、いつでも過去のバージョンに戻すことができます。これにより、安心して作業を進められます。

プロトタイプとインタラクション

デザインをインタラクティブにすることで、ユーザーの操作感をシミュレートできます。リンクやトランジションを設定し、実際の使用感を確認できます。

最後に

以上がFigmaの概要とその基本的な使い方についてです。Figmaを活用することで、デザインをより効率的に進めることができるでしょう。最後までお読み頂きありがとうございました。