アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか? そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の[Add to Canvas]をクリックすると
このFigmaプラグインは何?このプラグインはメジャーなカラーパレット設計のツールからExportできるJSONを、FigmaのVariablesに取り込むプラグインです。 2023年11月11日時点で対応しているのは下記です。 Primer Prism Huetone それぞれのツールの補足も一応書いておきます。 Primer Prism PrismはGitHubのデザインシステムであるPrimerのチームが開発したツールです。HSLの値あるいはカーブを操作して色を決められます。また同じ色相の組み合わせをWCAG 2系のコントラスト比を元に評価できます。彼らの設計に基づくツールなので、柔軟性はないですがシンプルなツールと言えます。 Exportする方法Exportは画面の右上にあるExportからできます。表示されるJSONをクリップボードにコピーしてください。 Figma Variab
ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している
Figmaではファイル上で使う色をStylesとして登録ができます。 標準のFigmaの機能だとこれをひとつずつ、サイドのDesignパネルからやっていくことになるので、色数が多い場合は少し大変です。 そこで、プラグインを活用しながらもう少し効率的にやりましょう。 手順 1. Styleをまとめて登録するプラグインをインストールする Chroma Colors Chroma Colorsは、選択したオブジェクトのfillの色をStyle登録するというシンプルなプラグインです。このときに登録されるStyleの名前はオブジェクトのレイヤー名が使われます。 2. 登録したい色をfillにしたオブジェクトを並べる 登録する色を整理するのを兼ねて、登録したい色のオブジェクトを並べます。 3. ひとつずつレイヤー名をリネームする これが少し煩わしい作業ですが、あとでリネームするより楽なのでがんばりまし
Figmaプラグイン『ToC Helper』作りました ToC HelperはFigmaファイルの目次(Table of Contents)をつくるのを少し楽にするためのFigmaプラグインです。 ToC Helper – Figma モチベーション Figmaのデータ管理のTipsとして、Page内のFrameなどへのリンクを取得し、ページ内リンクのようにFigma上でリンクをやるという方法があります。 FigmaはPageを俯瞰して見られるので、多くの場合は目次まで用意しなくとも困ることは少ないとは思いますが、ある程度まとまったオンボーディング資料などでは目次があるにはこしたことはありません。 ただFigmaに自動で生成するような機能はないので、やるなら手動で一つずつリンクを拾っていかないといけないわけですが、それは少し煩わしいと感じ、少しでも楽になりそうなプラグインはできないかと考え
Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG). If ...
Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 特にお勧めしたいFigmaのプラグイン 終わりに はじめに 私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。 私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良
こんにちは、くだくらげです。今年のはじめにはじめてのUIデザインという本を共著で書きました。 PEAKSさんから出版しており購入できますので、ご興味ある方はぜひ手にとってみていただけると嬉しいです。 peaks.cc 概要 FigmaにもようやくPlugin機能が公開されましたね。公開直後からいろいろと便利なPluginが出てましたが、まだまだ数は少ない印象です。 個人的にどうしても欲しいプラグインがあったのですが、探してみても見つからなかったので作りました。 以前Sketchのときにも作ったプラグインで、シンプルにテキストをコピペするだけのFigma Pluginです。 そんなの必要?!と思う方もいるかも知れませんが、私は作って使ってみて本当に良かったです。現状Figmaではテキストのコピー&ペーストができますが、テキストだけをコピー&ペーストすることはできませ。テキストと一緒にFont
こんにちは、くだくらげです。今年のはじめにはじめてのUIデザインという本を共著で書きました。 PEAKSさんから出版しており購入できますので、ご興味ある方はぜひ手にとってみていただけると嬉しいです。 peaks.cc 概要 FigmaにもようやくPlugin機能が公開されましたね。 私もどうしても欲しかったテキストのみ(Styleなし)をコピペするだけのプラグインを作りました。地味に便利なプラグインなので、よろしければ使ってみてください。 Plugin機能はまだまだ公開されたばかりなので、Figma Pluginに関するドキュメント(Tipsブログとか)はまだ少ないですが、割と簡単に作れてしまうのでFigma Pluginの作り方をかんたんに紹介したいと思います。 これからPluginを書いてみようかなと思っている方の参考になればと思います。 概要 基本的にはHTML + Javascri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く