マガジンのカバー画像

Figma のまとめ

320
デザインツール Figma の使い方、勉強になる記事などを独断と偏見でまとめたマガジンです。 (人力なので漏れてたらすみません🙏)
運営しているクリエイター

#プラグイン

FigmaでFigmotionのプラグインを使ってみた

FigmaでFigmotionのプラグインを使ってみた

こんにちは、マスダです。
みなさん!Figmaにアップデートが来ました!プラグインを入れられるようになりました。

そこで、私が気になったプラグインで少し遊んでみました。

それは…Figmotionです。簡単なアニメーションを作成できるプラグインです。前からアニメーションしてみたかったんですよね~。

ということで、作成したのがこちら。

弊社ゴーリストのファビコン、Gのマークを使ってアニメーシ

もっとみる
Figma便利プラグインまとめ

Figma便利プラグインまとめ

★5のプラグイン ▼Text Styles Generator登録済みのテキストStylesを別ファイルに移植できる

テキストスタイルを保存しているファイルから Plugin > Text Styles Generator > Draw current styles で登録済みのスタイルをテキストで書き出してくれる

そのまま別ファイルに移動させ Generate Text Styles をする

もっとみる
Figmaで既に作ってしまったフレーム(Frame)をコンポーネント(Component)に置き換える方法

Figmaで既に作ってしまったフレーム(Frame)をコンポーネント(Component)に置き換える方法

Figmaでデザインを作る際、例えばサイトの設計をしている場合、ワイヤーをどんどん作っていって、いざ形が決まったのでコンポーネント化(ライブラリ化)しようと思ったら後戻りがえらいことになっている!!

ちゃんと最初から設計して、最小限のコンポーネントを整理してから始めればこんなことにはならないかもしれませんが、プロジェクトやUIを考える際に適時適切なデザインで作り直しちゃうとこういう問題がよくでて

もっとみる
Figmaのおすすめプラグイン7選 | フォトショ、イラレはもう不要!?

Figmaのおすすめプラグイン7選 | フォトショ、イラレはもう不要!?

こんにちは、スマートキャンプデザイナーの柿澤です。

最近はめっきりPhotoshopとIllustratorを開く機会が減ってきました。
というのもFigmaのプラグインを活用することでPhotoshopやIllustratorでしかできなかったことが徐々に少なくなってきているからです。

個人的にPhotoshopやIllustratorは動作が重いためあまり開く気にはなれず...
多くのこと

もっとみる
Figmaで使えるやや高機能な付箋Widgetを作りました

Figmaで使えるやや高機能な付箋Widgetを作りました

そもそもWidgetって?Figma WidgetはFigmaのホワイトボードツールであるFigJamで使えてた機能です。Pluginとは異なり、Figmaのファイル上にコンポーネントのひとつのように表示することができ、自分以外のユーザーからみても閲覧・操作ができるものです。

このWidgetがFigJamでしか使えなかったのですが、2022年6月からFigmaでも使えるようになりました。

A

もっとみる
Figmaで大きな画像を張り付けると画質が悪くなる(4096pxの限界)のを超える方法

Figmaで大きな画像を張り付けると画質が悪くなる(4096pxの限界)のを超える方法

Figmaで4096pxを超える画像を張り付けるときに限界突破するプラグイン紹介します。

Figmaを利用してると誰もがぶつかる問題、4000pxの縦長の画像、おもにブラウザのキャプチャーを張り付けて修正指示書やワイヤーを作成する際に、「あれ?画質汚くない?」ってなったことありますよね。

これはFigmaの仕様上、縦幅や横幅の画像サイズの最大値が4096pxとなっていてそれ以上はそれを上限に圧

もっとみる
Figmaのプラグインを使って、ノーコードでHTMLメールを生成する

Figmaのプラグインを使って、ノーコードでHTMLメールを生成する

こんにちはフロントエンドエンジニアの峯です。

HTMLメール用の作成をHTMLコードベースで作成する場合、想像以上に課題が多くあります。通常のWeb上で利用するマークアップ手法では、デザイン崩れなどが発生してしまいます。

また、デザイナーがデザインしたものをエンジニアマークアップするため、もちろんその分の工数が発生します。

主な課題Tableレイアウトを使ったレイアウトが基本

通常のWeb

もっとみる
オススメのFigmaプラグイン

オススメのFigmaプラグイン

こんにちは、デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage(くらげ)株式会社のデザインチームのKです!

今回はcrageデザインチームのメンバーから聞いた、オススメのFigmaプラグインをご紹介いたします。

現状、crageではFigmaとXDの2つのデザインツールを使っています!
チーム内でもXDをメインに使っていてFigmaはま

もっとみる
便利すぎる!おすすめFigmaプラグイン7選!

便利すぎる!おすすめFigmaプラグイン7選!

こんにちは!
大阪でUI/UXデザイナーとして働いているミヤザワです。

今回は、Figmaの実務で使えるプラグインをご紹介します。
便利に使用できるプラグインばかりなので、是非最後まで見てみてください〜!

01.SkewDat
SkewDatは、文字や図形を斜めにできるプラグインです。

「このコピーを目立たせたい!」や「画像全体を斜めにして勢いを感じさせたい!」時などにおすすめです。

02

もっとみる
LottieFiles for Figma プラグインでアニメーションとプロトタイプを追加する方法

LottieFiles for Figma プラグインでアニメーションとプロトタイプを追加する方法

Figmaを使っている方なら、Figmaが、パワフルなデザイン機能と効率的なワークフローを兼ね備えていることをご存知でしょう。我々LottieFilesも、同じ思いを共有しています。だからこそ、Figmaユーザーのためにそれを実現するプラグインを作りたかったのです。

LottieFiles for Figmaプラグインは、Figmaにアニメーションやモーションデザインの要素を簡単に追加する方法を

もっとみる
Figmaの超便利でおすすめのプラグイン|フォント・テキスト編

Figmaの超便利でおすすめのプラグイン|フォント・テキスト編

今回はFigmaのプラグインの中から、特に便利でユニークな3つのプラグイン「to path」、「warp it」、「circular text」を紹介します。これらのプラグインを利用することで、テキストの配置やフォントのデザイン作業はもっと楽しく、レベルアップすること間違いなし!それでは、一つずつその機能と使用方法を見ていきましょうー

👀to path

to pathは、その名の通り、テキス

もっとみる
SkewDatが有料になっていたので代替をさがしてみた〜おすすめ6選をご紹介〜

SkewDatが有料になっていたので代替をさがしてみた〜おすすめ6選をご紹介〜

こんにちは。ちょっと株式会社デザイナーのさやです。
みなさん、Figma上の文字や図形を斜めにしてくれるプラグインで有名なSkewDatをご存知でしょうか。

私自身も重宝していたのですが、なんと2023年9月頃に有料化されていたことが発覚。
現在は7日間のフリートライアル後、課金をしないと使用ができないようになっています。

使用頻度はそれほど高いわけではないけれど、使いたい時になければ困るのが

もっとみる