Figma for VS Codeは使い方の工夫が必要？まとめてシングルタスクにすると便利
当サイトはアフィリエイト広告を利用していますVS Codeの拡張機能「Figma for VS Code」、
これのみそは、
VS Code内で、CSSのファイルとFigmaのデザインを並べて、
Figmaの方で生成された、8割方できあがったCSSを、
要素を選択してCSSファイルでTabキーを押すだけで、VS Codeのファイルに簡単にコピペできる、、、
【使い方などのガイドは↓↓YouTube動画で】
っていうものなんですが、
VS Code内で、CSSファイルとデザインカンプを並べてみると、タブの表示小さくなってしまって、
Figma上で要素を選択するのに、デザインカンプ上の要素をクリックする必要があるので、
個人的には使いにくいなぁ、、、
と思ってました。
だったら、ブラウザ版のFigma立ち上げて、デュアルモニターで並べて作業した方がいい？？
と思ってたんですが、、、
勘違い！？
コーディング初心者のころは、ヘッダーだったらヘッダー、ボタンだったらボタン、、、
と、ひとつずつの要素を個別にスタイリングしていって、
ひとつ終わったら次の要素、、、
とやっていたのが使いにくかった原因でした。
何回もFigmaの画面と、CSSファイルを行ったり来たりする作業が必要になっていたから、、、
コーディング慣れてくると、
最初に、1ページのほぼ全体の要素の、Figmaが作ってくれたざっくりCSSをまとめて！！
CSSファイルに持ってくるようにすれば、めちゃくちゃ時短できます。
Figma for VS Codeで、ざっくりCSSコピペで持ってきた後は、ブラウザなりアプリ版のFigmaなどで大きなタブでデザインを表示して、細部を確認しながらスタイリング、、、
すると、だいぶ使いやすくなりました。
自分の場合は、サブモニターも使っているので、その恩恵がおおきいです。
以下、X投稿全文コピペ↓↓
YouTubeのリンクはうえに貼ったのと同じです
Figma for VS Code、
うまく活用できてなかったけど、
ちゃんと使えばかなり便利？？
VS Code内のウインドウで見るのが、
小さくて見にくい～
デュアルモニターで並べてみたらいいじゃん…
と思って活用してませんでしたが、
最初に「まとめて」CSS持ってきちゃえばいいんですね
学習当初は、ひとつパーツ作っては確認～
ってやってたので、手間増えてましたが、
最初にシングルタスクでページ内の要素全部！
とかの、CSSをコピーする作業をまとめてやると、
だいぶ生産性上がりそう↓↓
【世界一分かりやすい】AIを活用した爆速LPコーディング術【Figma for VS Code】
サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】
けっこうガチ目っぽいです↓↓
僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます
