前回はFigmaを使うべき理由を説明しました。連載の2回目となる本記事では、Figmaの基本的な使い方を説明します。 今回の記事ではデザインツールを使ったことのない人向けに知ってほしいこと、Figmaの画面説明やレイヤーの設置・編集方法といったFigmaでUIモックを作るための機能について説明します。 SketchやAdobe XDのようなデザインツールの基本的な使い方に慣れている方は、この記事を飛ばして次回の記事を読み進めることをおすすめします。 UIモックを作るにあたって 本連載は主にソフトウェアエンジニアを対象にしています。そこで、UIデザインツールを使ったことのない人に知ってほしいことをお伝えしておきます。 基本的に（凝ったデザインでなければ）UIモックはシェープとテキストといったレイヤーで構成されています。シェープは四角形や円形などの形状をもつもの、テキストは文字通り文字を示しています。レイヤーは日本語にすると「層」で積み重なっていくイメージです。 シェープには塗りや枠線、影などを付ける事ができ、テキストはフォントや文字サイズ・太字などの装飾をつけ、それらをうまく並べてUIモックを構成します。 簡単に言えばUIモックはシェープとテキストといったレイヤーで構成されている画像と思うといいでしょう。初めてUIデザインツールを使う人は、出来ることが多いツールを見て戸惑うかもしれませんが、レイヤーを積み重ねていくイメージで触ると始めやすいと思います。 Figmaをはじめよう それではFigmaを触っ
↧