Adobeスクールパートナー(ブロンズ)

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Figmaを使ってみよう HTML・CSS作成

Others

Figmaを使ってみようーHTML・CSS作成ー

使用ソフト: Figma Overlay DreamweaverCC2018  

前回はFigmaでデザインを作成しましたが、今回はHTML・CSS作成について紹介してみたいと思います。

前回の記事でご紹介した内容を知っている前提になりますので、まだ前回の記事を見ていない方は下記よりご確認ください。

画像の書き出し

コードを作るにあたってサイトの画像が必要なので書き出します。
書き出したい画像を選択し、右側の「デザイン」の「エクポート」から画像の保存形式を選び「Export」ボタンを押して保存します。
画像の書き出し1

Overlayに登録

コードを生成に当たって「Overlay」という外部ツールに登録します。

https://www.overlay-tech.com/にアクセスします。

②メールアドレスとパスワードを入力し、「Create account」をクリックして登録します。
Overlay登録

③「Go to Login」をクリックしてログインします。Overlayログイン

④生成するコードの設定をします。
「project name」にプロジェクト名を入力します。
「Design Tool」は「Figma」を選びます。
「Frontend Framework」は「HTML/CSS」を選びます。
「HTML/CSS」を選ぶと「UI Framwork」が「CSS」に変わります。
最後に「Create」をクリックします。
Overlay設定

⑤設定が完了すると以下のような画面が出ます。
「Get the plugin」ボタンをクリックするとFigmaのプラグインインストールページに飛ぶのでインストールします。
Overlayプラグイン

HTML・CSSの生成

プラグインをインストールしたらFigmaに戻ります。
①まずはコードを生成したいフレームを選びコンポーネント化します。

②右クリックでプラグインから「Overlay (Figma components to React, Vue, HTML)」を選びます。

③プラグインを起動したら「log in with browser」をクリックします。
Overlayプラグイン起動

④ログインが完了できたことを知らせるページに飛びます。
このサイトに飛んだらFigmaに戻ります。
Overlayログイン完了

⑤Figmaに戻りHTML・CSSを生成したいフレームを選び「Overlay (Figma components to React, Vue, HTML)」のプラグインを再び起動するとHTML・CSSを生成されます。

⑥HTML・CSSのエクスポート先が出ます。
確認したら「Export」をクリックします。
Overlayエクスポート先

⑦カラーやフォントの設定をスタイルシートに追加するかどうか聞かれますので「Add All」をクリックして追加します。
スタイルシート追加

⑧エクスポートが完了しました。
「See component」をクリックして確認します。
Overlayエクスポート完了

⑨「See component」をクリックするとHTML・CSSがコピーできるページに飛びます。
このページからも画像保存が可能ですがレイヤー名と別の名前になるので注意してください。
Overlayコード完成

⑩⑨でコピーしたコードを貼り付けます。
※設定などは生成されないので自身で用意してください。
コード貼り付け

完成

HTML・CSS生成が完了しました。
ずれていたり、画像が設定されていないので修正が必要です。
中央揃えのCSSはmarginなどが多用されているのでこのままでは使えなそうです。
※画像のリンクはOverlayに上がっているリンクが貼られているのでDLした画像のパスに修正が必要です。
完成

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. GIF

    Others

    簡単!!動画をGIFアニメーションに変換できるサイト

    WEBサイトを閲覧していると動画でもないアニメーションが自動再生されて…

  2. Illustrator

    みかづきをつくろうよ^_^ 作りたいんじゃ!!

    二つ円を用意します。 重ねます。パスファインダーで…

  3. オンラインでシェアする画像

    Others

    【完全無料・登録不要】大容量ファイル転送サービス「ギガファイル便」の使い方

    大容量のデータを共有したいその時にオンライン上でのファイルのや…

  4. Others

    レタッチとは?その意味と役割、使用するソフトとレタッチを行う為の3つのポイントについて

    このページでは、「レタッチ」という画像編集ソフトを使用した画像調整…

  5. デザインツールFigmaを使ってみよう ワイヤーフレーム作成

    Others

    Figmaを使ってみようーワイヤフレーム作成ー

    Figmaとは?Figmaはフリーのデザインツールです。WEB…

  6. Mac

    Macで簡単にスクリーンショットを撮ろう!フリーソフト「Captur」の使い方

    こちらの記事でご紹介した「Captur」のサイトは2018/8/2現在…

人気の記事

おすすめの参考書

PAGE TOP