はじめに
みなさんは、FigmaのWidgetでUIを作ろうとしたことがありますか？
この記事では、Figma Widgetでインターフェースを作る方法を解説しようと思います。
Figma Widgetでインターフェースを作る
Figma Widgetでインターフェースを作るには、Figma Widgetで使えるコンポーネントを利用します。
コンポーネントは、カスタムインタラクティブウィジェットを構築するために使用できるレイヤーです。
Figma Widgetでインターフェースを作るのに使えるコンポーネントは以下のとおりです。
⚪︎ AutoLayout
AutoLayoutは、自動レイアウトが自動的に適用されるフレームです。
そのため、direction・horizontalAlignItems・verticalAlignItems・spacing・`paddingといったAutoLayout特有の小道具を追加で受け取ります。
⚪︎ Frame
Frameは、Figma内の非オートレイアウトのFrameとまったく同じように動作するコンポーネントです。
そのため、子要素はxとyの制約を使って配置されます。
⚪︎ Text
テキスト・コンポーネントは、Figma でテキストに適用できるプロパティの大部分をサポートしており、ウィジェットにテキストを含める主な方法です！
⚪︎ Rectangle
Rectangleは子や自動レイアウトのないフレームです。
⚪︎ Image
Imageは画像の塗りつぶしを持つ矩形の構文上の糖分です。
fill propの代わりにsrc propがあり、URL文字列かImagePaintのどちらかを指定します。
URL文字列が渡された場合は、それがImagePaintの作成に使用されます。
⚪︎ Ellipse
Ellipseは楕円や円が作成されるコンポーネントです。
⚪︎ SVG
SVGは、ウィジェット内で SVG を直接レンダリングできるコンポーネントです。
⚪︎ Line
Lineは線を引くことができるコンポーネントです。
⚪︎ Input
Inputは、ウィジェット内で直接テキストを編集することができるコンポーネントです。
これにより、ウィジェット内でテキスト コンポーネントを入力または更新できるようになります。
⚪︎ Fragment
Fragmentは、ReactのFragmentと同様に、childrenとkeyのみを受け取るコンポーネントです。
⚪︎ Span
Spanは、Textコンポーネント内の文字の範囲をスタイリングするために使用されるコンポーネントです。
そのため、Spanは、Text コポーネントに存在するすべてのテキスト スタイリング プロパティをサポートしています。
Spanは、Textコンポーネントか別のSpanの子にしかなれません。
まとめ
この記事では、Figma Widgetでインターフェースを作る方法を解説しました。
ぜひこの記事を参考にFigma Widgetのインターフェースを作ってみてください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。