基本的な使い方(データ構造, レイヤーのまとめかた, オブジェクトの整列)

デザインツールであるFigmaの「基本的な概念」や「利用頻度の高い操作」について取り上げます。「Layerをまとめる方法」や「オブジェクトの整列方法」など図を交えて紹介します。
(動作確認はMacで行っています。)

デザインファイル内のデータ構造

Figmaのファイルでは、以下のような概念でデザインデータを管理しています。

748-figma-how-to-use_00.png
下記のようにデータを分割・集約して管理しています。
  • Page1
    • Frame
      • Group1
      • Group2
      • Frame1
      • Frame2
  • Page2
  • Page3

Page は、以下の用途などで活用できます。

  • プラットフォームごとのデザインを分割する
  • ComponentsやStylesを別途管理する

Group Frame など Layer をまとめる仕組みが用意されています。

効率よく利用するための準備

Layout Grid

748-figma-how-to-use_30.png

Layout Gridを利用すると、FrameにGridを表示することができます。Gridを表示することでオブジェクトを正確に配置しやすくなります。

移動幅調整(Nudge Amount)

748-figma-how-to-use_32.gif

Nudge Amountの設定にて Shift を押しながら移動する幅を調整できます。Grid幅に合わせると作業しやすくなります。

748-figma-how-to-use_31.png

Nudge Amountの設定画面は Preferences - Nudge Amount から開けます。

よく使う操作

拡大・縮小

command + + で拡大します。 command + - で縮小します。

距離測定

748-figma-how-to-use_12.gif

Layerを選択して optionをクリックすると距離が表示されます。カーソル位置によって測定される箇所が変わります。

複数オブジェクト選択

shift を押しながら別オブジェクトをクリックすることで、複数オブジェクトを選択できます。

Layer直接選択

748-figma-how-to-use_13.gif

見えている箇所をクリックしてもFrameが選択されます。中のLayerを直接選択したい場合、commandを押しながらクリックします。

複製

748-figma-how-to-use_14.gif

以下手順で簡単に複製できます。

1. option を押しながらドラッグします。
2. command + Dで複製コピーされます。

Layerをまとめる

結合・合成(Boolean Group)

748-figma-how-to-use_40_booleangroup.gif

複数Layerを選択すると上部メニューに Boolean Group のメニューが表示されます。Boolean Operation でLayerをまとめることができます。

Groupの作成
( command + G )

748-figma-how-to-use_41_group.gif
複数Layerを選択後、command + Gでグループ化できます。

Frameの作成
( command + option + G )

748-figma-how-to-use_42_frame.gif
複数Layerを選択後、command + option + GでFrame化できます。
748-figma-how-to-use_43_frame.gif

Frameの枠からはみ出た部分を非表示にできるなど、Groupより高機能です。

Group, Frameの解除
( command + shift + G )

Group、Frame両方とも command + shift + G で元に戻せます。

オブジェクトの整列

748-figma-how-to-use_50.gif

Distribute Horizontal Spacingで水平方向のスペースが等間隔になるように整列後、Align Vertical Centersで垂直方向を中心に揃えるようにしています。

プロトタイプ機能でページ遷移

遷移設定

748-figma-how-to-use_60.gif

プロパティパネルのprototypeを選択するとオブジェクトに青丸が表示されます。青丸をクリックして遷移するフレームを紐付けます。

動作確認

748-figma-how-to-use_61.png

▷ボタンをクリックします。

748-figma-how-to-use_62.gif

クリックすることで設定した遷移先フレームに切り替わりました。

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。