Figmaは、図形の制作をする場合にも役立ちます。
個人的に、以前仕事で、SVGの画像制作をする時に、Figmaを使って、SVGを作った経験もあります。
そして、ホームページを制作している時に、その場で、メニューリンクのアイコンが欲しくなる場合に、Figmaには、それに適した機能がたくさん用意されています。
基本的には、
「文字 (Text)」
「図形 (Shape)」
「色 (Fill)」
「線 (Stroke)」
これらを使って、素材を作ったり、基本の装飾をすることができます。
前回学習した、構造体の中に配置する、Objectにあたる部分（とその属性）です。
今回は、これらについて、実際に触って学習してみましょう。
Text
文字は、
ツールバーからTextを選択し、Canvas上をクリックして文字を入力します。
とりあえず、「Figmaを学ぶ」と入力してみます。
入力した文字を選択すると、右側のプロパティからフォント、サイズ、太さ、行間などを変更できます。
文字も一つのObjectです。
つまり、これまで学んだ
- Object
- Layer
- Frame
と同じで、TextもObjectとして扱いましょう。
要するに、Frameの中にTextを置けば、
Frame
├─ Text
└─ Text
という構造になるという事です。
Web制作でいうHTMLの要素に似ていますが、
Figmaでは、デザインを構成するためのObjectとして扱います。
Shape
Shape（図形）には、たくさんの種類があります。
画面下部のツールバーをみると、種類がわかります。
日本語表記にしている人も多いのですが、それぞれのShapeの英語表記を覚えておくと便利です。
- 長方形 (Rectangle)
- 線 (Line)
- 矢印 (Arrow)
- 楕円 (Ellipse)
- 多角形 (Polygon)
- 星 (Star)
- 図形/動画... (Image/Video...)
できれば、システムは英語表記で使うと、ネット上のチュートリアルを使う時や、書籍に書いてある名称で混乱することが少なくなることが多いです。
ちなみに、言語切り替えは、ファイル一覧のページで以下のように遷移します。
ファイル一覧ページ(Home)
↓
左上のユーザーアイコンをクリック
↓
設定 (Settings)
↓
言語 (Language)
↓
English (Default)
長方形 (Rectangle)、楕円 (Ellipse)、線 (Line)
ツールバーからRectangleを選択し、Canvas上をドラッグするだけで、四角形が作られます。
Rectangleは、単なる四角形として使うだけじゃなく、次にような用途でも使えます。
・ボタン
・カード
・背景
・入力欄
・メニュー
・枠
四角形のようなシンプルな図形を組み合わせて、複雑なUIを表現していくわけです。
ちなみに、Shiftキーを押しながらドラッグすると、正方形が描けます。
同じように、「楕円」「線」も描いて試してみましょう。
色 (Fill)
図形を作ったら、
色を変更してみます。
Objectを選択すると、右側のプロパティに「塗り (Fill)」があります。
Fillは、そのObjectの「色」を指定するためのものです。
例えばRectangleのFillを変更すると、四角形の内部の色が変わります。
ここで重要なのは、
RectangleはObjectで、FillはAttribute（属性）
だということです。
RectangleというObjectの属性としてFillが設定されていると考えるといいでしょう。
線 (Stroke)
Fillとは別に
線 (Stroke)というのがあります。
Strokeは、Objectの輪郭線のことです。
四角形にStrokeを設定してみましょう。
1. 線 (stroke)の横にある「+」ボタンを押す。
2. 色、太さ、などをセットする。
fillを少し薄くすると、見栄えが良くなります。
「位置」の設定は、
- 内側
- 中央
- 外側
があり、素材のサイズや、周辺とのバランスに応じてセットしましょう。
その他の属性
Figmaでは、Objectに対して、細かく見た目を変える属性があります。
Opacity
透明度を意味するOpacityは、
100%を、不透明。
0%を、透明。
として、50%で、半透明になるように、パーセントで値をセットできます。
背景画像を、薄くしたり、
手前にくるオブジェクトで少しだけ後ろを透かして見せたい場合などにセットできます。
複数セットできる箇所があるので、理解して設定しましょう。
Effect
Figmaは、Objectにセットできるエフェクト効果がいくつかあります。
ざっくり下の２つぐらいが使えれば、問題内でしょう。
ドロップシャドウ
レイヤーブラー
あとがき
今回は、図形を使って、その属性をセットする手順などを学習してみましたが、
細かな作業が苦手な人は、少しストレスが溜まったかもしれません。
でも、Figmaでは、こういう細かな作業を積み重ねて、大きなデザインを構築していくというのが、主な流れになります。
この時点で、自分が向いている、向いていないを確認してみてもいいかもしれませんね。
向いていなくても仕事などで使う必要がある場合は、こう言う作業に慣れると、ストレスがたまらなくなるし、
面白みも感じるようになると思います。
0 件のコメント:
コメントを投稿