【完全無料】デザインツール「Figma」マガジン

本

無料のデザインツール『Figma』のマガジンです！ちょっとした小技を初心者でも分かるように説明していきます！webで楽しく描いていきましょう😉

運営しているクリエイター: Seika_USA

#デザインチュートリアル

隠れたレイヤーが見たい！ #Figma

今回はアウトラインの表示方法をご紹介します！隠れたレイヤーの選択、調整が簡単になります。ツールバーの右上にある［ズーム／表示オプション］メニューをクリック。 Show Outlines をクリック。非表示のレイヤーを含めたい場合はInclude hidden layersを、オブジェクトの境界線を含めたい場合はInclude object boundsを選択。ショートカットはこちらです。 ⌘ Command / ControlY Shift+O 👇

画像を挿入したい！ #Figma

今回は、画像の挿入を3つご紹介したいと思います！画像挿入その１画像を選択し、そのままフレームに移動。これで完成です。画像挿入その2手間はかかりますが、Fillからもできます。 1, 挿入したい画像を準備。 2, フレームを描き、右側のパネルからfillをクリック。新たなパネルが開いたら、Solidの右側にある矢印をクリックしImageを選択。 3, Choose Imageで用意した画像を選択。出来ました！画像挿入その3画像は用意するのがそもそも大変

カードをフレームの外に出したい！#Figma

今回は「Clip Content」を使って、カードをフレームの外に出したいと思います。 Clip Contentはフレームをクリックすると、右側のパネルに出てきます。チェックが入っているので、このチェックを外す。カードをフレームの外に出すことができました！😊 今回はここまでです！また次の記事でお会いしましょう～😉 Follow me here😊 Figma │Instagram | Twitter │Dribbble │Behance│ Linkedin | No

等間隔で円状に並べたい！#Figma

今回はFigmaを使って、円を等間隔で円状に並べたいと思います！手順📝フレームを準備。(ショートカットはF) 円を一つ描く。(ショートカットはO) シフトキーを押しながらドラックすると正円ができます。円を複製(ctrl +D)。真下に配置(ショートカットはAlt + H)。グループ化(ctrl +G)。グループを複製。Shiftをおしながら、グループを回す。 5を繰り返す。完成です😊 こちらのカラーはFLAT UIを利用しました。プラグイン円だけ

Variantsをやってみたい！#Figma

今回はFigmaのVariants(バリアンツ)を使ってみたいと思います！手順📝1, 好きな文字を書く。 2, shift + Aでフレームにする。 3, fillで好きな色に染める。フレームの角をとる。(今回は16) 4, Auto layout で文字をセンターに揃える。 5, フレームの名前を変える。(今回はbotton) 6, コンポーネントにする。(ctrl + Alt + K : Windoesのショートカット) 左側のアセットパネルを開くと、コンポーネン