Figmaでプラグインを追加して使用する方法

すべてのデザイナーは、彼らがより効率的に働くのを助けるために常に新しいスキルやテクニックを探しています。 Figmaは、ワークフローをよりスムーズかつ高速にするプラグインに接続します。プラグインは、すべてのワークフローのニーズに対応するワンストップショップにFigmaを変換します。それらを使用して、フォントの全範囲を数秒で選択したり、非常に簡単に完全な装飾の詳細を生成したりできます。デザインをコピーして、すべての正しいレイヤーを保持したままFigmaに貼り付けることもできます。

Figmaでプラグインを追加して使用する方法

PC上のFigmaでプラグインを使用する方法

Figmaプラグインの大部分は、PC環境で動作するように開発されています。 PCを使用すると、キーストロークとコマンドを簡単にカスタマイズして、「コピーアンドペースト」や「保存して閉じる」などの最も一般的に使用される機能のショートカットを作成できます。これらは両方とも、Figmaのようなデザインアプリに不可欠なショートカットです。 Windowsは、写真編集ソフトウェア(Paint)とベクターイラストソフトウェア(Inkscape)もサポートしています。どちらも、プロジェクトのデザインプロセスの一環として、Figmaで画像を作成したり、カスタマイズされたアイコンフォントを作成したりするときに非常に便利です。

PCでFigmaを実行している場合は、いくつかの場所からプラグインを実行できます。

a)クイックアクションバー

クイックアクション検索バーを使用すると、マウスに触れることなくアイテムを見つけることができます。必要なのはキーボードだけです。

クイックアクションバーからプラグインを起動するには:

  1. Ctrl + /を押します

  2. ポップアップウィンドウにプラグインの名前を入力します。プラグインがすでにインストールされている場合は、すぐに画面に表示されます。ほぼ同じ名前のプラグインが複数ある場合、Figmaはそれらすべてを表示して、実行するプラグインを選択できるようにします。この場合、上下の矢印キーを使用してリスト内を移動できます。

  3. プラグインが見つかったら、Enterキーを押してプラグインの実行を開始します。この時点で、プラグインが開いて使用できる状態になっているはずです。

b)ファイルメニュー

ファイルメニューは、FigmaEditorの左上隅にあります。新しいファイルを開く、既存の作品を編集する、ベクトルを描く、テキストを入力するなど、さまざまなコマンドを実行できます。ファイルメニューからプラグインを実行することもできます。方法は次のとおりです。

  1. 左上隅にある3本の水平線をクリックします。ポップアップ画面にコマンドのリストが表示されます。

  2. 「プラグイン」の上にマウスを置きます。これにより、Figmaにインストールしたすべてのプラグインのリストが開きます。

  3. 実行するプラグインをクリックします。

c)右クリックメニュー

右クリックメニューのおかげで、プラグインを起動して実行するプロセスを複雑にする必要はありません。

  1. カーソルをキャンバス上の任意の場所に置いた状態で、マウスの右ボタンを押します。

  2. 「プラグイン」の上にマウスを置くと、Figmaにインストールしたすべてのプラグインのリストが開きます。

  3. 使用するプラグインをクリックします。一部のプラグインは、実行前に画面上のプロンプトを表示する場合があります。

  4. この時点で、プラグインは現在アクティブなオブジェクト、レイヤー、またはファイルで目的のアクションを実行します。

最近プラグインを使用した場合は、マウスの右ボタンを押して、ポップアップメニューから[最後のプラグインを実行]を選択すると、プラグインを再度実行できます。

MacのFigmaでプラグインを追加して使用する方法

Figmaプラグインは、インターフェースがすぐに提供できない機能を追加するための一般的な方法です。コードベースのレビューとリアルタイムでの変更をシームレスに切り替える機能は、ワークフローを実行するときにコンテキストを切り替える時間を無駄にしないことを意味します。

MacコンピューターはFigmaと互換性があります。つまり、プラグインを使用して、プロジェクトでの作業中に効率を上げることができます。

MacのFigmaでプラグインを使用する方法は次のとおりです。

  1. Control + /を押します

  2. ポップアップウィンドウにプラグインの名前を入力します。上下の矢印キーを使用して、リスト内を移動します。

  3. プラグインが見つかったら、Enterキーを押してプラグインの実行を開始します。

または、右クリックメニューからプラグインコマンドを起動して実行することもできます。キャンバスの任意の部分を右クリックして、[プラグイン]ボタンの下で使用するプラグインを選択するだけです。

最後に使用したプラグインを再実行するには、Option + Command + Pを押します。

Figmaモバイルアプリのプラグイン

Figmaには、iOSデバイスとAndroidデバイスの両方に対応したモバイルアプリが付属しています。ただし、これらのアプリはまだベータ版であるため、プラグインでの使用に最適化されていません。これらは、デスクトップアプリをミラーリングし、デザインのスケーリングされたバージョンを表示するためにのみ使用できます。デスクトップアプリで選択されたフレームまたはファイルは、モバイルアプリにも表示されます。

また、モバイルアプリは、ウェブアプリまたはデスクトップアプリに同時にログインしている場合にのみ使用できることに注意してください。

最も追加されたFigmaプラグイン

Figmaプラグインはたくさんありますが、いくつかの便利なプラグインはFigma愛好家の間で非常に人気があります。最も追加されたFigmaプラグインのトップ5は次のとおりです。

1.スプラッシュを解除します

デザイナーとして、作品を紹介するために高品質の背景を選択することが重要です。 Unsplashは、個人用または商用目的でダウンロードできる無料の著作権のない画像を備えているため、完璧なソリューションになる可能性があります。 Unsplashの写真は通常非常に高品質であり、このサイトでは事実上すべてのデザインニーズに対応する無料の写真を提供しています。

2.アイコン化

同じページに複数のアイコンを作成しようとして何時間も費やし、それらがネイティブサイズで拡大縮小されておらず、ピクセル化されているように見えることに気付くのはイライラしませんか? Iconifyと入力します。これは、フロントエンド開発者がアイコンセットを組み合わせて、美しく、リッチで、モダンなユーザーインターフェイスを作成するために使用するプラグインです。 Iconifyは、外部エディターを必要とせずに、ブラウザーから直接カスタムアイコンまたはバッジを簡単に追加できるように設計されています。

3.マテリアルデザインアイコン

マテリアルデザインアイコンには、アイコンに必要なものがすべて揃っています。 27,000を超えるアイコンが利用可能であるため、インターフェースに最適なアイコンを見つけることがほぼ確実です。

Material Design Icon Suiteには、さまざまなアイコンスタイルのレンダリングに使用されるベクターグラフィックとフォントファイルが付属しています。単純な白黒の形状でも、グラデーション、ドロップシャドウ、はめ込みシャドウを使用した複数の色の複雑な構成でも、このプラグインで対応できます。図形は、便利なように、レイヤー化されたSVGファイルまたはレイヤー化されたPNG形式の両方で提供されます。

4. Lorem Ipsum

Lorem Ipsumは、デザイン、タイポグラフィ、印刷で使用されるダミーテキストの一種です。そのプラグインを使用すると、デザイナーはダミーコンテンツのセクションを挿入して、実際のコピーの外観を模倣できます。このツールを使用すると、近接性と配置、1行あたりの単語数、文字間隔、カーニングなどの詳細を簡単に計算できます。活字のデザインと一致しない可能性のあるフィラーコンテンツのブロックを開発するために時間を費やす必要はありません。

5.コンテンツリール

これは、アイコン、アバター、テキスト文字列をデザインに取り込む必要がある場合の頼りになるプラグインです。シンプルなツールバーが付属しており、コンテンツが必要なデザインのレイヤーを選択し、パレットメニューから好みのコンテンツの種類を選択するのに役立ちます。プラグインを使用すると、プロジェクトのニーズに応じて、テキスト文字列を昇順または降順で整理することもできます。

Figmaプラグインで時間を節約

オリジナルのソフトウェアに含まれていない機能を導入することにより、Figmaプラグインは、より効率的に作業することに熱心な設計者の間で共感を呼んでいます。それらは、同じものを繰り返し再作成するために費やされる時間を削減するのに役立ちます。これらは、主要な設計ツールを切り替えることなく、より多くの可能性を探求する機会を提供します。ただし、特定のプラグインは、個々の要件に基づいて慎重に検討する必要があります。

お気に入りのFigmaプラグインはどれですか?以下のコメントセクションでお知らせください。

最近の投稿

$config[zx-auto] not found$config[zx-overlay] not found