こんにちは。助田です。

今日はDiSA公認メンターでもある小泉さんが記事を寄稿してくれましたのでご紹介になります！

AIを使うのか、人間がコードを書くのか

この記事を書いている今この時にも新しい情報が入ってきて、記事の内容がすぐに置いて行かれる、そんな状態でもあるのがAIです。

デザイナーの皆さん、その中でも実はコード書くのあんまり得意じゃないんだよな…という方は意外と多いかと思います。

「できることなら作ったデザインカンプが、そのままコードにならないかな」と1度は考えたことがあるのではないでしょうか。

私自身はコードを書くのも好きではあるのですが、それでも何度も考えたことがあります。

少し前ですと、まだまだ業務では自分でコード書かないと、と思っていたのですが、ここ最近になってその状況も変化してきました。

AIを使用することで大きく効率化が図れるようになってきました。

しかし、それでも自分でデザインカンプから先、コードの実装まで行うのであれば、コードそのもの知識は必要不可欠だと考えます。例えAIを使用するのであってもです。

それはAI書いたものが正しいのかの判断もしなければなりませんし、コードの知識がなければそもそも適切な指示をAIに出すこともできないためです。

そこで、Figma→VSCodeという、一番メジャーであろう環境での悩みやTipsをお伝えしながらも、他の環境につていも考えてみます。

FigmaのデザインデータをVSCodeでコーディングしたいけど連携が難しい問題

先程も書きましたが、デザイナーの中には実はコード書くのあんまり得意じゃないという方も大勢いると思います。

本当は自身の手でコードに落とし込みたいと思いながらも、どうしていいのか分からない問い方もいらっしゃると思います。

例えばFigmaでデザインカンプを作成したものの、そこから先をどう進めるのがいいのか分からないというような声をいただくことも多いです。

• 「Figmaで作成したデザインをVSCodeでコーディングしたいけど、どうすればいいの？」
• 「VSCodeのプラグイン『Figma for VSCode』をインストールしたけど、うまく連携できない…」
• 「開発モードって何？有料プランに入らないと使えないの？」
• 「連携はできたものの、画像の書き出しやプロパティの確認方法がよくわからない…」
• 「HTMLを自動生成する機能があるらしいけど、なんだか使いにくい気がする…」
• 「そもそもエディタは本当にVSCodeでいいの？」
• 「今ならAIを使うのがいいの？」

このように、FigmaとVSCodeを連携させてデザインデータを効率的にコーディングに活かしたいと思いつつも、その方法がわからず足踏みしてしまっている方に朗報です。

デザイン担当、コーディング担当など複数メンバーとの共同作業という点を鑑みると、圧倒的かつ効率的にチーム作業を進めることができますね。

効率的なコーディングのworkflowを確立できるかもしれない

FigmaとVSCodeの連携は、デザインとコーディングの橋渡しとなり、作業効率を格段に向上させるための重要なステップになります。しかし、初めて試みる際には、設定や操作方法で戸惑うことも多いのが現実です。

そこで、VSCodeやAIコーディングの専門性を持った第三者の視点を取り入れ、専門家のサポートを活用することで、スムーズに連携を実現し、効率的なコーディングのworkflowを一緒につくってみませんか？

例えばこんなフォローアップができそうです

• Figma for VSCodeのインストールから設定：セットアップ、環境設定のフォローアップ
• 開発モードの活用方法：**画像などのアセットの書き出しやコメント機能を使った共同作業など解説
• HTML自動生成機能の注意点： HTML自動生成機能について、使いにくいHTMLが書き出されるという点も含めて経験に基づいた情報提供
• その他の連携ツールの紹介と使い分け：「Figma to STUDIO」「teleportHQ」「Anima」「Locofy」といった、FigmaのデザインからHTMLを書き出すための代表的なツールを紹介
• オートレイアウトの活用： Figmaからデザインをインポートする際の精度を高めるために、オートレイアウト機能のを積極活用
• コーディング学習のステップ：Figmaとの連携だけでなく、VSCodeを使ったHTML、CSS、JavaScriptなどの基本的なコーディングスキル の習得方法について
• コーディングのAI活用：VSCodeとGithub Copilotを使用したAIコーディングを中心にCursorやCline、v0など様々なAIツールの解説

例えば「FigmaとVSCodeの連携」テーマのMENTOR+活用

目的	例）Figma forVSCodeでコーディングのworkflow基礎を確立したい
期間	3ヶ月（計6回のメンタリング） ・セッション1：FigmaとVSCodeの連携で課題を感じている点のヒアリング ・セッション2：例）VSCodeプラグインの連携と改善実行、フィードバック ・セッション3：例）HTML自動生成機能の解説、フィードバック ・セッション4：例）基本的なプロパティ確認とアセット書き出し解説、フィードバック ・セッション5：例）オートレイアウト機能の解説、フィードバック ・セッション6：実践結果と課題感との照合、制作フロー全体のレビュー ※セッションの内容はメンターと相談して決定できます
メリット	・月2回セッションのメンタリングでドンづまっている不明点をぶつけられる ・1セッション60分という時間をゆっくり使える ・ベースとなる「FigmaとVSCodeの連携」の助言、提案をもらえる ・Slackでも補足情報などフォローしてもらえる
お土産	・Figma for VSCodeの基本的な活用方法のマスター ・「Figma to STUDIO」「teleportHQ」「Locofy」などの情報もゲット

今回ご紹介した活用事例を参考にぜひMENTOR+を有効活用してください！