FigmaとVS Codeを連携できる新しい拡張機能がヤバい。 エディターの画面分割でFigmaを開きつつ、選択したレイヤー情報をもとにコード補完を効かせながらCSSを作成できました。

Visual Studio Codeの拡張機能「Figma for VS Code」は以下のページから導入できます。

レイヤー名がコード補完のヒントになります。 デザイナーの方、レイヤー名の整頓を。今後はなにとぞ。

@MIDORI_ruby7 これ相当すごいですね、仕事が遊びに変わっちゃいます😅

いまどこを触っているかを認識しやすくなるということでしょうか？

以下がポイントだと思います！ ・Figmaのレイヤー名をCSSセレクター名にできる ・候補から選択すると、Figmaの該当レイヤーがフォーカスする ・CSS自体は、Figmaの情報を読み取って挿入できる

これは便利。早速使ってみます！

これは、、、すごい…。やっとDwを捨てる時がきた（まだ使ってんのかい）

BracketsやCC Extractが夢見た世界がいまここに……ｗ

試してみた。やばかった。 でもcssファイルでしかコード補完してくれないみたい。 scssファイルでも補完してくれないかな〜。

はい、あっています。 レイヤー名（セレクター名）を候補から選択すると、画面分割側のFigmaのフォーカスが移動しました。