#1 ブログを作った話 - Figmaを使ったブログデザインの進め方

当ブログ(sumii.io)を、Figma, Nuxt.js, Contentful, Netlifyを使って構築した方法を各パートにわけて紹介していきます。

今回はFigmaを使った、sumii.ioのデザインの進め方を紹介します。

Figmaとは

SketchやAdobe XDのようなデザインツールで、操作感もそこまで大差ないので違和感なく使えます。
Figmaが他のデザインツールと一線を画す機能がリアルタイムの共同編集機能です。
今回はこの機能を使用していないので説明はしませんが、権限を付与すれば誰でもリアルタイムで同時に共同編集作業をすることができる便利な機能です。

Projectの開始

アカウントを作成したらプロジェクトを作成しましょう。
ダッシュボードにある+ New Fileをクリックすると、白紙のデザイン画面が表示されます。

上部メニューの「Untitles」とある部分をクリックするとプロジェクト名を入力できますので、設定しておきましょう。

Componentを作る

FigmaにはComponentという概念があり、ページ間で共通したデザインの要素を登録し、使う際は一覧から簡単に取り出すことができる機能です。
SketchのSymbolと同様の機能です。

今回はわかりやすく Components という名前のページを作成し、以下のようにComponentをまとめていきます。

Embedded content: https://www.figma.com/file/DijDba1ikJCRyYDaQMRmCznK/sumii.io?node-id=2%3A93

Componentの登録方法

Componentとして登録した要素を作成したら、要素を選択しalt + command + Kを押します。
すると左メニューの選択した要素のレイヤーの見た目が以下のように変わります。

figma layer changed style(1)

これでComponentに登録されました。

Pageを作る

Componentが揃ったらページをデザインしていきます。
Pagesというページを新しく追加し、Componentと同じようにまとめます。

Pages に移動したらベースとなるFrameを配置します。Frameのサイズは目的のデバイスを考慮して設定してください。

Componentを配置

ベースとFrameを配置したら、Componentを配置していきます。
alt + 2で左メニューがComponent一覧に切り替わるので、該当のComponentをドラッグアンドドロップで配置するだけです。

こうしてPageにComponentを配置していくことでブログのデザインを作っていきます。
最終的なPageのデザインは以下のようになります。

Embedded content: https://www.figma.com/file/DijDba1ikJCRyYDaQMRmCznK/sumii.io?node-id=0%3A1

まとめ

今回紹介したデザインフローはあくまで私個人のやり方なので、参考程度に見てもらえればと思います。
また、シンプルなブログのデザインなのでComponentの数も少なく、今回のフローが適していましたが、規模が大きい複雑なWebサイトのデザインになってくると別のフローの考案や、リアルタイム共同編集機能が活躍しそうです。

次回は#2で、Nuxt.jsの開発環境の構築方法を紹介します。