Figmaのプラグインは、普段のデザインの作業をより効率的に進めることができる機能です。 今回はフォントやテキストのデザインでお悩みの方におすすめしたいプラグインの中から、フォント選定やテキスト入力の際に役にたつプラグインをご紹介いたします! ぜひ参考にしてみてくださいね! フォント選定におすすめなプラグインフォントデザインを即座に確認「Japanese Font Picker」Figmaの仕様上、フォントを選ぶ際に表示されるタブには英語表記だけで、日本語だとどのようなフォントデザインになるのかが分かりづらいです。 気に入ったフォントを実行してみると、日本語対応していなかった…なんてこともあると思います。 このプラグインは日本語のフォントデザインを即座に確認することができるものです。 使い方は通常のプラグインと同様に、プラグインの検索窓からJapanese Font Pickerを実行する
Figma Plugin「Pie Chart Generator」を作りましたdate2024.7.23(Tue.)tagsPluginsFigmaDesign 円グラフが作れる Figma プラグイン「Pie Chart Generator」を公開しました。シンプルなものが欲しかったので作りました。 行区切りで値を入力し、Create で円グラフが作れます。Google 風の Colorful なカラースケールや、グレースケール、単色スケールなどのカラープリセットを用意しています。※それぞれのパーツはレイヤーに分かれており、編集可能な状態で生成できます。以前から使っていて無料公開する理由が特になかったのですが、有休消化期間で暇なのでなんとなく公開してみました。各所でご紹介いただけると幸いです! ※ プリセットカラーには、オープンソースの Design System である Pattern
UI DesignツールFigmaで資料作成する時にパワポと同じようにページナンバーを振りたいときがあります。下記の画像は各ページの共通フッターで右端の数字がページナンバーを想定してますがいちいち一個ずつテキストを入力するのは面倒ですよね。 なのでそんな時は「Paginate」というプラグインが便利です。 使い方 使い方はとっても簡単。インストール後に「Plugins」→「Paginate」→「Open Paginate」でプラグインを開く。 開いた後は番号を振るコンポーネントを一つ選択して「Paginate」をクリック。するとそれぞれのコンポーネントに連番で数字が振られます。 ※コンポーネントの名前は全部一致していることが前提。 Figmaで資料作成時のページナンバー付与や連番で数字を振りたい時はおすすめです。
今回は、FigmaとFigJamで任意の値を入力して、凡例付きの多角形グラフ(レーダーチャート)を生成できるプラグイン「シンプルな多角形グラフの生成」の紹介です。スライド資料用のグラフや、ウェブサイトに掲載する簡単なレーダーチャートが手っ取り早く欲しい時などに便利です。 ちなみに、このプラグインは当サイトのオーナーが作成・公開したものになります。このプラグインでは、任意の値を入力して多角形グラフを生成できます。 生成されたグラフと目盛りは、色やテキストなどを生成後に編集できます。Figma・FigJamの両方で利用できます。 この記事のターゲットFigma・FigJamでシンプルな棒グラフやヒストグラムを作成したい方 Figma・FigJamで色やテキストを後から編集できる棒グラフを素早く作成したい方 「シンプルな多角形グラフの生成」の使い方Figma・FigJamでリソースツールからプラ
今回はFigmaのオートレイアウト(Auto layout)の機能のひとつである折り返し(Wrap)の使い方を紹介します。これにより、アプリケーションなどの画面レイアウトで横幅が成り行きで決まる場合に自動で折り返しされるようになるため、レスポンシブ対応などで便利です。 この記事のターゲットFigmaで幅に応じて成り行きでコンテンツを自動的に折り返したい方 Figmaでオートレイアウトで折り返しが発生する最小幅・最大幅を設定したい方 オートレイアウトの基本的な使い方今回紹介する折り返し(Wrap)は、オートレイアウト(Auto layout)という自動的にコンテンツを整列させる機能のオプションのひとつです。 そもそもオートレイアウト(Auto layout)がよくわからないという方は、以下の記事で基本的な使い方を紹介していますので参考にしてください。なお、記事執筆時点では今回紹介する「Wra
2023 Advent Calendar12月11日を担当します、コーポレート・マーケティング室、デザインチームの高森です。アプトポッドのデザインチームでは、2022年からメインのUIデザインツールとしてFigmaを使用しています。 デザインチームでは実証実験向けにプロトタイプを作成することがあるのですが、今回カーナビアプリの機能検証をウィザード法(製品やシステムを人間が完成しているように動かすプロトタイプ技法)で行う実証実験にて、Figmaでプロトタイプを作成する機会がありました。(その他のプロトタイプ事例は過去のAdvent Calendarでも紹介させていただきました) 今回やや苦労したのが、音声再生が必要という点でした。現在Figmaには動画ファイルを再生できる機能はありますが音声ファイルを埋め込める機能がありません。プラグインを使って他のアプリと連携等で作成することは可能でしたが
こんにちは、デザイナーの田口です(@fuyuna_design)。 先日、Figma Communityにnecco memoのファイルを公開しました。 「necco memo – Sticky notes」をFigma Communityに公開しました。 はじめてのファイル公開は少しドキドキしましたが、使ってもらえたりリアクションをもらえたりしてうれしいです。公開してよかったです。 公開までの手順やコツをまとめたので、これからオリジナルファイルを公開したい方のお役に立てればうれしいです。 ファイルを公開するまでの流れ アカウントのURLを取得する 公開するファイルを用意する サムネイル画像を作成する Publishして公開🎉 以下、はじめての人でもファイルが公開できるように手順を解説していきます。 アカウントのURLを取得する まずはファイルを公開する場所、URLを用意します。 nec
Figmaのベクターネットワークではこのようなシェイプも作成できます 一般的なベクターパスに慣れていると戸惑う部分もありますが、理解すればさほど難しくはありません。 ここからはFigmaのベクターネットワークの使い方を案内します。 用語 使い方を説明するにあたり、用語を案内しておきます。 ※ 当ブログ記事内での呼び方です。正確な名称と異なってる可能性もありますのでご了承ください ベクター編集モード ベクターネットワークはベクター編集モードで編集できます。 ベクター編集モードでは、個々のアンカーポイント、パス、またはシェイプ全体のプロパティを調整、変更することができます。 ベクター編集モードに入る ベクター編集モードーには下記のいずれかの操作で入れます。 パスを選択してEnterキーを押すパスを選択してedit objectアイコンをクリックパスをダブルクリック edit objectアイコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く