Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

clockmaker's profile picture

池田 泰延

31,416 subscribers

517,052 Aufrufe • vor 3 Jahren •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von 池田 泰延
池田 泰延vor 3 Jahren

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

Profilbild von 池田 泰延
池田 泰延vor 3 Jahren

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

Profilbild von AI情報｜ロジャース かい｜Kai Rogers
AI情報｜ロジャース かい｜Kai Rogersvor 3 Jahren

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

Profilbild von むっく
むっくvor 3 Jahren

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

Profilbild von 池田 泰延
池田 泰延vor 3 Jahren

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

Profilbild von Ryosuke Ogawa
Ryosuke Ogawavor 3 Jahren

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

Profilbild von fumix
fumixvor 3 Jahren

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

Profilbild von 池田 泰延
池田 泰延vor 3 Jahren

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

Profilbild von ゆりな
ゆりなvor 3 Jahren

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

Profilbild von 池田 泰延
池田 泰延vor 3 Jahren

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

Ähnliche Videos

【Webデザイン革命】 Builder. ioとFigmaのAI連携がすごい。 アイテムを動かしたり、大きさを変えると自動でコードも修正される。 これでコード書けなくても洗練されたWebページを作れそう。 ↓このサイトから動画みたいな動きができるでぜひ試してほしい。感動します。
0:39

【Webデザイン革命】 Builder. ioとFigmaのAI連携がすごい。 アイテムを動かしたり、大きさを変えると自動でコードも修正される。 これでコード書けなくても洗練されたWebページを作れそう。 ↓このサイトから動画みたいな動きができるでぜひ試してほしい。感動します。

チャエン | デジライズ CEO《重要AIニュースを毎日最速で発信⚡️》

145,858 Aufrufe • vor 2 Jahren

Webページを静止画や動画としてキャプチャするための多機能なchrome機能拡張を作りました。 長いページでもスクロールして画面全体を静止画キャプチャしたり、キーフレームで細かく制御できる自動スクロールをしながら動画キャプチャしたりできます。
0:49

Webページを静止画や動画としてキャプチャするための多機能なchrome機能拡張を作りました。 長いページでもスクロールして画面全体を静止画キャプチャしたり、キーフレームで細かく制御できる自動スクロールをしながら動画キャプチャしたりできます。

Koji Kimura

28,665 Aufrufe • vor 4 Monaten

After Effectsの「3Dチャンネル抽出」エフェクトを使用すると、レイヤーの奥行き情報を元にしてモノトーンで塗りつぶすことができます。 つまり、このエフェクトによって、深度マップを作成できます。 奥行き情報を元にエフェクトの効果を処理させたい場合に、活用できる機能です。 ぜひご活用ください。 #AdobeCommunityExperts
1:24

After Effectsの「3Dチャンネル抽出」エフェクトを使用すると、レイヤーの奥行き情報を元にしてモノトーンで塗りつぶすことができます。 つまり、このエフェクトによって、深度マップを作成できます。 奥行き情報を元にエフェクトの効果を処理させたい場合に、活用できる機能です。 ぜひご活用ください。 #AdobeCommunityExperts

岡本伸吾🎞️おかしん

15,068 Aufrufe • vor 1 Monat

「作業配信をするにも、自分専用のポモドーロタイマーがほしいな…」「ついでにタスクも表示できるといいな…」「休憩時間もカスタムできるといいな…」 ということでブラウザ上で制御してOBSに反映できるやつを作りました。かわりに今日やりたかった作業は何もできませんでした。
0:52

「作業配信をするにも、自分専用のポモドーロタイマーがほしいな…」「ついでにタスクも表示できるといいな…」「休憩時間もカスタムできるといいな…」 ということでブラウザ上で制御してOBSに反映できるやつを作りました。かわりに今日やりたかった作業は何もできませんでした。

澄ஐ🕊️

193,366 Aufrufe • vor 1 Jahr

【キャラクターの複数所持について】 #pripara #アドパラ ぷりぱらぱんぽ～ん♪ マイキャラの複数所持について沢山のご質問をいただきありがとうございます。 今回は動画を交えて予定している機能についてご報告させていただきます。 ①コーデについて 所持しているコーデは全てのマイキャラで共有することができます。 また、同じコーデを着ることもできますので、おそろいコーデを楽しむ事もできます。 ②プロミスについて プロミスを作成した際にマイキャラを選ぶこともできます。 マイキャラだけでライブやパシャリングを行うこともできます。 現在、鋭意制作中となりますので、続報をお待ちください！ 以上、アドパラからのお知らせでした。
1:00

【キャラクターの複数所持について】 #pripara #アドパラ ぷりぱらぱんぽ～ん♪ マイキャラの複数所持について沢山のご質問をいただきありがとうございます。 今回は動画を交えて予定している機能についてご報告させていただきます。 ①コーデについて 所持しているコーデは全てのマイキャラで共有することができます。 また、同じコーデを着ることもできますので、おそろいコーデを楽しむ事もできます。 ②プロミスについて プロミスを作成した際にマイキャラを選ぶこともできます。 マイキャラだけでライブやパシャリングを行うこともできます。 現在、鋭意制作中となりますので、続報をお待ちください！ 以上、アドパラからのお知らせでした。

アイドルランドプリパラ【公式】

118,206 Aufrufe • vor 4 Tagen

Steamのストアページにサイドバーを表示するブラウザ拡張機能を作りました。レビューやらフォーラムやらなんやらの情報をまとめて表示できて、ついでに日本語翻訳もします。 ちょっと便利です。
0:29

Steamのストアページにサイドバーを表示するブラウザ拡張機能を作りました。レビューやらフォーラムやらなんやらの情報をまとめて表示できて、ついでに日本語翻訳もします。 ちょっと便利です。

Steam回遊

21,069 Aufrufe • vor 21 Tagen

かわいい相関図を簡単に作れる【三角関係ジェネレーター】を公開しました。写真や画像も利用でき、画像で書き出しもできます。機能が多いのでPC限定にはなりますが、サクサクと関係図を作ることが可能です。
0:47

かわいい相関図を簡単に作れる【三角関係ジェネレーター】を公開しました。写真や画像も利用でき、画像で書き出しもできます。機能が多いのでPC限定にはなりますが、サクサクと関係図を作ることが可能です。

トミナガハルキ | フリーランス歴10年な人

5,406,544 Aufrufe • vor 2 Monaten

StreetTyperXを制作し始めて半年が経ちましたので、 雑に今までの軌跡を一分くらいにまとめました！ 進んでいるのか…進んでいないのか…！ そして動画をまとめただけで進捗を出したと思うなよ、と自分に言い聞かせる！ 明日からも頑張っていきましょい〜 #スーパーゲ制デー #indiegame #ゲーム制作
1:04

StreetTyperXを制作し始めて半年が経ちましたので、 雑に今までの軌跡を一分くらいにまとめました！ 進んでいるのか…進んでいないのか…！ そして動画をまとめただけで進捗を出したと思うなよ、と自分に言い聞かせる！ 明日からも頑張っていきましょい〜 #スーパーゲ制デー #indiegame #ゲーム制作

すいでん＠STAPgames(Unityゲーム制作中（ザコ）)

11,105 Aufrufe • vor 1 Jahr

Procreateのアプデ、特にスポイト機能が待ち望んでいたやつで嬉しい…！ 伝わりやすいように画面録画したから良ければ。 CLIP STUDIOで言うところの 『表示色を取得』が『キャンバスからカラーを選択』、 『レイヤーから色を取得』が『アクティブレイヤーからカラーを選択』ってことでいいと思う。
0:21

Procreateのアプデ、特にスポイト機能が待ち望んでいたやつで嬉しい…！ 伝わりやすいように画面録画したから良ければ。 CLIP STUDIOで言うところの 『表示色を取得』が『キャンバスからカラーを選択』、 『レイヤーから色を取得』が『アクティブレイヤーからカラーを選択』ってことでいいと思う。

ْ

47,616 Aufrufe • vor 6 Tagen

働きすぎなぐらいに超多忙で最後に昼寝したのがいつかも覚えてないと話してたマークさんが今回を機にこの時みたいにボーッとしながら好きなお菓子を食べて｢おいしかったな~…｣と思いながら時間を気にせずお昼寝できる日がまたきて欲しいと心から思う
4:04

働きすぎなぐらいに超多忙で最後に昼寝したのがいつかも覚えてないと話してたマークさんが今回を機にこの時みたいにボーッとしながら好きなお菓子を食べて｢おいしかったな~…｣と思いながら時間を気にせずお昼寝できる日がまたきて欲しいと心から思う

ْ

134,150 Aufrufe • vor 2 Monaten

CSSを書けなくてもオリジナルのコメントデザインを作れる機能を開発中 ここからもっと凝ったデザインの提供と、ユーザが用意した画像を使ってデザインできる機能を強化していきます いい感じなので楽しみに待ってもらえると嬉しいです！ 最近は深夜に開発配信しているので、遊びに来てください！！！
1:37

CSSを書けなくてもオリジナルのコメントデザインを作れる機能を開発中 ここからもっと凝ったデザインの提供と、ユーザが用意した画像を使ってデザインできる機能を強化していきます いい感じなので楽しみに待ってもらえると嬉しいです！ 最近は深夜に開発配信しているので、遊びに来てください！！！

Takatsuki

44,630 Aufrufe • vor 3 Monaten

Photoshop（本家）に生成AIが搭載されました。 ・画像内の一部を選択して生成 ・画像を広げて外側を新規生成 ・人物をボタン一つで背景とマスクで分離 ・分離でできた背景抜け部分を生成で補完 ・画面をなぞって不要なものを周囲に馴染むように綺麗に削除 みたいな使い方、とても便利です。凄まじい。
0:59

Photoshop（本家）に生成AIが搭載されました。 ・画像内の一部を選択して生成 ・画像を広げて外側を新規生成 ・人物をボタン一つで背景とマスクで分離 ・分離でできた背景抜け部分を生成で補完 ・画面をなぞって不要なものを周囲に馴染むように綺麗に削除 みたいな使い方、とても便利です。凄まじい。

852話(hakoniwa)

433,146 Aufrufe • vor 2 Jahren

猫を吸うと良い匂いがすると聞きましたので、口からも猫成分を摂取できる料理を開発しました！ ねこ出汁の肉吸いなので名付けて「猫吸い」です
0:45

猫を吸うと良い匂いがすると聞きましたので、口からも猫成分を摂取できる料理を開発しました！ ねこ出汁の肉吸いなので名付けて「猫吸い」です

ラムダ🥒ラムダ技術部

1,639,721 Aufrufe • vor 2 Jahren

Claude Designが大幅アップデート。 今回大きいのは、単にAIでデザインを生成するだけでなく、 ・既存のデザインシステムを読み込んで反映 ・キャンバス上で直接編集 ・Claude Codeと同期して、そのまま実装 までつながったこと。 特に目玉はキャンバス上で直接編集できる「Editモード」の追加。 実際に使ってみた感想。 1. 用途に応じたタブの切り替えが分かりやすい ・Simpleタブ：文字サイズを変えるなどかんたんな調整ができる ・Proタブ：よりFigmaのようにレイヤー情報を確認しながら、細かく編集ができる 2. 画面を切り替えずにインタラクションを確認できて良い ・Click throughモード：Figmaのプロトタイプモードのように実際の操作感を確認できる さらにデザインシステムやClaude Codeの連携が加わって デザインから実装までの距離がまた一段と縮まった感。
0:44

Claude Designが大幅アップデート。 今回大きいのは、単にAIでデザインを生成するだけでなく、 ・既存のデザインシステムを読み込んで反映 ・キャンバス上で直接編集 ・Claude Codeと同期して、そのまま実装 までつながったこと。 特に目玉はキャンバス上で直接編集できる「Editモード」の追加。 実際に使ってみた感想。 1. 用途に応じたタブの切り替えが分かりやすい ・Simpleタブ：文字サイズを変えるなどかんたんな調整ができる ・Proタブ：よりFigmaのようにレイヤー情報を確認しながら、細かく編集ができる 2. 画面を切り替えずにインタラクションを確認できて良い ・Click throughモード：Figmaのプロトタイプモードのように実際の操作感を確認できる さらにデザインシステムやClaude Codeの連携が加わって デザインから実装までの距離がまた一段と縮まった感。

❖ ken｜旅するデザイナー

198,397 Aufrufe • vor 6 Tagen

Claude Code 2.0.72 から Chromeが操作できるようになりました。 /chrome コマンドでStatusとExtensionが有効になっていることを確認した上で、ブラウザ操作をお願いすると、MCPツール(mcp__claude-in-chrome__) を使用してブラウザを操作してくれます。 claude --chrome でも有効にできます。
0:58

Claude Code 2.0.72 から Chromeが操作できるようになりました。 /chrome コマンドでStatusとExtensionが有効になっていることを確認した上で、ブラウザ操作をお願いすると、MCPツール(mcp__claude-in-chrome__) を使用してブラウザを操作してくれます。 claude --chrome でも有効にできます。

Oikon

122,655 Aufrufe • vor 6 Monaten

【Maya 基本】Chamfer Vertex ※音声あり 頂点をなめらかにできる機能です エッジの流れを斜めにしたい時にも使えるので作例を作りました プリミティブを作成した時点で分割した場合と 後でエッジを追加した場合の挙動が違うのでご注意ください
1:29

【Maya 基本】Chamfer Vertex ※音声あり 頂点をなめらかにできる機能です エッジの流れを斜めにしたい時にも使えるので作例を作りました プリミティブを作成した時点で分割した場合と 後でエッジを追加した場合の挙動が違うのでご注意ください

ᴮ‌ᴵ‌ᴺ‌ᴳ‌ᴱ

24,492 Aufrufe • vor 1 Jahr

以前より開発していた、AIチャットでUI生成ができるFigmaプラグイン「Layermate」を公開しました！ サイトやアプリのデザインを作ったり、コンポーネントの叩き台を作ったりできます。 #layermate
0:22

以前より開発していた、AIチャットでUI生成ができるFigmaプラグイン「Layermate」を公開しました！ サイトやアプリのデザインを作ったり、コンポーネントの叩き台を作ったりできます。 #layermate

しゃなはす

88,969 Aufrufe • vor 1 Jahr

テクスチャに空間基準でグラデーションを付けるUnity拡張機能が使いやすくなってきた グラデーションを付ける範囲はボックスの向きとサイズで制御しつつ、マスク画像でグラデーションかけるとこの制限もできます 空間基準だからUVの向きとかサイズを考慮せずに均一なグラデーションにできるのが強み
0:53

テクスチャに空間基準でグラデーションを付けるUnity拡張機能が使いやすくなってきた グラデーションを付ける範囲はボックスの向きとサイズで制御しつつ、マスク画像でグラデーションかけるとこの制限もできます 空間基準だからUVの向きとかサイズを考慮せずに均一なグラデーションにできるのが強み

でんのこ

83,558 Aufrufe • vor 5 Monaten