SIOS Tech. Lab | エンジニアのタメになるOSS・クラウド・認証の技術トピックス 
今回はFigmaを触れるから使えるようになるための第一歩として記事を出してみました。フロントエンジニアとしては、マストの技術？になってきているように感じます。というかフロントエンジニアとして必要な技能が、徐々に多くなってきているような気がするのですよ！でも視覚的に出来上がっていく楽しみがありますね。
ご挨拶
どもども！フロントとして1年が経過したような気がする龍ちゃんです。時が経つのは早いですね。ぽけ～っとしていたらあっという間に2年目になってしまいそうで、冷や汗を流しています。
今回は、僕がいろんなところで活用しているFigmaについてのお話です。本当にFigmaさんには業務からブログや広告までいろんなところでお世話になっています。プイっと振り分けられた仕事も、Figmaと遊んでいたおかげで乗り切ることができました。これで自分のアカウント周りは無料枠であるのは申し訳ないレベルですね。なので、Figmaを活用していくための紹介ブログを書いていこうと思います。
取り扱う内容としては以下になります。
- ちゃんとコンポーネントに登録しよう
- 色やテキストでよくつかうパターンは登録しよう
- オートレイアウトを使おう
今回も初心者さん向けの記事になっています。「使えているようで使えていない」そんな瞬間を5回ほど乗り越えたので、ちょっと使える人になっていると思っています。それでは初めて行きます。
ちゃんとコンポーネントに登録しよう
皆さんコンポーネント化してますか？ただの図形配置ツールから、WEBデザインツールとしての活用を覚える第一歩が「コンポーネント」だと考えています。普段、ReactやVueを使っている身としては、コンポーネントという概念を理解しやすかったです。
初心者さんのために説明すると、テンプレート（ひな形）という表現が一番正しいと思います。僕がさっき感じた利点をまとめておきます。
「コンポーネント」を作成することは、短期的に見れば手間のかかる作業です。長期的な側面で見れば、やらない手はないです。小話ですが、Figmaで画面仕様書を作っていたのですが「画面ごと」コンポーネント化しておけばよかったと後悔しています。想像していたよりも変更が多かったので、泣きながら資料改定を行っていました。
それでは、「コンポーネント」について順を追って説明していきたいと思います。コンポーネント化したいオブジェクトを指定して、下の画面の赤枠の部分をクリックして下さい。
下に記載している画像のように、紫の枠線になれば成功です。
画面的に差異はありませんね。コンポーネントへのアクセスは画面左側の「アセット」をクリックして「ローカルコンポーネント」から探してドラッグ＆ドロップをすると使用できます。
ここまで紹介して、利点がわかりにくいと思ったので動画を撮影してみました。今回は入門ということで、コンポーネント化するという話だけで止めておきます。
まだまだ、いろいろな機能があるので「ちゃんとコンポーネント使えているか？」という記事を出す予定です。
色やテキストでよく使うパターンは登録しよう
さて次は、お気に入りの色やフォントスタイルを保存しておこうという話になります。パターン登録の利点としては以下になります。
やはりここも大きなシステムになるほど効果を発揮していきます。WEBデザインをしていると、絶妙なサイズミスなどがあったりします。これに後から気づいて激萎えした経験あります。なので、先にデザインシステムを組んでからWEBデザインに入ることを強くお勧めしています。きっと世の中の開発はそういう風に進んでいるんでしょう…..
では、色のパターン登録から始めましょう。
画面の通りに進んでもらえれば色を登録することができます。使用方法としては、色を指定する部分にホバーして4つの□マークをクリックするとライブラリが表示されます。
あとはプイっとできます。
次に、テキストのパターン選択です。
画面の通りに設定してもらえれば設定が成功するかと思います。登録したパターンは色と同様の手順で使用することができます。
あらかじめ登録しておくことで時短にもなるので超絶おすすめです。気が付いたらやるようにしましょう。
オートレイアウトを使おう
さてさて、次はオートレイアウトについて解説していきます。今回取り扱っているトピックの中で、最も感動した内容になります。「オートレイアウト」を使うことができたら、Figmaの初心者からは一歩踏み出すことができていると思います。
CSSを書いたことがある人は、「Flex Box」をイメージしてもらえればすんなり使うことができると思います。オートレイアウトを使うことのメリットとしては以下になります。
オートレイアウトの利点としては、自分で考える過程を省略することができるという点です。幅や要素間の間隔を自動で調整をしてくれるので、要素を追加すれば反映されます。Figmaの機能で「均等配置」という機能がありますが、こちらでは要素を追加した際に再調整が必要になります。なので、可変要素の場合は「オートレイアウト」を使用しましょう。
では、オートレイアウトの適応方法について説明します。「オートレイアウト」を適応したいフレームを指定して、画面右側の赤枠をクリックしてください。
下の画面が出てくれば、成功しています。画面が切り替わった際の要素の説明を行います。
内部の要素としては、「Flex Box」で設定できる項目と大差ありません。直感的に配置の向きや要素間の幅などは設定することができると思います。「margin縦横」に関しても、CSSを書いたことがあれば想像しやすいかと思います。
ここで鬼門となるのが、配置の基準になります。
ここはいろいろクリックしてみるとよいかもしれません。「中心に寄せる」や「右寄せ」などはイメージがしやすいと思います。ダブルクリックした場合は、均等配置になります。
深堀していけば、もっと書くことができます。ですが、公式の説明はすこぶるわかりやすいので置いておきますね（公式のヘルプセンター）。体当たりで使ってみればわかりますよｗｗ。
僕が遊んでいる動画を上げておきます。使って体当たりで覚えていきましょう。
終わりに
お疲れ様です。初めてFigmaに関するブログを出しました。去年一年間で一番成長した技能は、Figmaを扱う能力だと思います。フロントにかかわる人は扱えて損はないので、まだ触ったことがない人は触っていきましょう。触ったら、使えるようになるまで使い倒すことをお勧めします。偉そうなことを言っていますが、知らない機能はまだまだあるので勉強を重ねていきます。
勉強の過程で気づいたことは、ブログに出していく予定なのでこれからもよろしくお願いします。
最近は輪読会で、泣きながらOAuth認証についてまとめていました。結構お気に入りの図ができたので、是非！図だけでも見ていってください。
フリー素材を提供してくれるサイトは神だなと思います。これからもお世話になっていきたいです。
ではまた～
Be the first to comment