Web制作が捗る最強ツール Figmaの便利機能をご紹介

皆様こんにちは!ZEROBASEです!
今回はWebサイト制作に多く取り入れられているFigmaの個人的に便利だと思う機能についてご紹介いたします。

目次

1.Figmaのメリット

2.Figmaの注意点

3.Figmaの便利機能

4.おわりに

1.Figmaのメリット

Figmaはリアルタイムでの共同編集が可能です。

Webサイト制作などの複数人が関わる制作に向いていて、デザインプレビューの共有も簡単に行うことができます。

Figmaの他にFigJamというツールもあり、参考サイトをまとめたり、修正事項をまとめたりなど、円滑なコミュニケーションを取るのに優れています。

2.Figmaの注意点  

Figmaには無料プランと有料プランがあります。

無料プランには使える機能、ページ数などに制限があり、有料プランも複数のプランがあります。有料プランに切り替える際にはよく使用できる機能などを調べてからにすることをお勧めします。

Figma公式サイト:引用  https://www.figma.com/ja-jp/pricing/

それでは、本題に入ります。

3.Figmaの便利機能

(1)コンポーネント

コンポーネントとは、パーツのことです。

ボタン等の繰り返し同じデザインのものはコンポーネントを作成すると便利です。

コンポーネントを複製すると、インスタンスというものが作成され、コンポーネントを変更することで、インスタンスもすべて変更されます。

※インスタンスを変更しても他のインスタンスやコンポーネントには反映されません。

 

【コンポーネントの作成方法】

コンポーネントにしたいものを選択し、右クリックでコンポーネント作成か、ツールバーの真ん中にあるコンポーネントアイコンをクリックする。

<ショートカット Ctrl+Alt+K>

【コンポーネントの復元】

インスタンスを残した状態で、間違ってコンポーネントを消してしまった場合は、インスタンスをクリックし、右サイドバーでコンポーネントを復元をクリックする。

【インスタンスの切り離し】

インスタンス状態を解除したいときは、右クリックのインスタンスの切り離しをクリックする。

<ショートカット Ctrl+Alt+B>

(2)画像挿入

ツールバー>四角のアイコン>画像/動画を配置

→画像を複数枚まとめて入れることができます。

<ショートカット Ctrl+Shift+K>

※他の画像挿入のやり方2つ

1.右サイドバーの塗りを画像>画像を選択

2.画像をドラッグ&ドロップ

(3)オートレイアウト

オートレイアウトはフレームに使用できる機能です。

余白などを設定することができます。

横方向、縦方向に要素を変更できたり、折り返し機能を使用することができます。

最大値、最小値の設定もできるので、”〇〇px以下は要素を折り返す”という設定をすることもできます。

【Web制作でのオートレイアウトの使用方法(例)】

①土台のフレームをオートレイアウトにする。

②土台のフレームを選択して、各要素間の余白を設定する。

③土台のフレーム内の各要素を選択してオートレイアウトすると、各要素ごとオートレイアウトが設定できる。

【作成方法】

右サイドバー>オートレイアウトの+をクリックします。

<ショートカット Shift+A>

【削除方法】

右クリック>オートレイアウトの削除

<ショートカット Alt+Shift+A>

 

(4)バリアブル

カラー、数値、文字列、ブーリアンを設定することができます。

サイトカラーや、フォント、余白等をあらかじめ設定しておけば、統一されたデザインを作成することができます。

(5)レイアウトグリッド

デザインの目安で、ガイドを引くことができます。

私は、コンテンツ幅と真ん中にガイドを引いています。

<作成方法>

1.右サイドバーのレイアウトグリッドのプラスを押す。

2.タブ選択で列にする。

3.数を2、タイプをストレッチ、余白を両端にあけたい数値を入力、ガターを0にする。

(6)セクション

ツールバーからセクションをクリックします。

コンポーネントなどをまとめるのに便利です。

<ショートカット Shift+S>

 

4.おわりに

Figmaはプラグインも豊富で、共同作業に優れているので複数人が関わるサイト制作を円滑にしてくれます。アップデートも日々されているので、いろいろ勉強して使いこなせるととても作業効率アップにつながると思います!

最後までご覧いただきありがとうございました。