今回やりたい事_説明
- figmaって使ったことないけど基本が知りたい。Part3 (Part1はこちらから) (Part2はこちらから)
今回の記事が参考になる方
- figmaは少しだけ、ほんの少しだけ利用した事がある人
- デザイナーではない人。
- webページのワイヤー（ラフ）作成はもっぱらExcel利用中の人。
▼環境案内▼
PC：Windows OS 10（非エンジニアなので細かいことは書かない。）
figma：無料プラン（すでにアカウント作成済み）
NETWORK：普通に自宅のWi-fi か 会社有線LAN環境
0．今日の記事で紹介するfigma機能
１.グリッド線を表示する方法
２.図形にカーブを付ける方法
３.コンテンツグループ化する方法
４.コンテンツをexportする方法
５.コンテンツコンポーネント化する方法
いずれも基本機能なのでサクサクご案内しますね。
１．figma起動してデザインファイルを開きグリット線を表示させる。
グリッド線を表示する方法ですが、フレームがあれば1か所選択するだけになります。
- まずは表示したいフレームを選択する。（画像の例だと「iPhone 13 / 13 Pro - 1」です。）
- そしてデザインパネルの「レイアウトグリッド」を選択する
はい、これでグリッド表示です。デフォルトは10pxずつなので変更したい時には細かく設定できます。
２．図形にカーブを付ける方法
図形が曲線だとすこし、バナー本物間がありますよね？その方法です。簡単です。
まずは長方形図形を追加します。
その後に、その図形を選択してデザインパネルを表示させます。（わかりやすいようにキャプチャでは「塗り＞赤」を選択しています。）
現在のままだと長方形の角はそのままです。
そこでデザインパネル上部の⌒のような部分に「20」と入れてみましょう。はい、出来ましたね。
このままだと少し味気ないので、デザインパネルにある「エフェクト」もクリックしてみましょう。
そして「塗り」の赤い■を選択して、50％に透過させてみました。
はい、これで角丸画像の出来上がりです。簡単ですよね。
３．コンテンツグループ化する方法
まあ、こちらは本当に選択するだけなんですが[なぜグループ化する必要があるのか？]を一緒に案内したいです。
私の見識なので必ず正しい、他にはない。というつもりはありませんのでその点はご了承ください。
- その1、コンテンツを扱いやすくしたい
- その2、Figmaソフトウェア内の視認性を良くしたい
だけっす。はい。では早速グループ化です。
先ほどの角丸にしたコンテンツに、テキストを載せました。
角丸コンテンツとテキストを、キーボードの「Shift」を押しながらマウスで選択すると二つだけが選択されていますので角丸コンテンツの上にマウスを合わせて「右クリック＞選択範囲のグループ化」です。
このようにグループ化しておくと、Figmaソフトの左側もすっきりしますよね？（視認性を良くしたい）
Group1とかになっている名称も変更できます。ButtonGとかね。
そしてグループ化していると、後で案内するエクスポートでも、BUTTONの見た目通り出力できますし、 Part2で案内した、プロトタイプでもボタン全体でアクションを設定できます。（コンテンツを扱いやすくしたい）
４．コンテンツをexportする方法
ここで補助線です。（いらねーって人はスキップしていいです～）
さっきからコンテンツって使っているけど、それ何？って人がいれば、説明します。
私はFigmaソフトウェアの左側に表示する、「レイヤー」で確認できる、各レコードをコンテンツと表現しています。
そしてexportって何なの？それは、[ファイル出力]の事をexportと表現しています。
早速、exportの方法を案内します。
まずボタン画像だけexportしたい時。簡単ですよ～。
対象コンテンツを選択する、「デザインパネル＞エクスポート」を選択する、最後「Group4をエクスポート」を選択する。以上！
PC上にファイルが出力できました。ね、簡単でしょ？
え、フレームまるまるを出力したいって？はい、簡単です。フレームを選択する「iPhone 13 / 13 Pro - 1」です。「デザインパネル＞エクスポート」を選択する、最後「Group4をエクスポート」を選択する。以上！
PC上にファイルが出力できました。ね、ね、簡単でしょ？ほんとFigmaって優秀だ。
もし、フレームを選択して、エクスポートしたのに、画像が一部表示していない画像が出力された方がいれば、解決方法をお伝えします。簡単です。
表示していないコンテンツを選択して、出力したいフレームの中に入れてください。
コチラです。
1つTipsです。コンテンツ通しの距離を知りたい時。これも簡単です。
コンテンツを選択します。
そしてキーボード「Alt」を押したまま、マウスをコンテンツ外に移動させます。
すると赤字で数字が表示します。単位はpxなのでタイミング良く利用くださいませ。
５．コンテンツコンポーネント化する方法
この記事の最後です。
コンポーネント化です。方法はグループ化と同じなんですが、コンポーネント化する目的は少しグループとは異なります。それは、
- その1、多用するコンテンツを一元管理したい
です。要は、多用するコンテンツをコンポーネント化しておけば後々楽だよ。って事なんですよね。なので必須じゃないけど、あるとうれしい。
ほかにもコンポーネントって共有できたりいろいろ機能あるみたいですが、それはpart4とか5とかで紹介します～。ではまず方法から。
コンポーネント対象のコンテンツを選択。複数あればキーボード「shift」押しながら複数選択して、右クリックで「コンポーネントの作成」を選択。
ここで注目はコンテンツのアイコンです。Groupとも違うものですよね？
これが「親コンポーネント」の証なんですよね。
親と表現したのは理由があって、この作成したコンポートネントを5個コピペして作成したとします。
すると親以外は違うアイコンになります。
この状態でもし、↑の色を全部変えたい。5個選択して色を変更するのは面倒だ！
そんな時に親コンポーネントを変更しただけで、子も連動して変わります。じゃじゃーーーん。
はい、便利な事この上なし。皆さんもぜひコンポーネントを利用して時短でワイヤーフレームを作成しちゃいましょう。脱Ｅｘｃｅｌです。
では今日はここまでです。次回に期待してお待ちくださいませ。