![見出し画像](https://assets.st-note.com/production/uploads/images/124328057/rectangle_large_type_2_04c6598cefb49f4812e5e82aa4cd99b7.png?width=1200)
知ってるとちょっとドヤれるFigmaの小技!! テキスト加工・Autolayout、他
Figmaを使っているゲームUIデザイナーが
「あったらいいな!」でもそんなに使わない・・!と思う機能を寄せ集めました。何かのきっかけで披露してふふんってしましょう(・ω・)w
文字をアウトライン化する
![](https://assets.st-note.com/img/1702267930385-4j1Gs5EkTZ.png?width=1200)
テキストをアウトライン化できます。
ベクター状態での変形が可能になります。
テキスト状態に戻すことはできません。
文字を角丸にする
![](https://assets.st-note.com/img/1702268000886-OSYV0IS9Hh.png?width=1200)
テキストと図形を Union すると、テキストを角丸にすることができます。
この状態になっても、テキストの編集は可能です。
余白の自動調整・自動整列(Auto Layout)
![](https://assets.st-note.com/img/1702268061264-x9DOfwH0Tq.png?width=1200)
Auto layoutを設定すると、サイズを変化させてもpaddingや中心位置が維持されます。
![](https://assets.st-note.com/img/1702268089721-QeZ2JbCIF2.png?width=1200)
frameのサイズを変更した際に、どのように整列するかを設定できます。
並べたときの間隔も設定できます。(「10」と表示されている部分です。)
![](https://assets.st-note.com/img/1702268110987-lzjXOmZogr.png?width=1200)
フォントサイズが違うテキストのベースラインを揃えることができます。テキストもAuto layout使えるんやで、の例(あまり使わないかも。)
オブジェクト名の一括変換・連番
![](https://assets.st-note.com/img/1702268146641-fDInPRrfqH.png?width=1200)
選択したレイヤーを同じ名前にすることができます。
または、連番、正規表現などを付与することができます。
レイヤー名で検索
![](https://assets.st-note.com/img/1702268178828-epKLUJ6wYm.png?width=1200)
レイヤー名で検索ができます。他にも、属性で絞込検索も可能です。
検索結果は黄色くピックアップされます。(上画像)
そして、その画像がある位置にステージがジャンプします。
スマホにミラーリングする
![](https://assets.st-note.com/img/1702268198612-O66TF5q29q.png?width=1200)
「Figma Mirror」アプリをインストールして同じアカウントでログインをします。
あなたのスマートフォン上で、デザインを確認することができます。
プロトタイプ状態の場合、ボタンなどの機能の操作もできます。
この記事が気に入ったらサポートをしてみませんか?