FigmaでBootstrap5のデザインをする際のレイアウトグリッド設定まとめです。

##グリッドの見方

まずは簡単にグリッドレイアウトの見方です。
下の図をご覧ください。Bootstrapではお馴染みの12列で分けられたグリッドシステムになります。

それぞれについて解説します。

ブレイクポイント
デバイスの幅の切り替わるポイント。v5.0.0-alpha1からXXLが追加されました。
figmaでフレームを作る際はここの下限値をwidthに設定します。（例：XLなら1200px、MDなら768px）

コンテナの幅
ウェブサイトで実際のコンテンツの入る部分。左端のガター（赤い部分）から右端のガターまですべてを含みます。

列（ガター）の幅
列と列の間の余白。12列（青と青の間）と両端に2列（赤い部分）あります。
ルートHTMLのサイズを特にカスタマイズしていない場合、デフォルトで1rem=16pxとなり、ガターは16×1.5=24pxとなります。
両端のガターは16×.75=12pxです。

レイアウトグリッドの設定

Bootstrap5から新しく追加されたサイズです。
XLサイズで作っていれば、大抵の場合XXLも同じデザインになる場合が多いので作らずともよいサイズかと思います。

フレームは1400pxです。

フレームは1200pxです。

フレームは992pxです。

フレームは768pxです。

フレームは576pxです。

XSは少し特殊です。
コンテナの幅は0（auto）となり、ブレイクポイントの576pxに達するまでは左右のパディングがありません。
よって、グリッドも同様に横幅いっぱいに広がります。

フレームは320pxです。