Figma

【解決】Figmaにもテキストばらしがほしい!

FigmaプラグインSplit Rows for Figma アイキャッチ図版

Figmaでレイアウト・図版・スライドなどを作る際には,1行程度のテキストを大量に用意することになります。

通常ですと,テキストエディタなどで入力した改行区切りのテキストを1行ずつコピペして分割していきます。ただこれはかなり疲弊する作業です。幸いなことに,Figmaではそれを実現するプラグインがすでにいくつか公開されています。

定番なのはNisa Textのようです。しかしスタイルが1文字目で統一されたり,位置が変わったりしてしまうところに改善の余地があります。見つけた中ではSplit textが比較的便利でしたが,完璧ではありません。

しかし,既存の機能やプラグインに満足できなければ自分で作ってしまえばいいのです。

そこで今回は,テキストを行ごと/文字ごとに分割したり,区切り文字で分割・結合するFigma用プラグイン,Split Rows for Figma を紹介します。

続きを読む

【まとめ】キーオブジェクトに整列・分布を実現するしくみ(Figmaプラグイン)

キーオブジェクトの推察 概念図

こちらはFigma 開発 Advent Calendar 2022,23日目の記事です。

2022年12月に,キーオブジェクトに整列・分布するFigma/FigJam用プラグイン「Singari」を公開しました。すでにFigmaコミュニティの次のページからアクセス可能です。

FigmaプラグインSingari イメージ画像

Adobe Illustratorの同機能と似た,キャンバス上で追加選択したアイテムをキーオブジェクトとして扱う操作にこだわって開発しています。ぜひ使ってみてください。

使用方法など詳細は,別記事【解決】Figmaでもキーオブジェクトに整列・分布したい!にまとめました。興味があるかたはそちらをどうぞ。

今回の記事では開発者向けに,プラグインAPIでは不可能に見える 「キャンバス上で追加選択したアイテムをキーオブジェクトとして扱う操作」を実現した,そのしくみを解説します。

というのも,Figmaでは「こう考えて,こう開発しました」という内容の記事が公開されていて面白いのです。それに倣ってみようと思います。

続きを読む

【解決】Figmaでもキーオブジェクトに整列・分布したい!

FigmaプラグインSingari アイキャッチ図版

使うアプリが何であれ,レイアウトやデザインを扱っていれば整列は毎日することでしょう。

したたか企画ではこれまで,次のような手段で整列の生産性を向上させてきました。

そして現在Figmaを使うようになり,またしても本体機能として存在しないキーオブジェクトに整列・分布をしたくなっています。

そこでまた丸ごと機能を作りました。最後に選択したアイテムをキーオブジェクトとして扱い,整列や分布を実行するFigma/FigJam用プラグイン,Singari(しんがり) を紹介します。

続きを読む

【解決】Figmaでも⌘+spaceで範囲ズームしたい!

AreaZoom for Figma アイキャッチ図版

macOS版のFigmaデスクトップアプリでは,command+space+スクロールで画面表示の拡大・縮小ができます。しかし普段からAdobeアプリを使用しているかたは,command+space+範囲ドラッグで指定位置を拡大するくせがついていることでしょう。

Figmaでも一応その操作でズームできるときもあるのですが,タイミングがずれると発動しなかったり,何か別の機能になっていたりします。不安定で頼れません。

幸いなことに,Zキーを押しながらドラッグをすると安定して範囲ズームが可能です。つまり,Karabiner-Elementsなどのアプリを使ってcommand+spaceをZキーに変換すれば,目的の動作を実現できるわけです。

そこで今回は Karabiner-Elementsを使い,Figmaデスクトップアプリでcommand+space+ドラッグの範囲ズームを使えるようにする方法 を紹介します。

続きを読む