WindowsおよびMac用のトップ11Figmaキーボードショートカット
その他 / / November 29, 2021
Figmaはデザインスペースで注目を集めています。 スケッチソフトウェアは、主にUI / UXデザイン業界を支配しています。 しかし、最新の製品 アドビ (Adobe XD)と、柔軟な価格設定、シームレスな共有、クロスプラットフォームの可用性を備えたFigmaは、UI / UXデザイナーの方程式を変えています。
Figmaは、Web、Windows、およびmacOSで利用可能であり、優れたスタータープラン(3つのプロジェクトと2つのエディター)と相まって、UI設計スキルの設計、プロトタイプ作成、および習得に理想的な選択肢となっています。 最近の会社 待望のプラグインサポートを導入. UI / UXデザインスペースに不慣れで、Figmaを使い始める場合は、WindowsとMacに不可欠なFigmaキーボードショートカットをたくさん覚えておくとよいでしょう。
この投稿では、WindowsPCとMacで使用できる11の最高のFigmaキーボードショートカットについて説明します。 始めましょう。
Figmaにアクセス
1. マスターズーム機能
Zoomキーボードショートカットをマスターしないと、FigmaやUI / UXデザインソフトウェアを使用することはできません。 これらは、ワークフローで最もよく使用されるキーボードショートカットになります。
WindowsおよびMacの場合、Shift +1を使用してレイヤーを画面に合わせることができます。 Shift + 2で選択したフレームを拡大し(選択したコンポーネントの詳細をすばやく表示できるため、最もよく使用するキーボードショートカット)、Shift +0で100%ズームします。
2. ルーラーの表示/非表示およびレイアウトグリッドの表示/非表示
私は通常、Figmaでルーラーを使用しませんが、UIデザイン中にルーラーを使用する場合は、PCまたはMacのShift + Rキーボードショートカットを使用してルーラーを表示/非表示にすることができます。
私はいつもレイアウトグリッドを使用しています。 コンポーネントやアイコンを同じ距離に配置したり、テキストやその他の要素を整理したりできます。 MacでControl + Gキーボードショートカットを使用して、レイアウトグリッドを表示/非表示にします。
ガイディングテックについても
3. ペン、移動、およびテキストツール
Figmaは、強力でカスタマイズ可能なペンツールを提供します。 数分間遊んだ後、私が言っていることがわかります。 設計ワークフローでは、これら3つのツールを頻繁に使用します。
WindowsとMacでは、いつでもトップメニューから選択するか、ペンの場合はPキーストローク、移動の場合はV、テキストツールの場合はTを使用できます。
4. レイヤーとコンポーネント間を移動する
これらの2つのキーボードショートカットは、レイヤーとコンポーネントが多すぎるデザインプロジェクトで作業している場合に非常に便利です。 あなたはそれらの間を絶えず移動する必要があるかもしれません。 Macの場合はOption + 1、Windowsの場合はAlt + 1を使用して、レイヤーパネルに移動できます。 次に、Macの場合はOption + 2、Windowsの場合はAlt + 2を使用して、[コンポーネント]メニューに移動します。
5. オープンカラーピッカー
この機能は、画像やアイコン、その他のコンポーネントから色を抽出する場合に便利です。 MacまたはWindowsの「I」キーボードショートカットを使用して、カラーピッカーを開くことができます。 画像またはアイコンの上にカラーピッカーを置き、からカラーコードをコピーします。 カラーピッカー メニュー。
6. 現在のスタイルをコピー/貼り付け
これはリアルタイムの節約になります。 コンポーネントの現在の色/デザインを他のテキストやアイコンにすばやくコピーしたいですか? 現在の要素を選択し、Macの場合はOption + Command + C、Windowsの場合はCtrl + Shift + Cを使用してそのスタイルをコピーできます。 次に、他の要素を選択し、Macの場合はOption + Command + V、Windowsの場合はCtrl + Shift + Vを使用してスタイルを貼り付けます。
7. グループ化/グループ解除の選択
グループ化とグループ化解除は、設計ソフトウェアの最も重要な部分の1つです。 図形、アイコン、テキストを追加した後、それらをグループ化して簡単に移動または変更したい場合があります。 要素を選択し、Macの場合はCommand + G、Windowsの場合はCtrl + Gを使用してグループを作成できます。
グループ化を解除するには、Macの場合はCommand + Shift + G、Windowsの場合はCtrl + Shift + Gを使用します。
ガイディングテックについても
8. ロックとロック解除を切り替えます
でデザインを作成する場合 レイヤーが多すぎます とコンポーネント、Figmaキャンバスはあなたにとって非常に忙しくなるかもしれません。 これらのシナリオでは、アイコン、テキスト、またはコンポーネントを誤って移動することは望ましくありません。 このような場合、要素を選択し、Macの場合はCommand + Shift + L、Windowsの場合はCtrl + Shift + Lを使用して要素をロックできます。
これは、[レイヤー]メニューの小さなロックアイコンで表されます。 ロックを解除するには、同じキーボードショートカットを使用します。
9. コンポーネントを作成する
コンポーネントは、Figmaエクスペリエンスの核心です。 デザインUI全体で同じ要素を再利用したい場合があります。 例としては、ハンバーガーメニュー、ボトムバーメニュー、ボタンなど、他の画面にも再利用したいものがあります。
グループ化ツールを使用してアイコンとテキストをグループ化し、Macの場合はOption + Command + K、Windowsの場合はCtrl + Alt + Kを使用してコンポーネントを作成できます。 次に、[コンポーネント]メニューからそれらにアクセスします(チェック#4)。
10. チームライブラリを表示
Figmaはデザイン業界のGoogleドキュメントとも呼ばれていることをご存知ですか? このソフトウェアには、チームに編集者を追加できるシームレスな共有オプションが付属しています。
大規模なプロジェクトの場合、各チームメンバーには個別の設計タスクが与えられます。 グループでデザインを作成するときに、メンバー間で共通のコンポーネントとアイコンで構成されるチームライブラリにアクセスすることをお勧めします。 Macの場合はCommand + Option + O、Windowsの場合はCtrl + Alt + Oを使用してメニューを開き、チームライブラリメニューを開くことができます。
11. デザインのエクスポート
デザインが完成したら、エクスポートオプションを使用してデザインからアイコンと画像を抽出し、開発者に送信して実装できるようにすることができます。 レイヤーを選択し、Macの場合はCommand + Shift + E、Windowsの場合はControl + Shift + Eを使用して詳細をエクスポートできます。
ガイディングテックについても
プロのようにFigmaを使う
Figmaは、UI / UXデザイナーにとって優れたツールです。 初心者は無料で、共有が可能で、スムーズなワークフローを可能にするキーボードショートカットがたくさん付属しています。 これらのキーボードショートカットをワークフローに実装し、プロのような美しいUIデザインを作成します。
次は: CanvaとCrelloは、ポスターやチラシを作成するのに最適な2つのデザインツールです。 以下の比較を読んで、あなたにとってより良い選択を見つけてください。