2021/08/29

figmaでwebの画面を作ってみる

@ 酒井悠宇

https://www.youtube.com/watch?v=JuaXJ4DgItY&t=354s

この人の動画でfigmaで実際にwebの画面を作ってみたいと思います。

完成図はこちらから
https://www.figma.com/file/zfjv2uOL1lZRjGYMOOth8U/Web?node-id=5%3A402

大事だと思ったところをメモ的に書いていきます。

grid機能

figmaにはgrid機能があります。
フレームを選択した後、右側のLayout gridからgridの設定を行うことができます。

gridの方向、色、透明度、幅、間隔を柔軟に変更できます。

「control + g」でgridの表示・非表示を切り替えられます。

autoLayout機能

figmaにはautoLayout機能というものがあります。
要素を複数選択の後、「shift + a」でautoLayauto機能をonにすることができます。

要素の並ぶ方向や、要素同士の間隔、要素の並べ替えなどを簡単に行えるようになります。

plugin

figmaにはさまざなpluginが用意されています。
プラグインとは、簡単に言えば、「めんどくさい作業を簡単に行えるようにしてくれるもの」です。

今回はUnsplashというフリー画像サイトのプラグインをfigmaに導入してみました。

デスクトップの場合であれば、figmaのトップページの左側のサイドバーにある「Community」をクリックした後、トップバーから「Plugins」を選択して、「Serch」から「unsplash」と検索するとfigma用のunsplashのプラグインをダウンロードできます。

インストールしたプラグインは、「control + クリック」で表示されるメニューバーから選択することで使用できるようになります。

unsplashのプラグインを使えば、figmaの作業スペースから画像を検索してきて、すぐに使用することができるようになります。
いちいちブラウザから検索して、ダウンロードして、みたいな手間が省けるのでいい感じですね。

※自分だけかもしれないですけどこのunsplashのプラグイン、画像を選択すると「作業スペースに画像は表示されるんだけどファイルを見てみると画像が存在しない」みたいな挙動が何回か起こったので使わない方がいいかもです。

文字の調整

サイドバーの「Text」右下の「...」から文字の細かい調整を行うことができます。
英字なら、大文字だけとか、小文字だけとか、大文字区切りとか、もっといろんな項目がありますが、そういった感じのことを指定することができます。

groupのコンポーネント化

figmaにはコンポーネントという機能があります。Reactのコンポーネントと似たような感じです。要素の位置やサイズを共通化できます。

使い方としては要素を複数選択の後「command + g」で要素をgroup化します。
するとトップバーに菱形四つのマークが表示されます。
これをクリックするとそのグループがコンポーネントとなります。

紫の枠になればgroupのコンポーネント化成功です。

コンポーネントを複製すると、複製された要素は子コンポーネントとなります。
親コンポーネントの変更は子コンポーネントに反映されますが、子コンポーネントの変更は親コンポーネントには反映されません。
子コンポーネントで変更できるのはコンポーネント内の要素の内容(文字、文字色...)のみで、位置を変更することはできません。

コンポーネントから複製して要素を作ることで統一感のあるレイアウトが簡単に作れるようになります。

autoLayout(paddingの調整)

セクションごと選択して「shift + a」でauto-layout化することで、paddingを簡単に調整できるようになります。

スタイルだけコピー

「option + command + c」で要素をコピーして、「option + command + v」でペーストすることで、要素のスタイルだけをコピーすることができます。

以下の例で言えば、下のダミーテキストの文字サイズを「最新ニュース」という文字と同じにしたい場合には、
「option + command + c」で「最新ニュース」をコピーして、ダミーテキストに「option + command + v」でペーストすれば、

こんな感じになります。

これは結構使えそうですね。

frameを使用したボタンレイアウトの作成

frameを使用するととても簡単にボタンレイアウトを作ることができます。

まずは「f」キーを押してframeを作ります。
frameのAuto layoutをonにします。

Auto layoutをonにしたframeにテキストをドラッグ&ドロップすると文字に反応してframeの大きさも変化します。

あとはframeのAuto layoutでpaddingを調整したり丸みを調整したりすれば完成です。