![](https://soft-no-sosa.com/wp/wp-content/uploads/2023/01/artboard_logo.png)
Figmaを使ってみようーHTML・CSS作成ー
![Figmaを使ってみよう HTML・CSS作成](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/a11b4bb3ba448d1fa402ac3dc62cc91f.png)
前回はFigmaでデザインを作成しましたが、今回はHTML・CSS作成について紹介してみたいと思います。
前回の記事でご紹介した内容を知っている前提になりますので、まだ前回の記事を見ていない方は下記よりご確認ください。
![](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/figma_2-300x185.png)
![](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/a565eff4102f6da9c0f7d78f676f13a8-300x185.png)
オススメの解説書はこちら!
画像の書き出し
コードを作るにあたってサイトの画像が必要なので書き出します。
書き出したい画像を選択し、右側の「デザイン」の「エクポート」から画像の保存形式を選び「Export」ボタンを押して保存します。
![画像の書き出し1](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/c6974fed2daff0fe28c18de87d3e8e03.png)
Overlayに登録
コードを生成に当たって「Overlay」という外部ツールに登録します。
①Overlaにアクセス
https://www.overlay-tech.com/にアクセスします。
②アカウント作成
メールアドレスとパスワードを入力し、「Create account」をクリックして登録します。
![Overlay登録](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/954f134fd06ba029c8de18e524103ca7.png)
③ログインする
「Go to Login」をクリックしてログインします。
![Overlayログイン](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/2f1d3937472cd2d9256ed0d618c1a48b.jpg)
④コードの設定
生成するコードの設定をします。
「project name」にプロジェクト名を入力します。
「Design Tool」は「Figma」を選びます。
「Frontend Framework」は「HTML/CSS」を選びます。
「HTML/CSS」を選ぶと「UI Framwork」が「CSS」に変わります。
最後に「Create」をクリックします。
![Overlay設定](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/bed13fe00b67bd15eab30093279038da.png)
⑤インストール
設定が完了すると以下のような画面が出ます。
「Get the plugin」ボタンをクリックするとFigmaのプラグインインストールページに飛ぶのでインストールします。
![Overlayプラグイン](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/3e370d4f3ebef9eac822521e8844b83b.jpg)
HTML・CSSの生成
プラグインをインストールしたらFigmaに戻ります。
①コンポーネント化
まずはコードを生成したいフレームを選びコンポーネント化します。
②プラグインからOverlayを選択
右クリックでプラグインから「Overlay (Figma components to React, Vue, HTML)」を選びます。
③「log in with browser」をクリック
プラグインを起動したら「log in with browser」をクリックします。
![Overlayプラグイン起動](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/62937640d935d0c38bb4e0079776ab2f.png)
④ログイン完了ページに飛ぶ
ログインが完了できたことを知らせるページに飛びます。
このサイトに飛んだらFigmaに戻ります。
![Overlayログイン完了](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/c127bba44aa002f0eb217495d0bc6fad.png)
⑤プラグインの再起動
Figmaに戻りHTML・CSSを生成したいフレームを選び「Overlay (Figma components to React, Vue, HTML)」のプラグインを再び起動するとHTML・CSSを生成されます。
⑥エクスポート先を確認
HTML・CSSのエクスポート先が出ます。
確認したら「Export」をクリックします。
![Overlayエクスポート先](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/9.png)
⑦スタイルシートの追加
カラーやフォントの設定をスタイルシートに追加するかどうか聞かれますので「Add All」をクリックして追加します。
![スタイルシート追加](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/10-1.png)
⑧エクスポートの完了
エクスポートが完了しました。
「See component」をクリックして確認します。
![Overlayエクスポート完了](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/11-1.png)
⑨コードのコピーとダウンロード
「See component」をクリックするとHTML・CSSがコピーできるページに飛びます。
このページからも画像保存が可能ですがレイヤー名と別の名前になるので注意してください。
![Overlayコード完成](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/12-1.png)
⑩コピーしたコードの貼り付け
コピーしたコードを貼り付けます。
※設定などは生成されないので自身で用意してください。
![コード貼り付け](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/c2d440bf1c630314b498502693d00092.jpg)
完成
HTML・CSS生成が完了しました。
ずれていたり、画像が設定されていないので修正が必要です。
中央揃えのCSSはmarginなどが多用されているのでこのままでは使えなそうです。
※画像のリンクはOverlayに上がっているリンクが貼られているのでDLした画像のパスに修正が必要です。
![完成](https://soft-no-sosa.com/wp/wp-content/uploads/2022/02/gif.gif)
オススメの解説書はこちら!