Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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

池田泰延

31,594 subscribers

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

Wissenschaft & Technologie Bildung

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ページを作れそう。 ↓このサイトから動画みたいな動きができるでぜひ試してほしい。感動します。

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

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

146,929 Aufrufe • vor 3 Jahren

本が開閉を３つのシェイプキーを順番に動かすことでつくったけど、扱いが面倒！そこで３のシェイプキーをUnity独自の機能である中間フレームつきのシェイプキーつにまとめるエディター拡張をつくりました。これでかなり扱いやすくなったぴょん #オリパンダーと七夕 #cluster #Unity

本が開閉を３つのシェイプキーを順番に動かすことでつくったけど、扱いが面倒！そこで３のシェイプキーをUnity独自の機能である中間フレームつきのシェイプキーつにまとめるエディター拡張をつくりました。これでかなり扱いやすくなったぴょん #オリパンダーと七夕 #cluster #Unity

ドコカノうさぎ🐰ジビエーズ🌟メタバースアイドル

39,547 Aufrufe • vor 2 Monaten

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

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

Koji Kimura

28,665 Aufrufe • vor 7 Monaten

3Dプリンタ用G-code生成ソフトの #Gcoordinator、このたび、VSCode拡張機能をリリースしました！コーディングからG-codeのプレビューまでをVSCodeだけで完結させることができます。 VSCodeでコードの編集を行うので、AIを用いてのG-code生成を行いやすくなりました！

3Dプリンタ用G-code生成ソフトの #Gcoordinator、このたび、VSCode拡張機能をリリースしました！コーディングからG-codeのプレビューまでをVSCodeだけで完結させることができます。 VSCodeでコードの編集を行うので、AIを用いてのG-code生成を行いやすくなりました！

タム/ Taniguchi Tomohiro

24,669 Aufrufe • vor 1 Monat

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

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

岡本伸吾🎞️おかしん

15,188 Aufrufe • vor 4 Monaten

ちょっとスゴ過ぎるChromeとFigmaのプラグイン見つけた。好きなウェブサイトの範囲を指定すると、それを再現するReactのコードとFigmaファイルを作成してくれる。 Figmaファイルは画像もテキストもキレイにレイヤー分けされ、各要素が独立して編集できるようになっている。シンプルに超便利。

ちょっとスゴ過ぎるChromeとFigmaのプラグイン見つけた。好きなウェブサイトの範囲を指定すると、それを再現するReactのコードとFigmaファイルを作成してくれる。 Figmaファイルは画像もテキストもキレイにレイヤー分けされ、各要素が独立して編集できるようになっている。シンプルに超便利。

梶谷健人

171,358 Aufrufe • vor 2 Jahren

きせった｜左右対称調整🛠️ 衣装をひとつずつ動かしながら、位置を合わせるのが大変だと感じたことはありませんか？きせったのボーン調整機能なら、左右を簡単に揃えながら衣装を調整できます！ Unity上で実際の見た目を直接確認しながら、その場で調整できるので、「少し動かして確認して、また調整して…」といった作業もスムーズに。さらに、ボーンを選びやすくする補助UIも用意しています！もう、ひとつずつ探して動かす必要はありません。画面を見ながら、簡単に衣装を調整してみてください！ Booth Link: 🔗 -

きせった｜左右対称調整🛠️ 衣装をひとつずつ動かしながら、位置を合わせるのが大変だと感じたことはありませんか？きせったのボーン調整機能なら、左右を簡単に揃えながら衣装を調整できます！ Unity上で実際の見た目を直接確認しながら、その場で調整できるので、「少し動かして確認して、また調整して…」といった作業もスムーズに。さらに、ボーンを選びやすくする補助UIも用意しています！もう、ひとつずつ探して動かす必要はありません。画面を見ながら、簡単に衣装を調整してみてください！ Booth Link: 🔗 -

【公式】 EDEN-LABS | きせった

11,327 Aufrufe • vor 16 Tagen

【作ってみた】 Rekordboxの楽曲に、タイアップ情報を一括で反映させる機能を作ってみた💿 「たまには明るいDJの話題も欲しいよね‼️」ということで、今回は便利な機能のお話です。 ---------- アニソンDJをやっていると、Rekordboxのコメント欄にアニメやゲームなどのタイアップ情報を書いておくと、VJさんがめちゃくちゃ助かることに気付くと思います。ただ、これを1曲ずつやっていると…… 曲名をコピー ↓ AGのサイトで検索 ↓ タイアップ情報をコピー ↓ Rekordboxのコメント欄に貼り付け ↓ 次の曲名をコピー ↓ またAGで検索…… これを延々と繰り返すことになり、気付けば夕方になってる……なんてことも普通にありますよね。そこで今回、あらかじめタイアップ情報を登録したい楽曲をプレイリストにまとめておけば、簡単に情報をまとめて登録できる拡張機能を作ってみました。動画にもしましたが、大雑把な流れはこんな感じです。 ① 該当するプレイリストをtxtファイルで書き出す ② そのファイルを拡張機能に読み込ませる ③ 拡張機能内にプレイリストの曲情報が登録される ④ 「検索」を押すと、自動でAGのサイトに遷移して検索結果を表示 ⑤ 「情報を登録」を押すと、その曲の情報を記録 ⑥ 拡張機能を開くと次の曲が表示されるので、曲数分繰り返す ⑦ 完了後、専用のファイル形式で出力 ⑧ 対応アプリを起動して、曲データにタグ情報を書き込む ⑨ Rekordboxに戻り、対象曲を全選択してタグを再読み込みすると一括反映！ ……という仕組みです。今まで「曲名コピー → AGで検索 → タイアップ情報コピー → Rekordboxに貼り付け」を何度も何度も繰り返していた作業が、かなり楽になるはず…！特に、曲情報を検索する部分はボタン1つで自動的に進められるので、これまで手作業で行っていた細かい操作を大幅に減らせます。今回はまだテスト段階なので3曲だけで試していますが、例えば100曲くらい入ったプレイリストを読み込ませれば、めっっっちゃくちゃ時間短縮できるんじゃないかと見込んでます。せっかく作ったので、完成したら皆さんにもお裾分けできればと思っています。アニソンDJやVJ周りの準備を少しでも楽にできる機能になればいいなと思っているので、お楽しみに👍

【作ってみた】 Rekordboxの楽曲に、タイアップ情報を一括で反映させる機能を作ってみた💿 「たまには明るいDJの話題も欲しいよね‼️」ということで、今回は便利な機能のお話です。 ---------- アニソンDJをやっていると、Rekordboxのコメント欄にアニメやゲームなどのタイアップ情報を書いておくと、VJさんがめちゃくちゃ助かることに気付くと思います。ただ、これを1曲ずつやっていると…… 曲名をコピー ↓ AGのサイトで検索 ↓ タイアップ情報をコピー ↓ Rekordboxのコメント欄に貼り付け ↓ 次の曲名をコピー ↓ またAGで検索…… これを延々と繰り返すことになり、気付けば夕方になってる……なんてことも普通にありますよね。そこで今回、あらかじめタイアップ情報を登録したい楽曲をプレイリストにまとめておけば、簡単に情報をまとめて登録できる拡張機能を作ってみました。動画にもしましたが、大雑把な流れはこんな感じです。 ① 該当するプレイリストをtxtファイルで書き出す ② そのファイルを拡張機能に読み込ませる ③ 拡張機能内にプレイリストの曲情報が登録される ④ 「検索」を押すと、自動でAGのサイトに遷移して検索結果を表示 ⑤ 「情報を登録」を押すと、その曲の情報を記録 ⑥ 拡張機能を開くと次の曲が表示されるので、曲数分繰り返す ⑦ 完了後、専用のファイル形式で出力 ⑧ 対応アプリを起動して、曲データにタグ情報を書き込む ⑨ Rekordboxに戻り、対象曲を全選択してタグを再読み込みすると一括反映！ ……という仕組みです。今まで「曲名コピー → AGで検索 → タイアップ情報コピー → Rekordboxに貼り付け」を何度も何度も繰り返していた作業が、かなり楽になるはず…！特に、曲情報を検索する部分はボタン1つで自動的に進められるので、これまで手作業で行っていた細かい操作を大幅に減らせます。今回はまだテスト段階なので3曲だけで試していますが、例えば100曲くらい入ったプレイリストを読み込ませれば、めっっっちゃくちゃ時間短縮できるんじゃないかと見込んでます。せっかく作ったので、完成したら皆さんにもお裾分けできればと思っています。アニソンDJやVJ周りの準備を少しでも楽にできる機能になればいいなと思っているので、お楽しみに👍

ぷれい🎤👑雨宮天さん

13,737 Aufrufe • vor 14 Tagen

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

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

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

127,049 Aufrufe • vor 3 Monaten

GPT4Vを使って、AIでFigmaのデザインからコードを生成するプラグインを作ってみました！🎉 通常のプラグインと比べ、プロンプトを書くことでnextjs, Tailwind CSS, flutter, swift uiなど様々なコードで出力することができるようになりました🙌 需要ありそうだったら、プラグインとして公開しようと思います。ニーズが気になるので、シェアしてもらえると嬉しいです😇

GPT4Vを使って、AIでFigmaのデザインからコードを生成するプラグインを作ってみました！🎉 通常のプラグインと比べ、プロンプトを書くことでnextjs, Tailwind CSS, flutter, swift uiなど様々なコードで出力することができるようになりました🙌 需要ありそうだったら、プラグインとして公開しようと思います。ニーズが気になるので、シェアしてもらえると嬉しいです😇

トミー

340,587 Aufrufe • vor 2 Jahren

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

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

Steam回遊

21,160 Aufrufe • vor 3 Monaten

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

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

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

5,470,494 Aufrufe • vor 5 Monaten

RustとGPU描画で高速なUIを実現したUnity内蔵ターミナル。 Package Managerでインストール可能です。macOS/Windows対応。実はClaude Code連携にも対応しています(コード補完つきエディターも内蔵)。

RustとGPU描画で高速なUIを実現したUnity内蔵ターミナル。 Package Managerでインストール可能です。macOS/Windows対応。実はClaude Code連携にも対応しています(コード補完つきエディターも内蔵)。

tnayuki

14,954 Aufrufe • vor 2 Monaten

Copilot Cowork 向けプラグインの開発スキルを新しく開発標準上に提供開始しました🚀たとえAPIがなく画面操作で設定しないといけないところも、GitHub Copilot / Claude Code エージェントが画面操作まで代行して設定してくれます。このスキルを利用すると、たとえば Dataverse のビジネスデータを利用したカスタムスキルをAI CoEチームが自動作成することができ、 Copilot Cowork を利用している一般ユーザーにこのプラグインを配布することができます。これまでのように人間が業務を手順書を見ながら実行するのではなく、Copilot Cowork に「日報を提出したい」、「資料を作成したい」、「お客様に年次の保守レポートを作成したい」、など話しかけるだけでプラグイン内に用意された MCP Server が組織のデータに接続し、用意された手順書であるスキルが適材適所で呼びだされ、仕事を遂行することができます。これまで難しかった組織の最新情報や過去の申請情報を使いながら稟議資料の作成を行ったり、経費申請システムにOutlookの予定から出張の申請登録をさせたりすることなど。みなさんならどのような業務をエージェンティックにしますか？

Copilot Cowork 向けプラグインの開発スキルを新しく開発標準上に提供開始しました🚀たとえAPIがなく画面操作で設定しないといけないところも、GitHub Copilot / Claude Code エージェントが画面操作まで代行して設定してくれます。このスキルを利用すると、たとえば Dataverse のビジネスデータを利用したカスタムスキルをAI CoEチームが自動作成することができ、 Copilot Cowork を利用している一般ユーザーにこのプラグインを配布することができます。これまでのように人間が業務を手順書を見ながら実行するのではなく、Copilot Cowork に「日報を提出したい」、「資料を作成したい」、「お客様に年次の保守レポートを作成したい」、など話しかけるだけでプラグイン内に用意された MCP Server が組織のデータに接続し、用意された手順書であるスキルが適材適所で呼びだされ、仕事を遂行することができます。これまで難しかった組織の最新情報や過去の申請情報を使いながら稟議資料の作成を行ったり、経費申請システムにOutlookの予定から出張の申請登録をさせたりすることなど。みなさんならどのような業務をエージェンティックにしますか？

ギークフジワラ

20,266 Aufrufe • vor 3 Monaten

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

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

ْ

48,305 Aufrufe • vor 3 Monaten

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

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

852話(hakoniwa)

433,314 Aufrufe • vor 3 Jahren

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

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

Takatsuki

44,630 Aufrufe • vor 6 Monaten

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

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

❖ ken｜旅するデザイナー

206,901 Aufrufe • vor 3 Monaten