【Figma】使ってみる。

Figmaとは？

会員登録をすれば誰でも無料で使えるデザインツールです。PhotoshopやXDなどのAdobe製品に取って代わるツールとして最近出てきている。デザインカンプを作るツール。

ブラウザ上でも使えるし、専用のアプリをインストールして使うこともできる。人気の秘訣としてはブラウザ上で使えてブラウザ上で完結するからと思われる。

CSSを自動生成できる。

プロトタイプ

実際のWebサイトに近い動きも再現できる機能。

普及の背景

PhotoshopはWebデザインに特化したツールではなかった。なので、AdobeでWebデザインに特化したツールとして2017年ごろに普及したのがXDだった。（デザインのリンク共有、CSS自動生成などはこれでもできた。）

同じ時期にFigmaもリリースされました。2022年9月にAdobeがFigmaを買収すると発表しました。（ただ、この買収は失敗に終わっている。）

現在はXDはAdobeはメンテナンスモードになっていていつ終わらせるかという段階になっています。

利点

直感的に操作ができるのでデザイナーじゃなくてもデザインのラフを作ったりすることができる。

ほとんどの機能を完全無料で使える。

デザイン制作に使える基本機能は全て無料プランに入っている。

デスクトップ版

Web版とインストール版があります。インストール版の方が高速に動作するのでできればインストール版の方が良いでしょう。（「デスクトップアプリを入手」とクリックすればインストーラーが入手できます。）

一応、デスクトップ版でもWeb上で起動時にサインインが必要になります。

UI

2024年6月から新しいUIがベータ版としてリリースされました。大幅にUIが変わっているのでそれ以前の情報とそれ以後の情報で明確に区別する必要があります。

プラン

Starter

個人利用ならこれで十分。使えるのは「下書き（ドラフト）」のみ。

Professional

チームで使ってくならこれ。共同編集可能なプロジェクトという機能が無制限に使える。

「開発モード」というコーディングの連携に使える。（VSCodeと連携してコード生成もできる。）

機能選択

どちらを選んでもどちらも使える。

Design with Figma

デザイン機能

Whiteboard in FigJam

ホワイトボード機能。アイディア出しに向いているツール。

Present Slide

プレゼンテーション機能。

ホーム画面

Draft(下書き)

ここで新しくデザインファイルを作ったりしていく。自分だけがアクセスするもの。複数人で共同作業はできないがリンクを共有して別の人に見てもらうことはできる。

また、他の人にコメントを入れてもらうこともできる。

Team Project

チームで共有するものを置く場所。

チュートリアル

日本語でチュートリアルを作成して下さっているかたがいらっしゃいます。

https://www.figma.com/community/file/1228577958737472070

コーディングをする人

6.エクスポート：画像の書き出し

プラグイン

無料プランのままでも使える。

有名なやつ

Unsplash

高品質なフリー素材を、Figmaですぐ読み込んで使えるプラグイン。いちいち外部サイトまで探しに行かなくて良いので楽。

Blobs

有機的な形の図形を、ワンクリックで生成できるプラグイン

html.to.design

Webサイトのデザインを、Figmaで編集可能な状態でインポートしてくれるプラグイン。URLを入力してキャプチャしてFigmaに復元できる。

用途としては、今あるWebデザインのリニューアルの時にお客さんに説明するときに重宝する。

開発モード（有料版のみ）

コードのマーク</>が下に出ている。

基本用語

フレーム

デザインの土台

プリセット

iPhone16など便利なプリセットがあり、そのサイズを選べたりする。

レイヤー

図形同士の重なりを確認できる。

Section(セクション)

作業エリアとして確保したい場合に使う。

用途

テキストスタイルの登録