![見出し画像](https://assets.st-note.com/production/uploads/images/146045584/rectangle_large_type_2_3695c1be80c1a86ebb63c771880270d3.png?width=1200)
Figmaでウェブサイトを作るぞ💪🌟
はじめに
本記事では、Figmaで作ったデザインをReactコードに変換し、Bitbucketでホスティングしてサイトに表示する手順について、各種ツールの導入手順、基本的な操作方法を交えて解説します。
Figma、Anima、Bitbucket(すべて後述)いずれもサブスクリプションプランが存在しますが、今回はフリープランを軸として進めていきます。
今回のゴール🏆
Figmaで制作したデザインを、Figmaのプレビュー通りにブラウザに表示する。
使用ツール
今回使用するツールは以下の通りです。
Figma - デザイン作成
Anima - 各種コードのエクスポート
テキストエディタ - コードの手直し
Bitbucket - ウェブサイトのホスティング
Figmaの導入💻🔧
Figmaは、デザイン、プロトタイピング、開発、フィードバック収集を1つのプラットフォームで行えるツールです。
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 がおすすめです。
FigmaにAnimaプラグインを追加することで、作成したデザインをHTML/CSS形式、React.jsx/tsx形式などで書き出すことができます。
Animaアカウント作成
以下のリンクから、Animaアカウントを作成しておきます。
フリープランの機能制限について
Animaのフリープランでできるのは生成したコードをプレビューするところまでです。コンポーネントを含めたプロジェクト全体のエクスポートはできません。
よって、今回は以下の手順で進めます。
Figmaでページのデザインを作成する
デザイン、コンポーネントを作成する
プロトタイプ機能でUIの動きを実装する
プレビュー機能でUIの動きを確認する
AnimaでReactのコードをゲットする
(Animaに課金しない場合)Animaのエクスポート画面で表示されたコードをテキストエディタに張り付ける
(Animaに課金した場合)Reactアプリをローカルに作成したのち、生成されたzipファイルをダウンロードして、必要な部分を置き換える
HTML/CSSファイルを手直しする
Figmaのプレビューを参考に、Reactで同じ機能を実装する
以上の手順で、フリープランのみでもプロジェクト全体を疑似的にエクスポートすることができます。なお、Animaに課金することで、手順を簡略化することができます。
Figmaでのデザイン制作🎨🖌️
今回作るデザイン
画面中央のボタンを押すと、Blue⇔Orangeと相互にページ遷移を行うシンプルなデザインを作ります。ボタンにはホバーアニメーションを設定します。
![](https://assets.st-note.com/production/uploads/images/145929711/picture_pc_fb9519d91114011f00589ed134c02a08.gif?width=1200)
デザインファイル作成
Figmaを起動すると、このような画面が表示されます。
![](https://assets.st-note.com/img/1719542291497-i5v9GD50tf.png?width=1200)
Team Projectを開いて、右上の+新規作成からデザインファイルを作成します。ページ上部の「無題」となっている部分から、デザインに名前を付けることができます。
![](https://assets.st-note.com/production/uploads/images/145455036/picture_pc_0513aa36a07b7f8aa08f6c4ab145f7a1.gif?width=1200)
左上のアイコンから新規フレームを作成し、画面右に表示されるプロパティからフレームのサイズを設定します。今回は「デスクトップ」を設定します。
画面左のレイヤータブで、作ったDesktop1を選択し、Ctrl+Rでレイヤー名を変更します。今回は「Blue」とします。
![](https://assets.st-note.com/production/uploads/images/145456912/picture_pc_eb7c80196f5137a108a7beb19c243ccd.gif?width=1200)
ページデザイン作成
レイヤータブでBlueレイヤーを選択した状態で、画面右の「デザイン」タブの「塗り」プロパティを選択し、背景色を変更します。
![](https://assets.st-note.com/img/1719546320733-yXh1gIYgQs.png?width=1200)
左上のシェイプツールから四角形を選択し、フレーム内に描画します。
プロパティタブで見た目を調整することができます。今回は角丸、制約、塗りの3つを設定しました。
制約はアンカーポイントのようなもので、画面サイズが変更された際、どの点を基準にオブジェクトを配置するか設定できます。今回は画面中央にボタンが表示されてほしいので、上下左右ともに「中央」を設定しました。
![](https://assets.st-note.com/production/uploads/images/145459112/picture_pc_4024f122e5e367f9c189d0e6abfaf24c.gif?width=1200)
同様に、左上のシェイプツールからテキストを選択し、「GO」と入力して色やサイズを調整し、先ほど作った四角形の上に配置します。
左側のレイヤータブから、四角形とテキストの名前を変更します。レイヤー名は、AnimaでReactのコードを生成する際に参照されるようなので、わかりやすい名前にしておくと良いです。今回は、「goframe」「gotext」と設定しました。
![](https://assets.st-note.com/production/uploads/images/145922856/picture_pc_1421f7c71197a9f021ba57861bc7bc88.gif?width=1200)
作成したgoframeとgotextを選択してCtrl+Gでグループ化し、グループの名前を「gobutton」と変更しておきます。
![](https://assets.st-note.com/production/uploads/images/145921673/picture_pc_7f72d779b107613e34c501f6543f3028.gif?width=1200)
レイヤータブのBlueフレームの左側にある▼を押してフレームを畳み、フレーム全体を複製します。レイヤータブでは、複製後のレイヤーが上、複製元のレイヤーが下に表示されます。
複製したフレームの名前を「Orange」に変更し、左側にある▶を押して中身を展開したのち、色やテキスト、レイヤー名を以下のように設定します。
![](https://assets.st-note.com/img/1719885837264-joCRK4KZF1.png)
![](https://assets.st-note.com/img/1719885907741-XTKcIaGmzL.png?width=1200)
UIのコンポーネント化
Blueフレームの中にあるgobuttonグループを選択し、画面上部の「コンポーネントを作成」ボタンでコンポーネント化します。
![](https://assets.st-note.com/production/uploads/images/145923827/picture_pc_a5ba5c47778b30241e273b93b6ae4cd2.gif?width=1200)
次にバリアントを追加していきます。バリアントはFigmaコンポーネントの機能の一つです。コンポーネントが複数の状態(バリエーション)を持つ場合、バリアントでグループ化することで、その状態をまとめて管理することができます。
今回はバリアントを使ってボタンのホバーアクションを実装していきます。ただし、ホバーアクションについてはAnimaで(課金後も)生成できないことがあります。
なので、ここでのホバーアクションは、あくまでFigmaのプレビュー上で動作イメージの確認をするという目的で作っていきます。
右側のデザインタブから「プロパティ」の横にある+を押し、「バリアント」を選択します。
キャンバス内に新しく表示された紫の+を押して、gobuttonバリアントを1つ追加します。
![](https://assets.st-note.com/production/uploads/images/145924258/picture_pc_d323ec31427dbc2499bdc7aa8f97dc5e.gif?width=1200)
新しく追加されたバリアントを、ホバー時用に変更していきます。
文字とフレームの色を変更したら、バリアント全体を選択し、デザインタブの「現在のバリアント」から、「プロパティ」となっているところを「button」、「バリアント2」となっているところを「hovered」に変更します。
同様に、デフォルトのバリアントの「現在のバリアント」を開き、「デフォルト」となっているところを「default」に変更します。
![](https://assets.st-note.com/production/uploads/images/145925893/picture_pc_b25a855f4e5210ad058ff425bf035245.gif?width=1200)
defaultスタイル適用時、マウスオーバーを検知してhoveredスタイルに切り替える設定をしていきます。
defaultバリアントを選択し、画面右側のプロトタイプタブから、インタラクションの右にある+を押し、「クリック時」を「マウスオーバー」、「なし」を「次に変更」、「default」を「hovered」にそれぞれ変更します。
![](https://assets.st-note.com/production/uploads/images/145926521/picture_pc_963cbe2761488066a86074c242db837a.gif?width=1200)
さらに、hoveredスタイル適用時、クリックを検知してOrangeフレームに遷移する設定をしていきます。
hoveredバリアントを選択し、プロトタイプタブを開いた状態で、キャンバス内のhoveredバリアントにカーソルを持っていくと、縁に〇が表示されます。それをドラッグして遷移先のフレームと繋げば、画面遷移の設定は完了です。ホバーアクション設定時と同様に、プロトタイプタブから設定することもできます。
![](https://assets.st-note.com/production/uploads/images/145927453/picture_pc_73ef9b0fee8fb34141479d9bd6cb1c71.gif?width=1200)
ここまでの作業で、ホバーアクションと画面遷移を実装したgobuttonコンポーネントを作成しました。
自作のコンポーネントは、画面左のアセットタブに入っています。
コンポーネントの本体はもう使わないのでフレーム外に配置して、フレーム内にはアセットタブからインスタンスを配置します。
![](https://assets.st-note.com/production/uploads/images/145928183/picture_pc_d3ed8c16a579e5f8535fdbde72fe66b8.gif?width=1200)
プレビューで動きを確認
ここまででの作業で、コンポーネントがどのような動きをするようになったかをプレビュー機能で確認していきます。
画面右上にある▷を押して、ホバーアクションおよび画面遷移が設定した通りに動くかを確認します。
![](https://assets.st-note.com/production/uploads/images/145928911/picture_pc_9a3ff31597bc0873b9802c8e36adb7b4.gif?width=1200)
確認ができたら、backbuttonについても同様にホバーアクションと画面遷移を設定し、画面にインスタンスを配置します。
以下のように設定できればOKです。
![](https://assets.st-note.com/production/uploads/images/145929843/picture_pc_6ccc1cc0d9b46def241880949521e59f.gif?width=1200)
Animaでコードを出力(無課金)🧑💻💸😢
Animaの導入
Figmaで先ほど作成したAnimatestを開きます。
画面上部のプラグインアイコンからAnimaを検索して開きます。ここでログインを求められたら、最初に作成したアカウントでログインしてください。
![](https://assets.st-note.com/production/uploads/images/145944844/picture_pc_b78525e64c2202147fc04cd233dca517.gif?width=1200)
これで、FigmaにAnimaを追加できました。
Animaからコードを張り付けるにあたって、出力したコードの貼り付け先となるReactアプリを作っておきます。
![](https://assets.st-note.com/img/1719898331926-I2yRDlqewd.png?width=1200)
コードの表示
Animaを開いた状態でFigmaのレイヤータブからBlueレイヤーを選択し、「Switch to component code inspect」の横にあるSwitchアイコンを押して、コード表示を切り替えます。HTML等の表示になっている場合は、プルダウンからReact表示に切り替えます。
![](https://assets.st-note.com/production/uploads/images/145945835/picture_pc_f49d68dddbd42a634faeaaaa7873214e.gif?width=1200)
Figma(Anima)とテキストエディタを並べて表示します。
Reactアプリのsrcフォルダに、必要なフォルダ、ファイルを作成します。
![](https://assets.st-note.com/production/uploads/images/145947068/picture_pc_c18435c5df111bdba95a1ed12b7abc32.gif?width=1200)
Animaのコードプレビュー画面で必要なコードを選択し、テキストエディタにドラッグして貼り付けます(Animaフリープランでは月間のコピペ回数に制限がありますが、この方法ですり抜けられます)。
![](https://assets.st-note.com/production/uploads/images/145947410/picture_pc_32b097458e186dbdc0417d781cbb91a4.gif?width=1200)
コンポーネントを含め、すべての必要なファイルを作成し、コードの貼り付けまで行います。
これでAnimaを用いたReactコードのエクスポートは完了です。
コードの手直し
Figmaで作ったデザインをAnimaを用いてReactアプリに変換しましたが、Animaで生成したコードがそのまま使えるわけではありません。
テキストエディタでReactアプリを開き、App.jsやindex.jsを編集します。また、必要な画像をアプリに追加し、インポートします。
さらに、実行時のエラーを見ながら、Figmaのプレビュー通りに動くよう調整していきます。
数回試行して、修正が必要だったものは以下の通りです。
ホバー、または画面遷移のどちらかが欠けている
画像や他のファイルへのパスが異なっている
switch文にケースが不足している
アプリのビルド
作ったReactアプリをウェブサイトにアップするために、ビルドしておきます。
Animaでコードを出力(課金)👩💻💰😊
コード出力
Figmaに戻ってAnimaを開き(無課金の場合を参照)、レイヤータブですべてのレイヤーを選択して「Sync」を押します。どの形式で出力するか聞かれるので、Reactを選択します。この時、プロジェクトの作成を求められたら、新規プロジェクトを作成します。
自動でコードが生成され、生成が終わるとロケットのアイコンとともに「Go to Anima」と出るので、クリックしてブラウザ版Animaを開きます。
![](https://assets.st-note.com/production/uploads/images/145937758/picture_pc_f0c5cece010cf251a29ddacf6458d9cb.gif?width=1200)
ブラウザ版Figmaを開くと以下のようになっています。
右上の「Expote Code」を押してzipファイルを生成し、ダウンロードします。
![](https://assets.st-note.com/production/uploads/images/145938908/picture_pc_bfe4c64e8808e91c44c7fc77c0718031.gif?width=1200)
これで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アカウントを作成してログインしたら、ワークスペースを作成します。ワークスペースは以下のリンクから作成することができます。
![](https://assets.st-note.com/production/uploads/images/146039176/picture_pc_bd152a5e029f4f728a00b40aaa8d8220.gif?width=1200)
Webサイトを公開する
以下の公式ドキュメントに沿って進めていきます。
ワークスペースが作成できたら、「Bitbucketに移動」からBitbucketを開き、公式ドキュメントの手順通りに進めていきます。
リポジトリには、Buildフォルダ(またはdistフォルダ)の中身すべてを追加します。
完成!✅🏆
公式ドキュメントに沿って、https://workspace_ID.bitbucket.ioに移動して、Figmaのプレビュー通りに動いているか確認します。
![](https://assets.st-note.com/production/uploads/images/146042181/picture_pc_41bf73e85aab2768366cb8818bcbf208.gif?width=1200)
今回サンプルで作ったサイトはこちらです。
参考文献
Figma:コラボレーションインターフェースデザインツール https://www.figma.com (最終閲覧日:2024年6月27日)
【Figma・FigJam】言語設定を日本語に切り替える方法を解説【2023最新】
https://yesmanblog.com/figma-japanese-ver(最終閲覧日:2024年6月27日)Anima: AI Design to Code | Figma to React | Figma to HTML
https://www.animaapp.com/ (最終閲覧日:2024年6月27日)🚀 はじめに
https://ja.parceljs.org/getting_started.html(最終閲覧日:2024年7月3日)ワークスペースへの参加、またはワークスペースの作成
https://support.atlassian.com/ja/bitbucket-cloud/docs/create-your-workspace/(最終閲覧日:2024年7月3日)Bitbucket Cloud で Web サイトを公開する
https://support.atlassian.com/ja/bitbucket-cloud/docs/publishing-a-website-on-bitbucket-cloud/(最終閲覧日:2024年7月2日)
この記事が気に入ったらサポートをしてみませんか?