Figmaで作るマイクロインタラクションとアニメーション | C5logMotionElementsさん主催のウェビナーにて、Figmaで作るマイクロインタラクションとアニメーションに関するお話をさせていただきました。 【無料ウェビナー】Figmaで作るマイクロインタラクションとアニメーション FigmaでWebデザインを行うにあたって、ページ遷移のプロトタイピングだけではなく、ユーザーの印象に残るマイクロインタラクションや、動きを取り入れたコンテンツを制作する手法をご紹介します。
Figmaのレイヤー名を連番で整理！効率アップのための手順
はじめに Figmaで作業をしていて、レイヤーを整理したくなる場面はありませんか？ 今回はFigmaのデフォルトの機能とプラグインを使用して、効率良くレイヤーを整理する方法を解説します。 レイヤー名を一括変更 まずはレイヤー名を一括で変更する機能を使ってみましょう。 変更したいレイヤーを全て選択し、『command』+『R』でウィンドウを開きます。 今回は「box01,box02,box03～」と連番を振っていきます。 「変更後の名前」の箇所に「box」と記入した後に『番号↑』をクリックします。 すると「box$nn」と記入されました。 左側にプレビューがあるので上手く反映されているか確認します。 問題なければ右下の「名前を変更」を選択しましょう。 レイヤーを確認すると、きちんと「box01,box02,box03～」と名前が変更されていますね。 レイヤーの順序整理 次に、先ほど連番を振っ
Figmaのプラグインで、特定のノードを取得する方法
デザインエンジニアのりょーたです。 最近、「FigTodo」というFigmaのプラグインをリリースしました✨ 簡単にいうと、期限や担当者を設定できるタスク管理ツールなのですが、機能の１つに、アンカーリンクの作成があります。外部リンク（figmaファイル内の選択範囲へのリンクでない）であればブラウザでページを開き、ファイル内の特定のノードへのリンクであれば、そのノードの位置に移動します（下記参照） ノードとは Figmaにおけるノード（以降Nodeと記載します）とは、Figmaのドキュメント内の個々のオブジェクトや要素を表現するものであり、図形やテキスト、グループやセクションなど様々なオブジェクトに一意のIDが割り当てられています。 この記事は、取得したNodeの位置に移動させる処理を実装するのに試行錯誤したため、その手順について共有します。 この記事で紹介するのは、デバッグをしつつ考えた方
Figma APIで特定File内の任意のFrame名を全てクリップボードにコピーする - Qiita
@xrxoxcxox さんのcurlでやる方法ではなく、JavaScriptでやる方法です。 やりたいこと 下記のようなことを想定しています。 FigmaのFrame名を画面名やIDにしており、それをスプレッドシート等で管理（一覧化）するために、Figmaから対象のFrame名一覧を取得したい どうやるか DevToolsのConsoleを利用し、JavaScriptで取得する 手順 下記のような手順で実行します。 Figmaの該当ファイルを開く ⌘ + Option + I or Ctrl + Shift + I でDevToolsを開き、Consoleタブを開く 抽出したいFigmaのFrameを選択する 後述するコードをConsoleに貼り付けて実行する クリップボードに選択したFrame名がコピーされるので、それをスプレッドシートなどに貼り付ける let selection = f
【初心者向け】Figmaの便利Tips8選｜セブンデックス
Figmaはコラボレーションツールという通り、デザイナー以外の方にも多く利用されています。 セブンデックスでも、デザイン業務だけでなく様々なフェーズでディレクターやクライアントとFigmaを利用しています。 私は社内でちょこちょこFigma Tipsを流しているので、みなさんから使い方の質問をされることがよくあります。 自分が当たり前に使っていることでも、意外と「早く知りたかったです」と言ってもらえることが多いので、今回は私がよく聞かれる&よく使うTipsをご紹介します！ Tips以外にも、Figmaについて基礎から知りたい場合は以下の記事がおすすめです！ コピペ編 別のフレームの同じ位置に同じオブジェクトを配置したい 「同じところに見出しを入れたい！」という時は、コピー先のフレームを選択してからペースト（⌘command+V）すると、コピー元と同じ位置に配置されます。 また、複数フレーム
【Figma】おすすめのプラグインのご紹介！テキスト・フォント編① | Dezainaz Inc. |「デザインで世界を生き生きとさせる」（合同会社デザイナズ）
Figmaのプラグインは、普段のデザインの作業をより効率的に進めることができる機能です。 今回はフォントやテキストのデザインでお悩みの方におすすめしたいプラグインの中から、フォント選定やテキスト入力の際に役にたつプラグインをご紹介いたします！ ぜひ参考にしてみてくださいね！ フォント選定におすすめなプラグインフォントデザインを即座に確認「Japanese Font Picker」Figmaの仕様上、フォントを選ぶ際に表示されるタブには英語表記だけで、日本語だとどのようなフォントデザインになるのかが分かりづらいです。 気に入ったフォントを実行してみると、日本語対応していなかった…なんてこともあると思います。 このプラグインは日本語のフォントデザインを即座に確認することができるものです。 使い方は通常のプラグインと同様に、プラグインの検索窓からJapanese Font Pickerを実行する
Figma Plugin「Pie Chart Generator」を作りました - feb19
Figma Plugin「Pie Chart Generator」を作りましたdate2024.7.23(Tue.)tagsPluginsFigmaDesign 円グラフが作れる Figma プラグイン「Pie Chart Generator」を公開しました。シンプルなものが欲しかったので作りました。 行区切りで値を入力し、Create で円グラフが作れます。Google 風の Colorful なカラースケールや、グレースケール、単色スケールなどのカラープリセットを用意しています。※それぞれのパーツはレイヤーに分かれており、編集可能な状態で生成できます。以前から使っていて無料公開する理由が特になかったのですが、有休消化期間で暇なのでなんとなく公開してみました。各所でご紹介いただけると幸いです！ ※ プリセットカラーには、オープンソースの Design System である Pattern
Figmaで資料作成するときに便利なプラグイン「Paginate」 - Qiita
UI DesignツールFigmaで資料作成する時にパワポと同じようにページナンバーを振りたいときがあります。下記の画像は各ページの共通フッターで右端の数字がページナンバーを想定してますがいちいち一個ずつテキストを入力するのは面倒ですよね。 なのでそんな時は「Paginate」というプラグインが便利です。 使い方 使い方はとっても簡単。インストール後に「Plugins」→「Paginate」→「Open Paginate」でプラグインを開く。 開いた後は番号を振るコンポーネントを一つ選択して「Paginate」をクリック。するとそれぞれのコンポーネントに連番で数字が振られます。 ※コンポーネントの名前は全部一致していることが前提。 Figmaで資料作成時のページナンバー付与や連番で数字を振りたい時はおすすめです。
Figmaでシンプルな多角形グラフ（レーダーチャート）を作成する方法 | wentz-design.com
今回は、FigmaとFigJamで任意の値を入力して、凡例付きの多角形グラフ（レーダーチャート）を生成できるプラグイン「シンプルな多角形グラフの生成」の紹介です。スライド資料用のグラフや、ウェブサイトに掲載する簡単なレーダーチャートが手っ取り早く欲しい時などに便利です。 ちなみに、このプラグインは当サイトのオーナーが作成・公開したものになります。このプラグインでは、任意の値を入力して多角形グラフを生成できます。 生成されたグラフと目盛りは、色やテキストなどを生成後に編集できます。Figma・FigJamの両方で利用できます。 この記事のターゲットFigma・FigJamでシンプルな棒グラフやヒストグラムを作成したい方 Figma・FigJamで色やテキストを後から編集できる棒グラフを素早く作成したい方 「シンプルな多角形グラフの生成」の使い方Figma・FigJamでリソースツールからプラ
Figmaのオートレイアウトで折り返しできる「Wrap」の使い方 | wentz-design.com
今回はFigmaのオートレイアウト（Auto layout）の機能のひとつである折り返し（Wrap）の使い方を紹介します。これにより、アプリケーションなどの画面レイアウトで横幅が成り行きで決まる場合に自動で折り返しされるようになるため、レスポンシブ対応などで便利です。 この記事のターゲットFigmaで幅に応じて成り行きでコンテンツを自動的に折り返したい方 Figmaでオートレイアウトで折り返しが発生する最小幅・最大幅を設定したい方 オートレイアウトの基本的な使い方今回紹介する折り返し（Wrap）は、オートレイアウト（Auto layout）という自動的にコンテンツを整列させる機能のオプションのひとつです。 そもそもオートレイアウト（Auto layout）がよくわからないという方は、以下の記事で基本的な使い方を紹介していますので参考にしてください。なお、記事執筆時点では今回紹介する「Wra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Change Properties Variant Order
https://x.com/muuuuu_chang/status/1820701649452818819
https://www.figma.com/community/file/1372969251006652467/microsoft-fabric-visuals-kit
Measure | Figma
https://x.com/y_toku/status/1806485519876169900
https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties
GitHub - figma/code-connect: A tool for connecting your design system components in code with your design system in Figma
Musho.ai
Generate Design Systems quickly - Figr Identity (FREE BETA) | Figma
Cleaner | Figma