0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FigmaのFrame自体を一部マスク後、エクスポート(画像書き出し)する方法

Posted at

Figma_Frame自体を一部マスク後、エクスポート(画像書き出し)する方法

1、マスク対象にしたいFrameを選択の上、グループ化
※ショートカット:ctrl + g

2、切り取りたい形状のオブジェクトを用意し、レイヤーパネル上、1と同階層に配置する。
※2で作成したオブジェクトは1の下側に来るように配置すること。

3、レイヤーパネル上で1と2を両方選択した状態で右クリック→マスクとして使用を選択。
※ショートカット:ctrl + cmd + m

4、3で作成したオブジェクトをエクスポートし完了。

ここまでで期待する形状でFrameの内容を画像として使用できるようになる。

おまけ

ここで書き出した画像を背景画像として繰り返し表示できるようにする場合のスタイル
background: url(../img/hogehoge.png) repeat top center / 32px;

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?