【Figma】ベーシックなパターンが作れる!Figmaのパターンライブラリ「 Basic Patterns for backgrounds」

こんにちは、株式会社PentagonでUIデザイナー/Webデザイナーをしている小牧です。

デザインをしていて、「ドットやストライプなどのベーシックなパターンが欲しいな」という時がありませんか?
FigmaはIllustratorやPhotoshopのようにデフォルトのパターンがないので、いちいち自作するのは少し大変ですよね。
そんな時に活用できるのが、これから紹介する「Basic Patterns for backgrounds 」です!

【こんな人に読んで欲しい】

  • 手軽にベーシックなパターンを入れたいデザイナー
  • Figmaを使用しているデザイナー

【この記事を読むメリット】
Figmaでベーシックなパターンを使うときの簡単な方法が分かります。

【結論】
「Basic Patterns for backgrounds 」にはシンプルで使いやすいパターンが60種類以上あり、商用無料で利用できます。
さらに各パターンはSVGでダウンロード&コード取得が可能です!

目次

Figmaでパターンを作るには?

Figmaでオリジナルのパターンを作成するには、下記のような方法があります。

  1. 作った図形を画像として書き出し、「Fill」で画像を読み込んで「Tile」を適用して繰り返し配置
  2. 作った図形をコンポーネント化し、「Auto Layout」機能で繰り返し配置

簡単な手順ではありますが、「本当にシンプルなドット柄でいいんだけどな...」などという場合は少し手間に感じますよね。

ベーシックなパターンが揃ったFigmaライブラリ「Basic Patterns for backgrounds」

「Basic Patterns for backgrounds」は、Thomas Michael SemmlerさんがFigmaコミュニティで公開している、商用無料のパターンライブラリです。
前述した①の方法で作成したパターンが、60種類以上用意されています。

使い方もとても簡単です!

https://www.figma.com/community/file/978689698060140147
まずは上記のページを開き、右上の「Duplicate」のボタンを押して複製します。

Basic Pattern Repository

複製したアートボードが開いたら、「petterns」のページから使いたいパターンを選びましょう。

パターンを選択

あとはこれをコピーして、使いたいデザインアートボードでペーストをするだけです!

アートボード

「Move」ツールで拡大すると、柄の大きさはそのままで枠だけが拡大されます。

アートボード

「Zoom」ツールで拡大すると、柄自体も拡大されます。

アートボード

簡単にパターンを取り込むことができました!

SVGをダウンロード / コードを取得

「Basic Patterns for backgrounds」はFigma用のライブラリだけではなく、
手軽にSVGをダウンロードできるサイトが用意されています。
https://patterns.helloyes.dev/

Basic Pattern Repository

上記のリンクをクリックすると、右側にさまざまな柄のパターンが配置されています。
このパターンの中から好きなものを選ぶと、SVGファイルのダウンロードやコードの取得が可能です!
デザイナーだけではなくコーダーにも嬉しいライブラリですね。

まとめ

ベーシックパターンを簡単に取り入れられる、「Basic Patterns for backgrounds」のご紹介でした。
デザインの効率化に、ぜひ活用してみてください!

採用情報はこちら
目次