「もっとコーディングを効率よくできるようになりたい」
「デザインカンプの値を自動で取得して入力してくれるツールがあれば…」
そんな方に使ってほしいのが、今回ご紹介するVS Codeの拡張機能「Figma for VS Code」です。Figma for VS Codeを使うと、約90%のCSSを自動作成し、数百行分ものコーディングを効率化できます。
この記事では、FigmaのデザインカンプからFigma for VS Codeを使ってコーディングする様子を、実際の操作画面を用いて解説します。
Figma for VS Codeを使うか使わないかでコーディングのスピードにかなりの差ができるので、高い精度で効率よくコーディングしたい方はぜひ最後までご覧ください。
Figma for VS Codeは無料でも使えますが、本記事で紹介している補完機能は有料プランで利用できる機能です。コーディングの効率化と金額を天秤にかけて、活用を検討してみてください！
1：Figma for VS Codeを立ち上げる
立ち上げ方を解説しますので、一緒にやってみてくださいね。
①VS Codeで「Figma for VS Code」を検索して開く
▼
②左側に表示されたFigmaのアイコンを選択する
▼
③対象のファイルを選択して読み込む
▼
④開くフレームを選択する
▼
⑤VS Codeの画面上にFigmaのデザインカンプが表示される
VS Codeの画面上に表示されているデザインカンプの要素を選択すると、それぞれの値が確認できます。
2：Figma for VS Codeを使ってCSSを作成する
始めにHTMLのコードからクラスを抜き取り、CSSに入力します。
ただ、たくさんあるクラスを1つ1つコピーして、CSSに貼り付けしていくのは大変ですよね。
そこで便利なのが「ExtractionCssSelector」というプラグインです。
ExtractionCssSelectorを使うと、クラス名を一括で取得できます。
②HTMLを選択し、右クリックして「ExtractionCssSelector」をクリックする
③CSSに貼り付ける
短時間でHTML上のクラス名を抜き出して貼り付けできるので、効率よく進めるためにもぜひ活用してみてください。
それでは、順にCSSを作成していきましょう！
1：ヘッダー
まず、ヘッダーを選択しましょう。
すると、コードのタブにヘッダー部分のCSSのプロパティと値が表示されます。
クラス名の波括弧の中にカーソルを当てると自動的に補完されます。
表示されたCSSで問題なければ、「Tabキー」を押して入力完了です。
必要のないものは適宜削除しながら、コンテナやロゴ、ボタンの部分も入力を進めていきましょう。
Figma for VS Codeの提案だけでは不完全な部分もあるので、表示を確認しながら必要なCSSを加えてください。
Figma for VS Codeを使うと、ほとんどFigmaが保管してくれるような形でCSSのコーディングを進められるのでとても便利です！
2：ファーストビュー
ファーストビューも補完機能を使って、CSSを作成していきましょう。
①ファーストビュー部分を選択する
▼
②クラス名の波括弧の中にカーソルを当て、Tabキーを押す
▼
③背景のパスを当てる
▼
④中にあるボックス部分のCSSも同様に作り、表示を確認する
3：お知らせ
続いて、お知らせの部分もCSSを作成していきます。
①お知らせ部分を選択する
▼
②クラス名の波括弧の中にカーソルを当て、Tabキーを押す
▼
③「head」「items」など中のコンテナの部分をFigma for VS Codeで補完して、CSSを入力する
▼
④左右中央揃えになるように「margin-inline: auto;」を追記する
▼
⑤不要なボーダートップにCSSを当てないように修正する
困ったときは画像赤枠の部分をチェックしてみてくださいね。
4：導入事例
導入事例の部分もFigma for VS Codeで補完しながら、CSSを入力していきましょう。
①導入事例の部分を選択して、Figma for VS Codeで補完する
▼
②ヘッドやカード部分もFigma for VS Codeで補完する
▼
③画像部分を背景のカバー表現と同様に「object-fit: cover;」で作り変える
▼
④カードのヘッドやテキストもFigma for VS Codeで補完する
5：フッター
最後にフッターもFigma for VS Codeで補完して、CSSを作成しましょう！
3：完成したLPを確認する
改めてデザインカンプと完成したLPを見比べて、デザインに違いがないかチェックしましょう。
また、これまでのCSS作成でレスポンシブの表現も一緒にできているので、デベロッパーツールを使って確認してみてください。
②サイトの幅を縮める
③表示が崩れていなければOK
まとめ：Figma for VS Codeはコーダーを助けてくれる便利なツール！
今回のデザインカンプは、ほぼ自分でCSSを入力することなくFigma for VS Codeの補完機能によって実装を進めました。
FigmaにあるCSSのプロパティと値を自動的に反映させながらコーディングできるため、効率が大きく変わります。
また、通常はFigmaとVS Codeの画面を行き来しながらコーディングする必要がありますが、Figma for VS Codeを使うとVS Codeの画面上でFigmaのデザインカンプを表示できるのも便利なポイントです。
高い精度ですばやくCSSのコーディングができるFigma for VS Codeは、コーダーにとって大きなメリットがあります。
補完機能は有料プランから使える機能ではありますが、コーディングを最大限効率化したい方はぜひ活用をご検討ください！
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。