見出し画像

Figmaでウェブサイトを作るぞ💪🌟

𝕊𝕙𝕚𝕟𝕚𝕟𝕘✬𝔾𝕖𝕟𝕖𝕣𝕒𝕥𝕚𝕠𝕟

はじめに

　本記事では、Figmaで作ったデザインをReactコードに変換し、Bitbucketでホスティングしてサイトに表示する手順について、各種ツールの導入手順、基本的な操作方法を交えて解説します。
　Figma、Anima、Bitbucket(すべて後述)いずれもサブスクリプションプランが存在しますが、今回はフリープランを軸として進めていきます。

今回のゴール🏆

Figmaで制作したデザインを、Figmaのプレビュー通りにブラウザに表示する。

使用ツール

今回使用するツールは以下の通りです。

  • Figma - デザイン作成

  • Anima - 各種コードのエクスポート

  • テキストエディタ - コードの手直し

  • Bitbucket - ウェブサイトのホスティング

Figmaの導入💻🔧

Figmaは、デザイン、プロトタイピング、開発、フィードバック収集を1つのプラットフォームで行えるツールです。

出典｜figma.com

　Figmaは、ブラウザ上、またはデスクトップアプリでデザインができるツールです。
　大きな特徴の1つが「プロトタイプ」という機能で、ノーコードでUIの機能を視覚的に表現することができ、特にウェブサイトのデザインを作るにあたり、非常に有用です。

アカウント作成

Figmaのトップページにアクセスし、「無料で始める」からアカウントを作成します。

Figma(デスクトップアプリ)のダウンロード

　Figmaはブラウザ版でも機能面、操作面ともに遜色なく動作しますが、今回はFigmaのデスクトップアプリをダウンロードします。

　まず、以下のダウンロードサイトからインストーラをダウンロードします。

　ダウンロードができたら、Figmasetup.exeを実行し、デスクトップアプリをインストールします。
　途中でログインを求められたら先ほど作成したアカウントでログインしてください。

　Figmaを日本語化したい場合、こちらのサイトを参考にしてください。

Animaについて🦾🤖

　Figmaは便利なデザインツールですが、エクスポート形式が限られている点が少し残念です。デフォルトでは、PNG、JPG、SVG、PDF形式のいずれかでしか書き出すことができません。

そこで、それを解決するのがAnimaというプラグインです🎉

Anima概要

Figmaのデザイン・トゥ・コードの公式パートナーであるAnimaは、市場で最も先進的なデザインツール内で、比類のないコード品質と機能サポートを備えたクリーンで機能的なReact、HTML、Vueを生成します。JavaScript や TypeScript がお好きな方なら、Anima for Figma がおすすめです。

出典｜animaapp.com

　FigmaにAnimaプラグインを追加することで、作成したデザインをHTML/CSS形式、React.jsx/tsx形式などで書き出すことができます。

Animaアカウント作成

以下のリンクから、Animaアカウントを作成しておきます。

フリープランの機能制限について

　Animaのフリープランでできるのは生成したコードをプレビューするところまでです。コンポーネントを含めたプロジェクト全体のエクスポートはできません。
　よって、今回は以下の手順で進めます。

  • Figmaでページのデザインを作成する

    1. デザイン、コンポーネントを作成する

    2. プロトタイプ機能でUIの動きを実装する

    3. プレビュー機能でUIの動きを確認する

  • AnimaでReactのコードをゲットする

    1. (Animaに課金しない場合)Animaのエクスポート画面で表示されたコードをテキストエディタに張り付ける

    2. (Animaに課金した場合)Reactアプリをローカルに作成したのち、生成されたzipファイルをダウンロードして、必要な部分を置き換える

  • HTML/CSSファイルを手直しする

    1. Figmaのプレビューを参考に、Reactで同じ機能を実装する

以上の手順で、フリープランのみでもプロジェクト全体を疑似的にエクスポートすることができます。なお、Animaに課金することで、手順を簡略化することができます。

Figmaでのデザイン制作🎨🖌️

今回作るデザイン

　画面中央のボタンを押すと、Blue⇔Orangeと相互にページ遷移を行うシンプルなデザインを作ります。ボタンにはホバーアニメーションを設定します。

完成作品

デザインファイル作成

　Figmaを起動すると、このような画面が表示されます。

Figmaのホーム画面

　Team Projectを開いて、右上の+新規作成からデザインファイルを作成します。ページ上部の「無題」となっている部分から、デザインに名前を付けることができます。

デザインファイルの新規作成

　左上のアイコンから新規フレームを作成し、画面右に表示されるプロパティからフレームのサイズを設定します。今回は「デスクトップ」を設定します。
　画面左のレイヤータブで、作ったDesktop1を選択し、Ctrl+Rでレイヤー名を変更します。今回は「Blue」とします。

Blueレイヤーを作成

ページデザイン作成

　レイヤータブでBlueレイヤーを選択した状態で、画面右の「デザイン」タブの「塗り」プロパティを選択し、背景色を変更します。

背景色を変更

　左上のシェイプツールから四角形を選択し、フレーム内に描画します。
プロパティタブで見た目を調整することができます。今回は角丸、制約、塗りの3つを設定しました。
　制約はアンカーポイントのようなもので、画面サイズが変更された際、どの点を基準にオブジェクトを配置するか設定できます。今回は画面中央にボタンが表示されてほしいので、上下左右ともに「中央」を設定しました。

四角形を配置

　同様に、左上のシェイプツールからテキストを選択し、「GO」と入力して色やサイズを調整し、先ほど作った四角形の上に配置します。

　左側のレイヤータブから、四角形とテキストの名前を変更します。レイヤー名は、AnimaでReactのコードを生成する際に参照されるようなので、わかりやすい名前にしておくと良いです。今回は、「goframe」「gotext」と設定しました。

テキストを挿入してレイヤー名を変更

　作成したgoframeとgotextを選択してCtrl+Gでグループ化し、グループの名前を「gobutton」と変更しておきます。

レイヤーのグループ化

　レイヤータブのBlueフレームの左側にある▼を押してフレームを畳み、フレーム全体を複製します。レイヤータブでは、複製後のレイヤーが上、複製元のレイヤーが下に表示されます。

　複製したフレームの名前を「Orange」に変更し、左側にある▶を押して中身を展開したのち、色やテキスト、レイヤー名を以下のように設定します。

レイヤータブ
画面全体

UIのコンポーネント化

　Blueフレームの中にあるgobuttonグループを選択し、画面上部の「コンポーネントを作成」ボタンでコンポーネント化します。

グループのコンポーネント化

　次にバリアントを追加していきます。バリアントはFigmaコンポーネントの機能の一つです。コンポーネントが複数の状態(バリエーション)を持つ場合、バリアントでグループ化することで、その状態をまとめて管理することができます。

　今回はバリアントを使ってボタンのホバーアクションを実装していきます。ただし、ホバーアクションについてはAnimaで(課金後も)生成できないことがあります。
　なので、ここでのホバーアクションは、あくまでFigmaのプレビュー上で動作イメージの確認をするという目的で作っていきます。

　右側のデザインタブから「プロパティ」の横にある＋を押し、「バリアント」を選択します。
　キャンバス内に新しく表示された紫の＋を押して、gobuttonバリアントを1つ追加します。

gobuttonバリアントの追加

　新しく追加されたバリアントを、ホバー時用に変更していきます。
　文字とフレームの色を変更したら、バリアント全体を選択し、デザインタブの「現在のバリアント」から、「プロパティ」となっているところを「button」、「バリアント2」となっているところを「hovered」に変更します。
　同様に、デフォルトのバリアントの「現在のバリアント」を開き、「デフォルト」となっているところを「default」に変更します。

バリアントのプロパティを設定

　defaultスタイル適用時、マウスオーバーを検知してhoveredスタイルに切り替える設定をしていきます。
　defaultバリアントを選択し、画面右側のプロトタイプタブから、インタラクションの右にある＋を押し、「クリック時」を「マウスオーバー」、「なし」を「次に変更」、「default」を「hovered」にそれぞれ変更します。

スタイル切り替えの設定

　さらに、hoveredスタイル適用時、クリックを検知してOrangeフレームに遷移する設定をしていきます。
　hoveredバリアントを選択し、プロトタイプタブを開いた状態で、キャンバス内のhoveredバリアントにカーソルを持っていくと、縁に〇が表示されます。それをドラッグして遷移先のフレームと繋げば、画面遷移の設定は完了です。ホバーアクション設定時と同様に、プロトタイプタブから設定することもできます。

画面遷移の設定

　ここまでの作業で、ホバーアクションと画面遷移を実装したgobuttonコンポーネントを作成しました。

　自作のコンポーネントは、画面左のアセットタブに入っています。
　コンポーネントの本体はもう使わないのでフレーム外に配置して、フレーム内にはアセットタブからインスタンスを配置します。

gobuttonのインスタンスを配置

プレビューで動きを確認

　ここまででの作業で、コンポーネントがどのような動きをするようになったかをプレビュー機能で確認していきます。
　画面右上にある▷を押して、ホバーアクションおよび画面遷移が設定した通りに動くかを確認します。

gobuttonの動きを確認

　確認ができたら、backbuttonについても同様にホバーアクションと画面遷移を設定し、画面にインスタンスを配置します。

　以下のように設定できればOKです。

gobuttonとbackbuttonで相互に画面遷移

Animaでコードを出力(無課金)🧑‍💻💸😢

Animaの導入

　Figmaで先ほど作成したAnimatestを開きます。
　画面上部のプラグインアイコンからAnimaを検索して開きます。ここでログインを求められたら、最初に作成したアカウントでログインしてください。

　これで、FigmaにAnimaを追加できました。

　Animaからコードを張り付けるにあたって、出力したコードの貼り付け先となるReactアプリを作っておきます。

空のReactアプリ

コードの表示

　Animaを開いた状態でFigmaのレイヤータブからBlueレイヤーを選択し、「Switch to component code inspect」の横にあるSwitchアイコンを押して、コード表示を切り替えます。HTML等の表示になっている場合は、プルダウンからReact表示に切り替えます。

blueレイヤーのコードを表示

　Figma(Anima)とテキストエディタを並べて表示します。
Reactアプリのsrcフォルダに、必要なフォルダ、ファイルを作成します。

必要なファイルを作成

　Animaのコードプレビュー画面で必要なコードを選択し、テキストエディタにドラッグして貼り付けます(Animaフリープランでは月間のコピペ回数に制限がありますが、この方法ですり抜けられます)。

ズルめのコピペ

　コンポーネントを含め、すべての必要なファイルを作成し、コードの貼り付けまで行います。
　これでAnimaを用いたReactコードのエクスポートは完了です。

コードの手直し

　Figmaで作ったデザインをAnimaを用いてReactアプリに変換しましたが、Animaで生成したコードがそのまま使えるわけではありません。
　テキストエディタでReactアプリを開き、App.jsやindex.jsを編集します。また、必要な画像をアプリに追加し、インポートします。
　さらに、実行時のエラーを見ながら、Figmaのプレビュー通りに動くよう調整していきます。

数回試行して、修正が必要だったものは以下の通りです。

  • ホバー、または画面遷移のどちらかが欠けている

  • 画像や他のファイルへのパスが異なっている

  • switch文にケースが不足している

アプリのビルド

　作ったReactアプリをウェブサイトにアップするために、ビルドしておきます。

Animaでコードを出力(課金)👩‍💻💰😊

コード出力

　Figmaに戻ってAnimaを開き(無課金の場合を参照)、レイヤータブですべてのレイヤーを選択して「Sync」を押します。どの形式で出力するか聞かれるので、Reactを選択します。この時、プロジェクトの作成を求められたら、新規プロジェクトを作成します。
　自動でコードが生成され、生成が終わるとロケットのアイコンとともに「Go to Anima」と出るので、クリックしてブラウザ版Animaを開きます。

Reactコードを生成

　ブラウザ版Figmaを開くと以下のようになっています。
右上の「Expote Code」を押してzipファイルを生成し、ダウンロードします。

zipファイルのダウンロード

　これでAnimaで書き出したReactコードをアプリにすることができました。

スクリーンがロックされている場合

　Animaはプランによってプロジェクト数、スクリーン数に上限が設けられています。上限を超えた分はロックされて使えなくなってしまうので、使わなくなったプロジェクト、スクリーンは削除するかアーカイブしておく必要があります。

アプリのビルド

　作ったReactアプリをウェブサイトにアップするために、ビルドしておきます。
　Animaで書き出したzipファイルをビルドする際は、create-react-appやViteではなく、Percelというビルドツールを使用します。

　以下のコマンドで最新版のPercelをインストールします。

npm install --save-dev parcel

　ビルド前にローカルで実行したい場合はpackage.jsonを編集する必要があります。Animaで生成したpackage.jsonには、startコマンドが含まれていないため、scriptの中に以下の通り追加します(1行目が追加部分)。
　また、ビルドにあたって、buildコマンドも一部修正します。Animaで生成したbuildコマンドに含まれている --no-scope-hoistは、最新のPercelではサポートされていないようなので削除します(2行目の末尾を削除)。

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build --public-url ./",
    "dev": "parcel",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  }

　アプリのビルドは、他のツールと同様にnpm run buildコマンドで行います。
　ビルドしたファイルは、「dist」という名前のフォルダに格納されます(「Build」ではありません)。

　Percelについての詳細は以下のサイトを参照してください。

Bitbucketにアップ🌐⬆️

　ここまでの作業で、Figmaで作成したデザインをAnimaでコード化し、ウェブサイトにアップするためにビルドを行いました。

　ここからは、Bitbucket Cloudというサービスを利用して、実際にウェブサイトを公開していきます。

ワークスペースの作成

　Atlassianアカウントを作成してログインしたら、ワークスペースを作成します。ワークスペースは以下のリンクから作成することができます。

Bitbucketワークスペースを新規作成

Webサイトを公開する

以下の公式ドキュメントに沿って進めていきます。

　ワークスペースが作成できたら、「Bitbucketに移動」からBitbucketを開き、公式ドキュメントの手順通りに進めていきます。
　リポジトリには、Buildフォルダ(またはdistフォルダ)の中身すべてを追加します。

完成！✅🏆

　公式ドキュメントに沿って、https://workspace_ID.bitbucket.ioに移動して、Figmaのプレビュー通りに動いているか確認します。

左がFIgma、右がブラウザです。

　今回サンプルで作ったサイトはこちらです。

参考文献




いいなと思ったら応援しよう！