HTML化し易いFigmaテンプレートを作ろうとして困った点

• レイアウトグリッドを使うと境界でスナップが効くが、幅指定は列数や%指定が出来ないのでHTML化やレスポンシブ対応が難しそう。

  • Variablesのモード機能を使えば端末別に幅を定義出来るかもしれないものの、モード機能はダークモード対応でも使うので、ダークモード対応+レスポンシブ対応が必要だとモード数が2倍になってしまう。

• レイアウトグリッドを使ったフレームの中に別のフレームを作成、その中に新しいフレームを作ると、スナップしてくれない
  

  • これについては以下のようにルーラーでガイド線を引くとスナップするようになるので、何とか対処できそう。
    

ぼかしやシャドウの値には変数が使えるので、エフェクトスタイルは定義せず、エフェクトの値を変数化する方法もあるかもしれない。

例えばコンポーネントに「iconを指定する」プロパティを設けたい場合、以下のような差が発生します。

• Figma (表示有無、アイコンの内容で2つプロパティ定義が必要)
  • showIcon: bool
  • icon: Component
• Vue/React (1つだけで表現可能)
  • icon?: Icon

VueやReactではページ全体に対するレイアウトがあり、そこでヘッダーやサイドメニューを定義します。
Figmaでも同じことが出来なくはないですが、レイアウト用コンポーネントのコンテンツ部分を「インスタンスの入れ替え」で実現する必要があり、編集作業が行いにくくなってしまいます。

TODO: 具体的にどう作りにくいか