Figmaデザインツールをマスターする：便利なヒントとハウツー

Googleドキュメントを使用したことのある人なら誰でも、ファイルの編集、共同作業、ウェブへの保存が簡単であることがどれほど便利かを知っています。 Webデザイナーがプロジェクトに同じツールを持っていたらどうなるでしょうか？ まあ、彼らは実際にそれを持っていて、それはフィグマです。 このFigmaレビューでは、プラットフォームの最も輝かしい機能を紹介し、デザイナーが選択するツールにします。

フィグマとは

Figmaはクラウドベースのデザインツールであり、Mac OSまたはWindowsでのみ動作する他の一般的なデザインツールとは異なり、Linuxでも動作します。 したがって、このプラットフォームは、さまざまなオペレーティングシステムを使用し、作業用にSVGコード、CSS、iOSまたはAndroidコードを生成する必要がある設計者のコラボレーションを可能にします。

このプラットフォームにより、ユーザーはすべて1つのプラットフォームで設計を作成し、プロトタイプを作成し、フィードバックを収集できます。

Figmaを使用する理由

Figmaデザインツールの美しさに触れる前に、このプラットフォームがデザイナーにとって非常に魅力的な理由を見てみましょう。

1. それはウェブベースです。 Figmaはブラウザで実行され、プロジェクトを個別のファイルとしてコンピュータに保存しなくても作業できます。すべての編集は自動的にクラウドに保存されます。 ただし、すべての変更を保存するには、アクティブなインターネット接続が必要であることを忘れないでください。
2. それはチームワークを可能にします。 Figmaを使用すると、価格プランに応じて、2人から無制限の数の編集者のチームを持つことができます。 1つのプロジェクトに取り組んでいるチームメンバーの数と、彼らが行っている変更をいつでも確認できます。
3. ソロデザイナーは無料です。 すべての機能は、試用期間なしで完全に無料で使用できます。

全体として、Figmaには3つの価格プランがあります。 プラットフォームがそれらのそれぞれにどの機能を提供するかを発見しましょう。

Figmaの料金プラン

Figmaを使い始める

サインアップすると、ユーザーはオンボーディングに必要なリンク（ヘルプセンター、ビデオチュートリアル、フォーラム、および役立つリソース）が記載されたウェルカムメールを受け取ります。

さらに、ユーザーがツールの使用を開始すると、プラットフォームのクイックウォークスルーが提供されます。 オンラインで作業することも、Figmaデスクトップバージョンをダウンロードしてワークフローをオフラインに設定することもできます。 実際、インターフェイスは非常に直感的で、プロジェクトの要素を含むレイヤーパネル、ツールと使用可能なオプションを備えたツールバー、およびすべて右側のプロパティパネルがあります。

それでは、Figmaの最も優れた機能とオプションの概要を説明し、それらをどのように適用できるかを見てみましょう。

Figmaの機能と便利なオプション

プロトタイピング

Figmaを使用すると、必要な数の画面を作成することで、クリック可能なバージョンのWebサイトまたはアプリを作成できます。 このようにして、タブを切り替えることなく、ボタンの機能、要素のロールオーバー、モーダルウィンドウアニメーションなどの機能をテスト、編集、または調整することができます。 デザインの接続とホットスポットを作成して、実際の設定でどのように見えるかをシミュレートできます。

プロパティパネルでプロトタイプに切り替えて、パスとインタラクションの作成を開始するだけです。

コンポーネント

これらは、プロジェクト全体で再利用できるUI要素です。 この機能を使用すると、対称コンポーネントを反転して作成したり、コンポーネントをタイリングしてパターンを繰り返したりできます。 ボタン、フィールド、またはメニューからコンポーネントを作成できます。 マスターコンポーネントを作成するには、[オプション]メニューの[コンポーネントの作成]ボタンをクリックするか、レイヤーを右クリックして[コンポーネントの作成]オプションを選択します。

インスタンスを作成することにより、マスターコンポーネントを再利用できます。 これらのコンポーネントは、色、ブロック、ボタン、図形、ランディングページなどのUI要素から個別のコンポーネントとして作成することもできます。

インスタンスコンポーネントを作成するには、マスターコンポーネントを選択し、ホットキー（WindowsおよびMac OSの場合はそれぞれAltまたはD）を押したまま、インスタンスをコンポーネントからドラッグし、必要に応じて別の場所にコピーして貼り付けます。

作成するインスタンスはマスターコンポーネントにリンクされていることを忘れないでください。つまり、マスターコンポーネントに加えたすべての変更は、前者のすべてのコンポーネントに適用されます。 たとえば、マスターコンポーネントのボタンの形状や色を更新することで、Webサイトのデザイン全体でその子コンポーネントを更新します。

ベクターネットワーク

このFigma機能を使用すると、2点からの2本の線だけに制限されなくなるため、複雑なベクトル形状を作成できます。 ペンツールを使用して、作成した形状の任意の点から余分な線を描くことができます。

さらに、Vector Networksは、外部ソースからSVGコードをコピーして、ベクターレイヤーとして直接Figmaに貼り付けることができるため、HTMLルーチンを簡素化できます。 FigmaベクトルをSVGコードとしてコピーすることもできます。 これを行うには、要素を右クリックし、[SVGとしてコピー]を選択して、作成中のHTMLまたは任意のWebプロジェクトにコードを貼り付けます。

組み込みのコメント、編集、共有

Figmaを使用すると、チームを作成し、各チームメンバーがプロジェクトで行う権限を選択できます。表示または表示と編集も可能です。 チームメンバーがどのようにデザインを更新または変更するかをリアルタイムで確認することもできます。

チームは、Googleドキュメントの場合と同様に、フィードバックを残したり、プロジェクトの任意の要素について作業領域で話し合ったり、キャンバス上の任意の場所に固定したりできます。 コメントを残すには、上部のメニューで吹き出しを選択し、コメントする要素をクリックして、フィードバックを書き込みます。

バージョン管理

Figmaを使用すると、各共同編集者の履歴を追跡したり、前のバージョンにロールバックしたりすることもできます。 ユーザーがプロジェクトのタブを閉じるか、30分以内に変更が加えられなかった場合、サービスはバージョンを自動的に保存します。 このオプションにすばやくアクセスするには、ツールバーのプロジェクト名の左側にあるドロップダウンアイコンを選択します。 右側にバージョン履歴が表示され、特定のバージョンに名前を付けたり、復元したり、複製したりするオプションがあります。

動作中のFigmaデザインツール

プラットフォームとその機能に慣れた後、Figmaのデザインオプションを試して、eBook用のシンプルなページを作成することにしました。 まず、上部メニューの「+」記号をクリックしました。 その後、ツールバーの「フレーム」アイコンをクリックしてフレームを作成し、キャンバス上でデザインを整理しました。 次に、プロジェクトに必要なレイヤー（テキストブロック、長方形、画像）を入力し、要素間のすべてのスペースを構成しました。

これが私たちが何とか作成したものです：

プラットフォームにはペイント用の主要なパレット（CMYKパレット）またはミリメートルとセンチメートルの間のサイズ切り替えがないため、高品質の印刷を作成できないことに注意してください。

最終テイク

Figmaは、デザイナーがデザイナーのために慎重に考え抜いたツールのように感じます。 プラットフォームはあなたがすることができます

• コンピューターのストレージに依存することなく、オンラインで作業し、デザインをクラウドに保存します。
• さまざまなオペレーティングシステムでデザインを作成します。
• チームとリアルタイムで共同作業し、ファイルにコメント、編集、共有します。
• プロトタイピング、ベクターネットワーク、コンポーネントの作成、およびそれらのインスタンスなどの便利な機能を利用して、デザインを編集、テスト、調整し、その可能性を広げます。

Figmaのレビューでプラ​​ットフォームの内部のトリックが明らかになり、試してみるのに十分なインスピレーションを得られたことを願っています。 Figmaでデザインを作成し、SendPulseでマーケティングプロジェクトを作成します。 またね！