Figma to STUDIOのFigmaプラグインを使って、FigmaのデザインをSTUDIOに最適化されたボックスモデルに変換しましょう。

2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。 追記: 2023年5月に再度確認したところ、Adobeのすべての製品一覧

ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している

Figmaで無料で利用できるWebサイトやスマホアプリのUI用のデザインシステムを紹介します。UIコンポーネント、カラー、アイコン、タイポグラフィなどがまとめられており、すぐにFigmaで利用できます。 Design Systems for Figma ※画像は、クックパッドのデザインシステム Design Systems for Figmaには日本のサイトをはじめ、海外のサイトのデザインシステムがまとめられています。 サイトの利用は簡単で、登録など面倒なことは一切不要です。

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サイトをリデザイン

9月15日に発表された、Adobeによる「Figma」の買収には、多くの方が驚いたのではないだろうか。Figmaは日本語版も発表したばかりで絶好調。そこでAdobeが200億ドル（発表時点で約2.9兆円）という巨額での買収を行うと予測していた人はあまりいないと思う。 Figmaユーザーの間では、買収がどのような影響を与えるのか心配する声も多い。すでにFigmaからは「今後も独立した経営を行なってく」との声明が出されているが、その真意はどこにあるのだろうか？ ITmedia NEWSでは、Figma共同創業者でCEOのディラン・フィールド氏にインタビューを実施。今回の買収の背景と同社の今後について聞いた。 なぜ買収交渉に同意したのか？ ――はじめに、Adobeとの買収交渉はいつから始まったのですか？ フィールド氏（以下敬称略）：　正確な日付は確認しないといけないですが、3～4カ月前だったと思

英字新聞社ジャパンタイムズ、スタートアップメディア・テッククランチでの記者経験を経て、ダイヤモンド社のスタートアップ担当記者に。最近はフードテックやモビリティ領域に注目している。趣味はギターやシンセサイザーだが総じて下手。2020年7月よりダイヤモンド社「DIAMOND SIGNAL」記者。 From DIAMOND SIGNAL スタートアップやDX（デジタルトランスフォーメーション）を進める大企業など、テクノロジーを武器に新たな産業を生み出さんとする「挑戦者」。彼ら・彼女にフォーカスして情報を届ける媒体「DIAMOND SIGNAL」から、オススメの記事を転載します。※DIAMOND SIGNALは2024年1月をもって、ダイヤモンド・オンラインと統合いたしました。すべての記事は本連載からお読みいただけます。 バックナンバー一覧 Adobeによるコラボデザインツール運営のFigma買収

カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページやコンポーネントにもっと素早くアクセスしたい」などです。 運用方法に関する課題に対して少しずつ改善に取り組み続け、徐々にですが Figma でのデザインシステムの管理が効率化されつつあります。今回はこれまでに実施した Figma の運用効率化の取り組みをご紹介します。 プラグインで解決編目的のページやコンポーネントに素早く

このシリーズについて みなさんこんにちは。さくらインターネットでフロントエンド領域を担当している山田です。この連載では、フロントエンド開発を行っているメンバーが、開発に役立つ情報を半分趣味で不定期掲載していく予定です。 自分からは、近年人気のデザインツールである『Figma』の便利な情報をお伝えしたいと思います。デザイナーの方はもちろん、エンジニアの方にも興味を持っていただける機能がたくさん詰まったFigmaを紹介していきます。 Figmaのご紹介 チーム開発に適したデザインツール Figmaのメインの機能の一つはもちろんデザイン制作です。Figmaを使うことで、これまでのデザインツールでは難しかったWebアプリケーションやモバイルアプリケーションといった、よりダイナミックに画面が変化していくタイプのデザインを表現しやすくなりました。 中でも、複数人で同じデザインファイルを閲覧・編集可能な

デザインコラボレーションツール「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やアプリなどのサイトデザイン全般を制作・レビューできるコラボレーションツール。デザイナーだけでなく、プロダクトマネジャー、エンジニア、マーケターなどが参加

チームでの共同デザインプロジェクトに最適なツールとして呼び声の高い、デザインアプリ Figma（フィグマ）。 はじめてでも迷わない簡単なFigmaの使いかたはもちろん、用途に合わせて自分好みにアプリの使いやすさを便利プラグインも人気の理由でしょう。 先日、Figmaのアップデートイベント Config 2022 が開催され、数多くの新機能が追加、発表されました。これまでFigmaによるデザインで気になっていた多くの点を解消してくれる大型アップデート。 今回は、Figmaに追加された新機能について詳しくみていきましょう。 コンテンツ目次 1. ダークモードの導入 2. より使いやすくなった Auto Layout 3. コンポーネントのプロパティ 4. 他のユーザーに追尾してもらうスポットライト機能 5. Figjam ウィジェットの追加 6. 可変フォントが利用可能に 7. ポヨンとしたバ

DopeUIは様々なタイプのWebサイトのUIテンプレートをFigmaやPhotoshop用ファイルで無償配布するプロジェクトサイトです。 いろいろな業種や目的に別にFigma或いはPhotoshopで作成されたWebサイトのレイアウトを無償提供しています。尚、一部は有償となっています。 配布者が3年間UI/UXをコミュニティを通じて学んだそうで、その際に頻繁に勉強用のリソースを探して苦労した経緯もあって、コミュニティに還元するつもりで無償配布しているそうです。勉強用に使って欲しい、との事でした。 DopeUI

A collection of Design Systems for Figma from all over the globe 🌎 backed by code.

本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜

こんにちは。エンタメ領域のDXを推進するブロックチェーンスタートアップ、Gaudiyでフロントエンドエンジニアをしているkodai（@r34b26）です。 Gaudiyでは、数ヶ月前からエンジニアによる「デザインレビュー」をワークフローに取り入れました。僕自身は、デザインとエンジニアリングをつなぐことに関心があるのですが、一般的にデザイナーとエンジニアの協業については語られているケースが少ないですし、あったとしても、デザイナー側から寄り添ってくれるケースがほとんどだと感じています。 そこで今回は、Gaudiyでエンジニア側としても課題意識を持って取り組んできたデザインレビューについて、ご紹介したいと思います。 プロダクト品質を高めるために大事な観点だと思うので、よければご参考ください！ 1. エンジニアによるデザインレビューを導入した理由 2. チーム全体でデザインレビューを強化 2-1.

先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersというプラグインの概要と、機能や料金についてご紹介したいと思います。 進化が止まらない！Webサイトが簡単に作れるノーコードツールまとめ 近年話題を集めている「ノーコード」ですが、Webサイト制作においてもノーコードでサイトを制作できるツールやサービスが充実してきました。 数年前までは、まだまだノーコードツールの使い勝手もあまり良くなく... Web Design Trends Makersは、Figmaで制作したデザインをそのままWebサイトとして公開することができるプ

徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは

私の周りでも、Figmaを使用する人がだいぶ増えてきました。 Figmaでデザインする時に役立つ、便利なテクニックを紹介します。Figmaでの日常的な作業から、デザインシステムや巨大なデザインファイルを扱う場合に作業効率がアップします。 9 Figma Design System Tips. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 一括でカラーを変更する場合は、選択色を使用する 2. この便利なショートカットで、レイヤーを整理できます 3. テキストのスタイルを見つけるには、検索を使用する 4. カラースタイルをすばやくナビゲートするには、リストにする 5. レイヤーをすばやくナビゲートするには、ショートカットを使用する 6. コンポーネントの交換は、このショートカットが便利

共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation