なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
エンジニアのための Figma 知識
【2025年2月追記】 この度「ノンデザイナーのためのFigma入門」を出版しました🎉 本記事のような開発者向けの内容も含みつつ、FigJamやFigmaによるスライド資料作成など幅広いFigmaの利用法をご紹介しています。よろしければお手に取りください！ エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修
Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 - JMDC TECH BLOG
JMDCでアプリのデザインを5月から担当しているはんざわです。 Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか？ JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。 乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく、勉強会を開催しました。 勉強会はオンラインで開催。Figmaで資料を作成、参加者に資料を開きながらGoogle Meetを繋げて詳細を説明していきました。 勉強会で使用した資料はFigmaのCommunityにアップしているのでぜひ見てみてくださいね。 www.figma.com エンジニアがFigmaを触れるようになることのメリット 基本知識と基本操作 実装するために使う デザインシステムについて そのほか便利な機能 さいごに エンジニアがFigmaを触れ
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール | Web担当者Forum
就職したい企業・業種ランキング、トップ20は国内企業が独占【リスクモンスター調べ】 4月13日 6:30
エンジニアのためのFigma超入門
エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。 具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。 デザイナーの意図を汲み取ることができる デザイナーと共通言語で話せる 実装の観点からデザイナーにFigmaの修正依頼ができる ↑の打ち返しを待たずに自分で軽微な修正ができる というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。 スタイル Figmaで
米Adobeは9月15日（現地時間）、デザインコラボレーションツール大手のFigmaを200億ドル（約2.9兆円）で買収すると発表した。2023年内に買収を完了する予定としている。 Figmaは、Webサイトやアプリなどのデザイン制作全般をWebブラウザ上で完結できるコラボレーションツール。プロダクトマネジャー、エンジニア、マーケターなど、非デザイナー人材も参加して、一緒にデザインを作り上げられるのが特徴。チームでのプロダクト制作を支援する。 海外ではGoogle、Microsoft、vmware、Twitter、Uber、Block（旧Square）などテックジャイアントで導入されており、国内でもヤフー、LINE、楽天、富士通などがすでに採用している。2022年7月には日本進出を果たしたばかりだ。 買収後は、Figmaの共同創業者兼CEOのディラン・フィールド氏が引き続きFigmaチーム
GPT-4oの画像認識力と理解力ならいけるのではと思い手書きの仕様指示を読み込ませたら本当にコードを書き上げてくれた→｢ついにコーダーが恐怖を感じる時が来たか｣
kmizu @kmizu A Software Engineer in Osaka (& Kyoto). Ph.D. in Engineering. = 博士（工学） Interests: Parsers, Formal Languages, etc. ツイートは所属先の見解と関係ありません．思いついたことをつぶやきます． kmizu.github.io kmizu @kmizu GPT-4oの画像認識力と理解力をもってすればいけるやろと思ってやってみたら実際いけた。 ペーパープロトタイピングから最初のHTML書き起こすのにかなり使えるのでは。 つーか指示そのものを画像の中に書いたの読み取ってくれるの何か世界の壁を超えて対話してる感があって凄い #GPT4o pic.twitter.com/3XHMFg3yye 2024-05-14 12:49:41
Adobeによるコラボデザインツール運営のFigma買収の報を受けて、劇的にユーザーを増やした企業がある。スペイン発のスタートアップ、Penpotだ。 Figmaが展開する「Figma」はブラウザベースのデザインツール。デザイナーや開発者を含むチームでのコラボレーションに最適化されており、アプリのUIのデザインやワイヤーフレームの作成などに便利なことから人気を博している。AdobeもFigmaに似たデザインツールの「Adobe XD」を提供しているが、デスクトップアプリで、かつ「動作が遅い」などといった理由から、デザイナーたちからの評判は芳しくない。一方、Figmaはブラウザ上で動作するため利用環境を問わず、操作性も高いことから、好評を得ている。そのため買収を経て、Adobeの血が入ることでFigmaが“らしさ”を失うのではないかと心配するユーザーは少なくない。 冒頭で名前を挙げたPenp
はじめに 2026年4月17日（米時間金曜）、Anthropicが Claude Design を research preview として発表 自然言語でプロトタイプ・スライド・モックアップ・LPを作れる、Claude Opus 4.7ベースの新機能 競合は Figma Make / v0 / Lovable / Bolt / Google Stitch / Gamma / Canva 発表前後で Figma -6% / Wix -4.7% / Adobe -2.7% / GoDaddy -3% と市場は結構まじめに反応 「Webデザイナー・フロントエンドの仕事が丸ごと消える」のではなく、「初稿を作る工程」と「単純なUI実装」から先に溶ける、というのが現時点での実際的な読み 普段はClaude CodeやAIツール周りの記事を書くことが多いのですが、今回は界隈としてインパクトが大きかった
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
この記事は2026年2月20日時点の情報をもとにしています。Pencilは早期アクセス段階のため、仕様変更の可能性があります。最新の情報は公式サイトを確認してください。 Pencilとは何か Pencilは、IDEに統合できるAIネイティブなデザインツールだ。公式のキャッチコピーは「Design on canvas. Land in code.」で、デザインをキャンバス上で行い、そのままコードに落とし込むことを目指している。 Figmaのようなベクターキャンバスを持ちながら、Claude CodeやCursorといったAIコーディングツールとMCP（Model Context Protocol）で双方向に連携する。デスクトップアプリとしても、VS CodeやCursorの拡張機能としても動く。 macOS、Linux、Windowsに対応していて、早期アクセス中は無料で使える。 なぜエンジ
アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？ そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると
Figmaやめて、AIとコードでUIを作り始めた話
こんにちは、AI ShiftでUI/UXデザイナーをやってる後藤です。この記事はAI Shift Advent Calendar 2025の21日目の記事です。 この記事は、Figmaの使用をいったん停止して、AIとコードでUIデザインをするとどうなるのか、という経過報告です。 実験の途中ですので、まだ成功も失敗もはっきりしておりません。なので、本日18:30からのM-1グランプリをご覧になった方がより楽しい休日をお過ごしになられるかと思います。 結論から言うと 「デザインと実装の境界をなくした」 ことで、UIデザインの時間を「考える」に全振りできるようになりました。 そして、これからの私は課題や価値の探索というUXデザインのタスクに、多くの時間を費やしていくんだろうなと思いました。 具体的には、UIデザインを手を動かして作る時間がほぼゼロになり、考える時間を増やすことができました。様々な
1. はじめに こんにちは、次世代システム研究室のT.D.Qです。 デザインとコーディングの間にあるギャップを埋める新しいアプローチとして、FigmaでデザインされたウェブUIを自動的にHTML/CSSコードに変換する方法が注目されています。特に、オープンソースのFigma Context MCP（GLipsが公開）と、Visual Studio Code用AIエージェント拡張のRoo Codeを組み合わせることで、デザインからコーディングへのプロセスを大幅に効率化できます。 本記事では、FigmaでデザインされたウェブUIを、GLipsが提供する「Figma Context MCP」とVisual Studio Code拡張「Roo Code」を用いて、効率的かつ正確にHTML/CSSコードに変換・取り込む方法を解説します。 2. MCPとRoo Codeの概要 2-1. Roo Cod
AdobeのFigma買収とAdobe XDのこれから
2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
デザインコラボレーションツール「Figma」を手掛ける米Figmaは7月27日、Figmaの日本語版を提供開始したと発表した。価格は、スタータープランが無料、編集が可能になるプロフェッショナル版は1人あたり月額12ドル（年間パッケージに加入した場合の1人あたりの額）、ビジネス版は1人あたり45ドル、大企業向けのエンタープライズ版は1人あたり75ドル。 （左から）Figma CPO（Chief Product Officer）の山下祐樹氏、同社CCO（Chief Customer Officer）のアマンダ・クレハ氏、同社CEOのディラン・フィールド氏、Figma Japan代表取締役社長の川延浩彰氏 Figmaは、Webブラウザ上でWebやアプリなどのサイトデザイン全般を制作・レビューできるコラボレーションツール。デザイナーだけでなく、プロダクトマネジャー、エンジニア、マーケターなどが参加
Claude Code で HTML と Tailwind CSS (CDN 版) でモックアップを作るのが便利という話をお手伝い先の CTO から教えて貰って、試したところとても良かったので雑に書いて行く。 そもそも HTML はなんとなくわかってるが、 CSS はまったく書けないのでモックアップは今までは Figma を使って作っていた。なぜ Figma なのかというと、単に Figma 有名だし、おそらく多くの人が使ってるっぽいから情報が多いのだろうというだけ。 Figma の解説書を読んだり、Figma 公式 YouTube を見たりして色々学んで、本当に最低限は作れるようになった。実際自社サービスを作る時に開発担当者には Figma でこんなデザインがよいですみたいなものを作り、共有して作業をお願いしていた。 Claude Code でのモックアップ作成Claude Code を
Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。 この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。 コンテンツ目次 1. Figmaを使う前準備 2. Figmaの基本的な使い方について 3. 背景デザインの作成 4. グリッドレイアウトの追加 5. 基本ツールでロゴの作成 6. ナビメニューの作成 7. ヒーローセクションの作成 8. 3カラムレイアウトの作成 9. プロトタイプ機能の使い方 10. Figmaの使い方はアップデート継続中 Figmaを使う前準備
「AIで変わるデザイン業務」——デザイナーが実際に試したリアルな検証レポート | GMOメディア クリエイターブログ
こんにちは！サービスデザイン部 技術推進チームです。私たちは、事業部の業務とは別に、15%のリソースを使って、「デザイナーとしてAIや新しい技術をどう活用できるか？」をテーマに、さまざまなAI技術やツ...
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
［速報］マイクロソフト、手書きのスケッチをAIでアプリ画面に手軽に変換できる「Power Apps Express design」発表。Microsoft Build 2022
［速報］マイクロソフト、手書きのスケッチをAIでアプリ画面に手軽に変換できる「Power Apps Express design」発表。Microsoft Build 2022 マイクロソフトは現在開催中の開発者向けイベント「Microsoft Build 2022」で、ローコード／ノーコード開発ツール「Power Apps」の新機能として、手書きのスケッチやPDFのフォーム画面、Figmaのデザインファイルなどを元に、AIがアプリケーションの画面作成を支援してくれる「Power Apps Express design」を発表しました。 公開された動画を元に、Power Apps Express designの機能を見ていきましょう。 Power Apps Express designでは、画面スケッチをキャプチャするとAIがUIコンポーネントを認識します。
📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 # 色の定義と利用方法 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.10
Anthropic、「Opus 4.7」ベースのAIデザインツール「Claude Design」発表 Canvaとの連携も可能
米Anthropicは4月17日（現地時間）、新たなAIデザインツール「Claude Design」をリサーチプレビューとして発表した。前日に一般提供が開始された強力な視覚能力を持つ最新モデル「Claude Opus 4.7」を基盤としており、テキストの指示や画像、文書ファイルなどを読み込ませるだけで、初期デザインやプロトタイプ、プレゼン資料などを自動生成できる。 デザインの専門知識を持たないプロダクトマネージャーやマーケターから、効率的に複数のアイデアを模索したいプロのデザイナーまで、幅広いビジネス層の利用を想定している。現在は、Claudeの各種有料プラン（Pro、Max、Team、Enterprise）のサブスクユーザー向けに提供されている。 同日、オンラインデザインツール「Canva」を手掛ける豪CanvaはAnthropicとの戦略的提携のさらなる強化を発表した。両社は過去2年間
「ユーザーテストガイドライン VERSION 2.0」を公開しました！ – シン・トセイ
都では、令和3年9月にユーザーテストガイドラインを公開し、「テストしないものはリリースしない」を合言葉に、都庁内でサイトやアプリ、システムなどのデジタルサービスを開発する時は、ユーザーテストを実践する取組を進めてきました。 より良いサービスを創るには、利用者の声を聴き、それを反映させるサービスデザインの取組を徹底することが大切です。この取組を更に進めるため、この度、「ユーザーテストガイドラインVERSION 2.0」としての改訂を行いました。
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
2023年6月にFigma Config 2023という、Figmaのカンファレンスが開かれました。そこでFigma上で開発をサポートするような機能が多数発表されました。 デザイナーとエンジニアの効率を上げるDev Modeなどの発表があり、エンジニアにとっても知っておきたい内容があります。 今回は発表にあった中でも特に開発に直結するFigma for VS Codeを紹介します。 Figma for VS Codeとは？ VS Code上でFigmaを使用したさまざまなことができる拡張になります。 ただVS Code上でFigma上のデザインを確認するだけではなく、Figmaと連携した開発速度を上げる機能やコミュニケーションをサポートする機能があります。 Figmaにコメントを送り、コメントの通知を受け取れる VS Code上からFigmaのコメント機能を使用して、UIの質問をすることが
FigmaでWebサイトのデザインから公開まで完結するプラグイン「Makers」が登場！ | Web Design Trends
先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersというプラグインの概要と、機能や料金についてご紹介したいと思います。 進化が止まらない！Webサイトが簡単に作れるノーコードツールまとめ 近年話題を集めている「ノーコード」ですが、Webサイト制作においてもノーコードでサイトを制作できるツールやサービスが充実してきました。 数年前までは、まだまだノーコードツールの使い勝手もあまり良くなく... Web Design Trends Makersは、Figmaで制作したデザインをそのままWebサイトとして公開することができるプ
アドビが、同社のプロトタイピングツール「Adobe XD」の単体販売を終了したことが1月24日までに分かった。すでに、同社プロダクト一覧ページからAdobe XDの項目が消えている。ただし、「Creative Cloud」コンプリートプランには引き続き提供されており、契約すれば新規でのインストールも可能だ。 同ツールについてアドビに確認したところ「Adobe XDについてはメンテナンスモードとすることを決定いたしました」との回答があった一方で、「現在Adobe XDをご利用のお客様のサポートは今まで通り継続してまいります」と説明。既存ユーザーは引き続きAdobe XDを利用できるようだ。 なお、アドビは2022年9月にAdobe XDと競合するデザインツール「Figma」を200億ドルで買収している。FigmaとAdobe XDの棲み分けについて同社は「何も決まっていない」と回答するにとど
Today, we’re launching Claude Design, a new Anthropic Labs product that lets you collaborate with Claude to create polished visual work like designs, prototypes, slides, one-pagers, and more. Claude Design is powered by our most capable vision model, Claude Opus 4.7, and is available in research preview for Claude Pro, Max, Team, and Enterprise subscribers. We’re rolling out to users gradually thr
Adobe to Acquire Figma
Adobe to Acquire Figma Thursday, September 15, 2022 08:01 AM Download the PDF Figma Fast Facts Figma FAQs Combination of Adobe and Figma Will Usher in New Era of Collaborative Creativity SAN JOSE, Calif. -- (BUSINESS WIRE) -- Today, Adobe (Nasdaq:ADBE) announced it has entered into a definitive merger agreement to acquire Figma, a leading web-first collaborative design platform, for approximately
ちょっと株式会社の KindBurger です！ 本記事では、プロンプトだけでは表現しきれないデザイン原則を、デザインシステムを「コンテキスト」として与えることでどう改善できるのかを紹介します。 また、v0 にはサンプルのデザインシステムも用意されており、すぐに試すことができます 🎉 これを利用すれば、次のように一貫性のあるデザインが整ったサイトを簡単に生成できます。 v0 とは ざっくりいうと 「アイデアを素早くかたちにできる」 生成 AI ツールです。 自然言語のプロンプトや画像、Figma ファイルなどから、 React / Next.js / Tailwind CSS / shadcn/ui といったモダンな技術スタックのコードを生成してくれます。 さらに、汎用的な AI ツールとは異なり、Vercel エコシステムに最適化されている点も大きな特徴です。 より詳しく知りたい方は、
2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。 追記: 2023年5月に再度確認したところ、Adobeのすべての製品一覧
Google社内でも利用、2022年使いたいデザインツール世界1位の「Figma」は何がスゴい？ | 進化が止まらない！ 最新ツール
Web制作で、こんな経験をしたことはないだろうか？ デザイナーAが作ったデザインをストレージに置き、メールでチームに共有。デザイナーBやエンジニアは保存されたファイルをダウンロードして作業しなければならないので、タイムロスが生じる。 デザインツールで制作したが、他メンバーとのバージョン違いが原因で体裁やフォントがずれ、手戻りが発生した。 非デザイナーはデザインツールのアカウントを持っていないので、メールに画像を貼り付けて確認依頼せざるを得ない。だがイメージが伝わりづらいうえ、操作性も確認できない。 デベロッパーやエンジニアへのコード送付は、別のアプリケーションをインストールして行うしかない。 こういった問題を解決できるサービスが、デザインプラットフォームの「Figma（フィグマ）」だ。WebデザインやUIデザイン、グラフィックデザインなどを制作できる。 一体どんなツールなのか？ Figma
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
2021/12/10に開催された TechMarketing Conference 2021 # データマネジメント #techmar での講演資料です。 https://techxmarketing.connpass.com/event/229173/
AWS Amplify Studio パブリックプレビュー(2021/12/04版)をさわってみた | DevelopersIO
[速報] AWS上でWeb/モバイル開発をローコードで実現する AWS Amplify Studio が発表されました！(パブリックプレビュー) #reInvent Amplify StudioはFigmaと連携しており、Figmaで作成したデザインをReact UIコンポーネントに自動的に変換します。 近年のアプリケーション開発の高速化を支えている Amplify に UI 面の自動化がサポートされたら Amplify だけで開発が完結するのでは？これは気になる！ということで早速触ってみました。 公式の資料は次にまとまっています。 Introducing AWS Amplify Studio AWS Amplify Studio | Visually Build Extensible, Full-Stack Apps Fast Issue Tracker 2021/12/03 現在、 G
Adobeは、9月15日（米国時間）にウェブデザインツールの最大手「Figmaを約2.9兆円で買収する」と明らかにした。Figmaは、Adobe自身がCreative Cloudの一部として提供している同様のWebデザインツールとなる「Adobe XD」の競合とみられており、これまでFigma自身もXDからの移行をユーザーに促してきた歴史もある中で、なぜAdobeがFigmaを買収したのかいぶかる声も少なくなかった。 Adobe MAXで講演するAdobe Creative Cloud担当上級副社長（EVP）兼 CPO（最高製品責任者)）スコット・ベルスキー氏（左）のゲストとして呼ばれたFigma CEO ダイラン・フィールド氏（右） 10月18日（米国時間）から米国カリフォルニア州ロサンゼルス市にあるLACC（Los Angeles Convention Center）で行なわれたCre
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figma によるデザインシステム入門
Adobe、Figmaを約2.9兆円で買収へ デザインコラボツール大手
AdobeのFigma買収で登録者数は月次で56倍、Googleも使うデザインツール「Penpot」
Claude Designが来た日 ─ Webデザイナーとフロントエンドの仕事はどこまで削られるのか
フロントエンド開発のための Figma
新デザインツールPencilはなぜエンジニアに刺さるのか
Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 - ICS MEDIA
Google、「Material Design」のアイコンを「Figma」で公開／2,000以上ものアイコンが、5つのバリエーションで。商用も可
FigmaデザインをHTMLコードへ自動変換する方法 - GMOインターネットグループ グループ研究開発本部
「Figma」日本語版が公開 デザインコラボツール大手 ヤフー、LINE、楽天などがすでに導入
Claude Code でモックアップを HTML と Tailwind CSS (CDN 版) で作る
FigmaがAIでさらに進化！ Web制作はもはや完全自動化目前？ 「Config APAC 2024」現地レポ | 進化が止まらない！ 最新ツール
はじめてのFigma使い方ガイド 基本からプロトタイプ共有まで完全デザイン | PhotoshopVIP
Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
Tokens Studio(Figma Tokens) で小さくはじめるデザインシステム
🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
Figma for VS Codeで変わるデザインと開発のコミュニケーションと効率
「Adobe XD」単体販売を終了、サポート継続へ Figmaとのすみ分けは「何も決まっていない」
Introducing Claude Design by Anthropic Labs
v0 にデザインシステムを与えて、統一感あるデザインに仕上げよう！
Adobe XDは利用できなくなるのか、Adobeに問い合わせました | Stocker.jp / diary
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri
事業の進展とデータマネジメント体制の進歩（＋プレトタイプの話）
なぜアドビはFigmaを買収することを決めたのか--幹部の回答、FigmaとAdobe XDの展開は
hakutakudou.com
www.kyoto-asanoha.com
jp.reuters.com
plea5station.com
www.udiscovermusic.jp
www.smartnews.com