Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
2024年3月の、これだけは押さえておきたいWeb関連の動き
2024年3月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma・UI Canva、Affinityを買収 Adobe対抗のデザインツール大手 個人的に注目のニュースだったので、記事を書きました。 CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である – Stocker.jp/diary Iconbuddy — 100K+ open source icons アイコン素材検索サイトです。 Figmaが生成AI機能を強化へ、アイデア出しや付箋の要約などをサポート／ディラン・フィールドCEOが「Figma」の今後の展望を語る 「UIの色を変えただけで大量のクレ
Figma新機能｜マルチ編集機能の概要と使いどころ｜nanami
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回は、日本時間の今日（2024.3.7）発表されたばかりのFigma新機能、マルチ編集機能について、その機能概要や使いどころを公式解説をもとにまとめました。 はじめに現在、Figma Community上ではこちらの公式解説が公開されています。 Figmaの公式解説は、実際に手を動かしてみる用の作業場も準備されていて作りが丁寧なので、こちらを読めば内容は理解できるのですが、この機能に関わらず、原則英語のFigmaデータしかない！ ということで、こちらの公式解説を和訳しながら噛み砕いた内容をまとめましたので、「機能の概要が知りたいけど、英語の解説を読むのに抵抗があって止まっている」という方の参考になると嬉しいです！ 機能概要｜ざっくり何ができるのかマルチ編集機能は、複数フレーム内の共通レイヤーを一気に選択し、それ
XDからFigmaへ移行したい人のためにFigmaの機能を紹介
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコ
2023年12月の、これだけは押さえておきたいWeb関連の動き
2023年12月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Adobe・Figma Adobe、Figma買収を撤回 欧州で当局の承認見込めず – 日本経済新聞 買収に必要な承認が得られないため、AdobeとFigmaは相互に買収契約を破棄することで合意したとのことです。AdobeはFigmaに対して違約金を支払うとのこと。 Figma公式Webサイトによると「FigmaとAdobeは、提案されていた合併を中止することにしました。」とのことです。 画像のALTに、ChatGPTによる日本語の要約をまとめたものを入れています。https://t.co/d1otCUX3LI pic.twit
WordPressブロックテーマで一新された、ブログデザインと制作フロー
WordPressブロックテーマで一新された、ブログデザインと制作フロー 2023年12月に、このブログのWordPressテーマをリニューアルしました。 その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。 今回のWordPressテーマ制作手法 今回のブログリニューアルの際に、あえて行った手法は以下の通りです。 これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する FigmaやAdobe XDのようなデザインツールを使用しない WordPressのフルサイト編集機能でデザインする HTMLとCSSを書いてからWordPressテーマに変換しない functions.php にコードを追加
Chat GPTを使ってFigmaの面倒な作業を自動化する｜鈴木慎吾 / TSUMIKI INC.
この記事は、Figma Advent Calendar 2023の11日目の記事です。 最近Figmaで面倒な作業が発生し、自動化のためのFigmaプラグインのコードをChat GPTに書いてもらったところ大変はかどりました。その手順を説明します。 きっかけエンジニアとの振り返りMTGで、こんな相談を受けました。 使用頻度が高いコンポーネントから実装を進めたい。デザイン上で使用頻度の高いコンポーネントの一覧を出してもらいたい。 解決策はいくつか考えられます。 目視でカウントする Figmaのデザインシステムアナリティクス機能を使う 既存のプラグインを使ってカウントする プラグインを開発してカウントする 対象となる画面数が３画面くらいなら、「1. 目視でカウントする」で解決しそうです。しかし対象となるFigmaファイルで扱われている画面数は100画面を軽く超えるので、この案は却下です。 「2
「AdobeのFigma買収は市場競争の妨害」とイギリスの規制当局が認定
イギリスの競争・市場庁(CMA)が2023年11月28日に、「PhotoshopやIllustratorなどを手がけるAdobeが、デザインツール業界で最大のライバルであるFigmaを買収すると市場競争が妨げられる恐れがある」とする暫定的な調査結果を発表しました。 Adobe / Figma deal could harm UK digital design sector - GOV.UK https://www.gov.uk/government/news/adobe-figma-deal-could-harm-uk-digital-design-sector Adobe’s $20 Billion Purchase of Figma Would Harm Innovation, U.K. Regulator Provisionally Finds - WSJ https://www.w
Adobeによる3兆円規模のFigma買収についてEUの規制当局が独占禁止法違反で訴訟を起こす予定だと判明
PhotoshopやIllustratorなどのクリエイティブツールを展開するAdobeは、2022年にデザイン管理ツール「Figma」を200億ドル(約3兆円)で買収すると発表しました。ところが、このAdobeによるFigma買収についてEUの規制当局が独占禁止法違反で調査を行っており、間もなく訴訟を起こす予定だと報じられました。 Adobe faces EU antitrust warning over Figma deal, sources say | Reuters https://www.reuters.com/markets/deals/adobe-faces-eu-antitrust-warning-over-figma-deal-sources-say-2023-11-14/ Adobe’s $20bn deal to buy Figma faces fresh chall
Figma のデータ、少し楽になるかもしれない作り方 - Qiita
この記事の概要 variants や component properties など、Figma でのデータ作りには様々なテクニックがあります。 この記事では、少しニッチなシチュエーションにおいて、楽にデータを作れる方法を紹介します。 フォーカスリング付きの UI 以下の画像のように、通常時のボタンと、フォーカスが当たったときのボタンを作成したいとします。 このとき、アウトラインのオフセット表現は、通常の Stroke では実現できません。 そこで Absolute position と Constraintsを使います。 まず通常時のボタンはこのような構成です。 至って普通の作り方です。 次に、フォーカスリング付きのボタンの構成です。 元のボタンよりもひとまわり（ここでは上下左右それぞれ 3px ずつ）大きい四角形を作り、Absolute position で配置しました。 そして Co
Figma for VS Codeを使ってCSS実装する時のおすすめポイント - Goodpatch Tech Blog
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：
2023年7月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UI・Figma Adobeの2兆8000億円超でのFigma買収についてEUの規制当局が間もなく詳細な調査を開始 アメリカ司法省は独占禁止法違反の疑いでAdobeを提訴する準備を進めています イギリスはAdobeが独占禁止法違反に関する救済策を提示しなかったため、より長期的な審査を開始すると発表 とのことです。ひょっとしたら、Figma買収完了までに一悶着あるかもしれませんね。 デザインからコードへ ──デザインのデータの見方を覚えてコーディングしてみよう！ Figmaを通じたデザインの始め方について書かれています。 UIは閲覧画面からつくろう。｜Shino | Software Desi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/Stocker_jp/status/1777892452395036912
Figmaが生成AI機能を強化へ、アイデア出しや付箋の要約などをサポート／ディラン・フィールドCEOが「Figma」の今後の展望を語る
Export Original Images | Figma Community
Web To Figma
Figma ブログ | Shortcut
Figma to Wordpress | Bring your design to life with Yotako
Figma to WordPress | Figma
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
