Figmaをインストールしたけど何から始めたらいいの？
いろんなボタンがあってわからない！
まずは基本となるフレームとシェイプツールについて学ぼう！
今回はデザインツールFigmaの基本となるフレームとシェイプツールについて解説します。
また、便利なショートカットも一緒に紹介していきたいと思います！
▼記事を書いたひと
都内でシステムエンジニアをしているkentos(@kento_jpn)と申します。Web制作やプログラミングの情報発信を幅広く行っております。
1. エディタを使ってデザインしてみよう！
今回はこちらのエディタ画面からスタートです。
ここにいろいろなオブジェクトを配置してデザインを作っていきます。
1.1. フレーム
初めにこのままでは何も配置されていないのでフレームを配置していきましょう。
フレームはその上にいろんなパーツを配置していくアートボードです。
ツールバーの左から３番目のアイコンをクリックし「Frame」を選択してください。
真ん中のキャンバスにドラッグすると、好きな大きさのフレームを作成できます。
今回はツールバーから選択しましたが、キーボードの「F」キーでもフレームを配置できます。
また、画面左のメニューにPhoneやDesktopなどがあるかと思いますが、
これを選択すると自動的に端末に応じたサイズで作成されるので便利です。
デザインを作成する際は基本的にこちらを使います。
1.2. シェイプツール
フレームを置いたら次はシェイプツールを使って様々なパーツを配置していきましょう。
四角形のボタンからRectangleを選択（またはキーボードのR)し、
フレームと同じ要領で配置します。
他にもElipseやPolygonを選択して配置していきます。
1.3. シェイプのプロパティを理解する
配置したら色や形を変えてみましょう。
編集したい図形をクリックして選択してウィンドウ右側にプロパティ画面が表示されることを確認してください。
それぞれの要素の解説は下記の通りです。
お好みで色々いじってみましょう！
- X,Y,W,H
X座標、Y座標、横幅、高さです。座標はフレームの左上が(0,0)になります。
単位はピクセルです。 - 回転と角丸
W,Hの下にあるのが回転と角丸です。指定した角度だけ回転します。 - Constraints
オートレイアウトという機能で使用します。今回は解説しませんので特に気にしなくて大丈夫です。 - Layer
こちらも別記事で解説します。 - Fill
図形を塗りつぶす色を指定します。 - Stroke
図形の枠線です。色や太さ、内線または外線を指定できます。 - Effects
図形に影などのエフェクトをかけることができます。 - Exports
作成したファイルは画像やPDFでエクスポート可能です。
筆者はこの様なものを作ってみました。
真ん中の図形の色がグラデーションになっているけどどうやってやるの？
次の章で詳しく解説していくね！
1.4. Color Picker
図形プロパティのFillの色部分をクリックすると下記の様なカラーピッカーが表示されます。
カラーピッカーの左上のタブメニューから「Liner」を選択すると線形のグラデーションができます。
図形内のポインタを調整することで度合いを変えることができます。
1.5. シェイプに写真を入れ込む
シェイプにはカラーだけでなく写真も入れることができるよ！
カラーピッカーの左上のタブメニューから「image」を選択し、
Chose imageを選択するとイメージをいれることができます。
画像を入れることができました！
2. まとめ
いかがでしたでしょうか。
今回はフレームとシェイプについて基本的な使い方をご紹介しました。
Figmaの機能はまだまだありますので今後の記事もお楽しみに！
コメント