Figmaを使ってみる

Figmaはブラウザ上でもデザイン制作が行えるツールで、Figmaのアカウントを取得すれば利用できる点や、1つのファイルを複数のメンバーで編集できる点などが特長です。
今回はFigmaのアカウントを作成して、Figmaのデータからパーツを書き出す方法を試してみます。

アカウント作成

Figmaのページにアクセスして、右上の「サインアップ」をクリックします。

メールアドレスまたはGoogleアカウントで登録ができます。
今回はメールアドレスで登録します。

名前と職種を入力します。

登録したメールアドレスにメールが届くので、本文内の「メールを確認する」をクリックします。
これでアカウントの登録ができました。

次にチーム名を入力します。

コラボレーターの招待は必要に応じて行ってください。
今回はスキップしました。

チームプランを選択します。
今回はスターターを選択します。

これで一通りの設定ができました。
Figmaでデザインを選択します。

空白のキャンパスを選択します。

これでFigmaでデザインを始める準備ができました。

パーツの書き出し

簡単なパーツを作成して、書き出しを行ってみます。
左上のフレームを選択します。

右にフレームの種類が表示されるので、iPhone13 miniを選択します。

長方形ツールを選択して、長方形を描画します。

テキストツールを使って、長方形の上にテキストを追加します。

この長方形とテキストを書き出してみます。
左のレイヤーで該当のレイヤーを選択します。

選択したレイヤーで右クリック > 選択範囲のグループ化 を選択します。

右のプロパティ内の一番下にあるエクスポートから、書き出しの設定を行います。
設定完了後、エクスポートをクリックします。

該当のファイルの書き出しができて、ファイルがダウンロードされました。