デザインツールは、あらゆるWeb製品の見栄えを良くするプロセスにおいて不可欠な要素です。しかし、多くのデザインツールは非常に重いソフトウェアであるため、ユーザーデバイスにハイエンドのスペックを要求し、使用中にRAMの大部分を消費します。また、これらのデザインツールの全機能を使用するには、高額なプレミアムパッケージを購入する必要があります。こうした問題を解決するために、開発者は平均的なスペックのデバイスで使用できる、安価で軽量なソフトウェアを必要としています。.
導入
Figmaは、開発者のあらゆるニーズを満たす非常に便利な選択肢です。ブラウザベースの無料デザインツールで、現在開発者の間で非常に人気が高まっています。クールでありながら使いやすい機能により、ユーザーに非常にスムーズな体験を提供します。.
ここでは、Figma の全機能を活用するための完全なガイドについて説明します。.
以前は、デザイナーと開発者はメールのみでコミュニケーションを取る必要がありました。そのため、多数の添付ファイルを扱う煩雑なプロセスとなり、その扱いも非常に困難でした。その後、多くの最新ツールが登場し、デザイナーと開発者の作業手順は簡素化されました。しかし、異なるツール間でプロジェクトファイルを同期させるという大きな課題もありました。そのため、より効率的なプロセスが依然として強く求められていました。.
そこで登場したのが、スムーズな作業手順を備えたFigmaです。ブラウザベースのツールなので、どんなOSを使っていても誰でも簡単に使えます。デザインツールをサポートするために不要なプログラムをインストールする必要もありません。また、クラウドベースのツールであるため、Figmaは常にすべてのユーザーに最新のデザインを提供します。このツールのおかげで、コラボレーションやコミュニケーションも非常にスムーズになりました。.
Figmaは、WindowsとmacOSの両方に対応したデスクトップアプリとしてもサービスを提供しています。デスクトップアプリは、SlackやVisual Studio Codeと同様にクロスプラットフォーム対応です。デスクトップアプリとブラウザベースのアプリはほぼ同じ機能を提供しますが、デスクトップアプリにはローカルフォントの使用が組み込まれているのに対し、ブラウザ版でローカルフォントを使用するにはFigma Font Helperをインストールする必要があります。.
整理されたワークスペースを提供するために、Figma のインターフェースは3つの主要な部分に分かれています。中央には大きなキャンバス、左側にはサイドバー、右側にはツールバーがあります。キャンバスは、その上のすべてのデザインを見つけるために使用します。左側のサイドバーには、ファイルのアセット、レイヤー、ページが表示されます。右側のツールバーには、ファイル内の要素に関するすべての情報が表示されます。.
ファイルは通常、複数のページで構成され、各ページにはそれぞれ1つのキャンバスがあります。デザイナーはこれらの複数のページを使用して、ファイルのさまざまな部分を異なるページに整理します。そのため、Figmaを初めて使用するユーザーは、まずこれらのさまざまなページに慣れ、整理された方法で作業できるようにする必要があります。.
Figma内のナビゲーション
- Ctrl / Cmd キーを押しながら上下にスクロールするか、+ キーと – キーを押すと、拡大または縮小できます。.
- スペースバーを押したままマウスでドラッグすると、キャンバス上で水平方向にスクロールします。.
Figma をもっと効率的に使うための便利なショートカットは他にもたくさんあります。でも、全部覚える必要はありません。Ctrl / Cmd + Shift + ? を押すと、いつでもショートカットが表示されます。
プロジェクトスタイルの選択
右側のサイドバーでは、デザインに使用するカラー、タイポグラフィ、カラーグリッド、その他のスタイルをすべて選択できます。選択を解除するには、キャンバス内の任意の場所をクリックするか、Escキーを押します。スタイル要素の横にある編集アイコンをクリックするだけで、各要素のスタイルに関するすべての情報を確認できます。.
読んでください: DrupalからWordPressへの移行方法：完全ガイド
スタイル要素を選択
Command キーを押しながらクリックするか、要素を右クリックしてすべてのネストされたレイヤーのメニューを開き、目的のレイヤーを選択することで、特定のレイヤーを選択できます。.
要素を選択すると、右側のサイドバーの「コード」タブからCSS情報を取得できます。ただし、このCSSは自動生成されるため、メインプロジェクトにコピー＆ペーストしないでください。.
さらに重要なステップ
- 「Alt」キーを押しながらマウスを要素の上に移動すると、要素間のスペースを測定して正しく配置することができます。.
- アセットをエクスポートするには、エクスポート可能としてマークする必要があります。その後、ショートカット Shift + Cmd / Ctrl + E を使用して、エクスポート対象としてマークされたすべてのアセットをエクスポートできます。.
- 右側のサイドバーにある「プロトタイプ」タブを使用して、アニメーションに関する情報を表示できます。.
- 上部のツールバーにあるチャットバブルアイコンをクリックするか、「C」キーを押すとコメントインターフェイスに移動し、デザイン内の任意の場所をクリックして任意の要素に関するコメントを書き込むことができます。.
これは、Figmaを快適にご利用いただくための重要な手順をまとめたウォークスルーです。Seahawk Mediaサービスをご利用いただくには、お気軽にお問い合わせくださいさまざまなWeb製品に関する詳細はブログご覧ください
