アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？ そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると
みなさん、デザインツールの Figma を使っていますか？ 私はまだ「使っている」と言えるほど使えていません というわけで勉強会を開催して勉強します Figma とは 公式の紹介文は以下のとおりです デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するためのプラットフォームです 本記事のタイトルと同じように、「デザインからデモ・実装までチームで製品開発できる」旨が書かれています まさにその通りで、ブラウザ上で UI をデザインし、そのまま動かしてみることができ、最終的にはコードの生成までできてしまうツールです Figma の人気 2022年に世界中のデザイン関係者を対象としたアンケートでも Figma は圧倒的な人気です いずれのランキングでも2位の10倍以上の得票数になっています メインで使っている UI デザインツール第1位
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：
本書は 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] - 表紙画像に、このコ
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応 昨年（2022年）、Adobeによる買収が発表され話題となったWebデザインツールを提供するFigmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Bring Figma to VS Code Our new extension for VS Code eliminates context switching and helps you move faster with code suggestions based on your designs. Install to... → Inspect Fig
「Adobeが、Figmaを200億ドル（約2兆8,700億円）で買収する」。Adobeの四半期決算が発表される2022年9月15日の朝（日本時間9月14日深夜）、海外の経済ニュースから驚くべき速報が飛び込んできました。 Adobeが200億ドル（約2兆8,700億円）で買収したFigmaが提供するクラウドベースのデザインツール「Figma」のウェブサイト。“Nothing great is made alone（一人ですごいものは完成できない）”のタグラインが印象的 Figmaは、2022年度に4億ドル（約530億円）の年間経常収益を見込む、従業員約850人の企業です。新型コロナウイルスの感染拡大で、企業が在宅勤務を進める中、提供しているクラウドベースのデザインツール需要が急増。直近の企業評価額は100億ドルでしたが、Adobeはその約2倍の額での買収を決めました。 大型の企
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
はじめに この記事はHRBrain Advent Calendar 2022カレンダー2の5日目の記事です。 プロダクトデザイナーの松戸です。 昨今のUIデザインツールといえばFigmaの勢いが増していて、UIデザインのスタンダードツールになりかけていると思います。2021年のデータですが以下のようなデータからも読み取れます。 また、シェアが拡大していること以外にも、コラボレーションを軸に置いたツールというコンセプトもあって、デザイナー以外の開発者もFigmaに触れる機会が多いと思います。 そこで改めてFigmaを触るうえで、覚えておくと便利なショートカットや操作を紹介します。 フレームをPNGとしてコピー 【mac】Shift + ⌘ + C 【Win】Shift + ctrl + C エクスポートの細かい設定などをせずに、選択中のフレームをPNGとしてクリップボードにコピーできます。S
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サイトをリデザイン
英字新聞社ジャパンタイムズ、スタートアップメディア・テッククランチでの記者経験を経て、ダイヤモンド社のスタートアップ担当記者に。最近はフードテックやモビリティ領域に注目している。趣味はギターやシンセサイザーだが総じて下手。2020年7月よりダイヤモンド社「DIAMOND SIGNAL」記者。 From DIAMOND SIGNAL スタートアップやDX（デジタルトランスフォーメーション）を進める大企業など、テクノロジーを武器に新たな産業を生み出さんとする「挑戦者」。彼ら・彼女にフォーカスして情報を届ける媒体「DIAMOND SIGNAL」から、オススメの記事を転載します。※DIAMOND SIGNALは2024年1月をもって、ダイヤモンド・オンラインと統合いたしました。すべての記事は本連載からお読みいただけます。 バックナンバー一覧 Adobeによるコラボデザインツール運営のFigma買収
2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
はじめに 今回はAWS Amplify Studioを利用してFigmaで作成したデザインをReactアプリに連携する方法について解説します。 「AWSなんて触ったことないよ！」「Reactも触ったことないでやんす！」って人でもサクッとできるような内容なので読んでいただければなと思います。 目標成果物 Figmaで作成したカードコンポーネントのデザインをReactアプリ上で表示させる Figmaで作成したボタンコンポーネントでクリックイベントを試す この記事でやること AWS Amplify Studioの解説 Figmaでのデザイン作成とコードの自動生成方法の解説 Reactアプリとの連携 この記事の対象者 AWSの初心者だけどFigmaで作成したデザインをReactアプリと連携してみたい人 将来的に流行りそうな技術をサクッと試してみたい人 AWS Amplify Studio AWS
こんにちは。 今回は、最近注目されているデザインツールであるfigmaの書き出し方法について開設していきたいと思います。 figmaでは、エクスポート機能を利用することで書き出すことができます。 Figmaのエクスポートは、PNG ・ JPG・ SVG・PDFでの書き出しが可能となっています。 誰でもとても簡単に書き出すことが可能なので、早速書き出してみましょう。 書き出し手順 書き出したいフレームや図形を選択しながら、右下にある「export」をクリックするだけで書き出しをすることが可能です。 フレームの書き出し このフレームを書き出したい時、フレームを選択しながら、右下の「export」をクリックします。 figmaでは、PNG ・ JPG・ SVG・PDFでの書き出しが可能となっていますので、書き出したい形式を選択します。 ファイルに名前をつけ、保存場所を選択し、「保存」を押して書き
こんにちは、もしくはこんばんは。 今回はアル社での、Figmaを使ったワークフローの話です。 アルでは2022年1月にハロマスというサービスをリリースしました。 ハロマスは、クリエイターが作ったオリジナルのギフトを買えるサービスで、デザインはFigmaで制作されています。 UIデザインはFigmaで作り、エンジニアが参照しながら開発を進める、それだけならば至って普通なのですが、ハロマスの場合、ディレクターもFigmaを利用しています。 要はワイヤーフレーム(画面の設計図)を作るのに、一般的なWhimsicalやGoogle Slides やPowerPointではなく、Figmaで作るということです。 開発中のハロマスFigmaなぜやったのかこれはサービス開発を爆速(※)でやるために、必要に迫られてやったということもあるのですが、ワイヤーフレームとUIデザインを作るツールが一緒である方が、
Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。 この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。 コンテンツ目次 1. Figmaを使う前準備 2. Figmaの基本的な使い方について 3. 背景デザインの作成 4. グリッドレイアウトの追加 5. 基本ツールでロゴの作成 6. ナビメニューの作成 7. ヒーローセクションの作成 8. 3カラムレイアウトの作成 9. プロトタイプ機能の使い方 10. Figmaの使い方はアップデート継続中 Figmaを使う前準備
Figmaで作成・共有されたファイルで、テキストや図形オブジェクトを選択できない、または編集できない場合に試すTipsの紹介です。 今回は特に以下のケースに対応しています。 テキストや図形を選択しても何も編集できない テキストや図形をそもそも選択できない テキストを選択しても編集できない パソコンに入っているローカルフォントが選択できない この記事のターゲットFigmaの初心者 Figmaのファイルの共有を受けたが、編集する方法がわからない方 Figmaを少しでも触れるようになりたい方 テキストや図形を選択しても何も編集できない（右側に編集メニューが表示されない）Figmaで共有されたファイルの権限が「can view」になっている可能性があります。 ファイルを編集するには「Editor」「can edit」の権限が必要なので、共有者に権限を付け替えてもらうなど、対応を依頼してください。
SketchやAdobe XDと並ぶ人気のUIデザインツール『Figma』。 Figmaには多数の革新的な機能が搭載されていますが、そうした機能や使い方に気づかないままFigmaを使っている方もいるはず。 そこで今回は、基本的な説明から、「もっと早く知っておきたかった！」と思うような便利すぎる機能&使い方までご紹介します。 Figmaは、ブラウザ上で利用できるデザインツールです。数あるデザインツールのなかでも、アプリやWebに特化したものとして、多くのデザイナーや企業が使用しています。 Figmaの大きな特徴は、その「共有しやすさ」。クラウド上にデータを作成するため、複数人で同時編集が可能です。また、特別なツール・アプリを導入する必要がなくブラウザ上で動作するため、クライアントへの共有もURLを送るだけで完了します。 多機能性に加え、こういった優れた共有機能が評判を呼び、いまもっとも注目さ
苦痛でしたが、FigmaでPDFをインポートするための1つのハックと1つのピクセルパーフェクトな方法を見つけました Figmaはデザインの世界を席巻しました。よるとUXツール2020デザインの調査、フィグマはUIデザイン、ユーザー・フロー、プロトタイピング、ハンドオフ、デザイン・システム、バージョン管理のために2020年に最もよく使われるツールでした。Figmaは愛されている製品ですが、私の意見では、いくつかの重要な機能が欠けています。つまり、後でインポートの問題を修正するために何時間も費やすことなく、PDFファイルを簡単にインポートする機能です。 これが小さな不便だと思うなら、PDF形式でアセットを送信するだけのクライアントは今までに一度もありません。あなたは幸運です、私の友人。多くの人がこの機能を求めており、Figmaは彼らがそれに取り組んでいると主張しています。 FigmaがいつPD
スマートキャンプデザインブログ、haguriです。 先日、Figmaの料金プラン内で無料プランである『Starter』の内容が変わると発表がありました。 https://help.figma.com/hc/en-us/articles/360061769534 無料プラン（Starter）でFigmaを運用している方も多いと思うので、どのような変更があるのかを紹介します。 Figmaの料金プランFigmaには3つの料金プランが存在しています。 Starter 料金：無料 対象：個人、小規模プロジェクト向け Professional 料金：有料（月15＄/エディター） 対象：中小企業/チーム向け Organization 料金：有料（月45＄/エディター） 対象：大企業/チーム向け ※料金は月払いの場合です。年払いにすると変わります。 無料プラン（Starter）と有料プランの大きな違いは、
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ 2024/05/07 追記 最新の登壇スライドバージョンはこちらです。 登壇時の様子がYouTubeに上がっているのでよろしければあわせてご覧ください。 はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く