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. Mac

    「タブ」を使ってMacのFinderを使いこなす!作業効率格段アップ!

    Macで色々Finderを開くと、何を開いているのか分からなくなったり…

  2. Others

    【デザイン】おしゃれなデザインのトレンド3選

    Hola!(こんにちは!)ファッションと同じように、デザインも…

  3. Others

    Adobe Acrobat Proの便利なショートカットキーについて(プレゼンテーション編)

    PDFデータをAcrobatを使用して、他の人に見せたい。でも、思…

  4. Others

    とても便利な画面共有ソフト「Gyazo」

    さっとデザインを共有したいその時に画面を共有しようと思ってもスクリ…

  5. ai ps

    Others

    illustratorかphotoshopか

    illustratorで出来ること ロゴ ア…

  6. 無料(フリー)の写真素材おすすめサイト! 商用利用も可能

    Others

    無料(フリー)の写真素材おすすめ4サイト! 商用利用も可能

    ブログのアイキャッチ画像やパンフレット、Webサイトで写真を使う機会は…

人気の記事

おすすめの参考書

PAGE TOP