無料でもできること🙆
✅ 自分一人で作る(誰にも共有しない、下書きの状態)
✅ 3デザインファイルまでしか作らない・小規模のプロジェクト
✅ 閲覧専用の共有リンク発行
✅ 編集権限のある共有リンク発行(1人まで)
有料プランが必要⚠️
💪 共同で編集する:編集権限のあるリンクを2人以上に共有 ※1人ごとに課金制
💪 開発モードを使う
💪 コンポーネントをライブラリに登録して使う(デザインシステム構築)
💪 バリアブルに変数を登録
💪 バージョン履歴を30日分以上残す
★ 基本「プロフェッショナルプラン」でOK
詳しくはこちら:
figma.com/ja-jp/pricing/
ここからは細かく解説していきます。
Q. デザインファイルってどれのこと?
ホーム画面に並んでいる、作成したページ1つ1つを、デザインファイルと呼びます。
無料プランで共有できるのは、3ファイルまでです。
最初から入っているサンプルファイルは、消すことができます。
下書きフォルダに入っているファイルは、現時点では制限なしです。(ファイル容量の制限はあり)
🌟ファイルの共有方法
下書きのフォルダに、デザインファイルが入っている場合、共有ができません。
まずチームプロジェクトに移しておく必要があります。
【操作方法】
⚫︎ホーム画面(ファイル一覧画面)からの場合、
ファイルの上で右クリック → ファイル移動 → チームプロジェクトに移動
⚫︎デザイン画面からの場合、
左上の「F」のロゴの下にある、ファイル名の横のプルダウンから、ファイル移動 → チームプロジェクトに移動
➡️ 右上の青い共有ボタンを押し、「招待された人のみ」を「リンクを知っている人全員」に変え、リンクをコピー
Q. 開発モードって何?
開発モードを使うと、CSSなどのコードが自動的に生成されます。
開発者はコピーするだけで要素のスタイルを実装することができ、便利です。(複雑なレイアウトを除く)
デザイナーにはあまり影響がありません。
Q. コンポーネント? ライブラリ? とは??
コンポーネントは、例えばボタンなどのUIパーツや、ヘッダー、サイドメニューなど、いろいろな画面で繰り返し使い回す、パーツ集のようなものです。
一度コンポーネントに登録しておくと、同じコンポーネント同士なら、まとめて色などのスタイルを変えたり、文字やレイアウトを一括で変えたりできます。
コンポーネントに登録しておかないと、1つ1つ直さなければいけないので、
使い回しているものが多いときは、膨大な作業量になってしまいます。
コンポーネントを作る場所は、
ランディングページや小規模なWEBデザインなら、同じファイル内の隅のほうや、同じファイル内の別ページに作ることが多いです。
大規模なWEBデザインやUIデザインなどで、コンポーネントの数が多くなると、別のファイルに分けてまとめることが多いです。
こうなった時に、コンポーネントを持ってきやすくするために登録しておくのが「ライブラリ」です。
無料プランだと、デザインファイルを2つ開いておいて、コンポーネントを手作業でコピーして持ってくることはできます。
これが「ライブラリ」を使えば、
いちいちコピーをしに行くことなく、ドラッグアンドドロップでパーツを配置できたり、
アイコンの差し替えがプルダウンでパッと変えられたりなど、細かい手間が省けます。
ライブラリが使えなくても機能的に困ることはありませんが、使い勝手がスムーズになるかの違いです。
大規模なプロジェクトやUIデザインだと、細かい手間が多くなるので、ライブラリが使えないと、まあまあストレスになるかもしれません。
小規模なWEBデザインでは、使わなくてもほとんど困りません。
Q. バリアブルとは??
バリアブルとは、パディングや間隔によく使う数値をセットしておいたり、
フレームワークで定義された数値をFigmaでも互換できるようにするなどで、設定しておくものです。
主にUIデザインで使えると便利な機能です。
WEBデザインでは、使えなくてもあまり困ることはないと思います。
(私はUIデザイン作成前にまず設定しておくことが多いです。特にUIフレームワークを使うとき)
これも、使えなくても機能上困ることはありませんが、
数値を直接入力しなくても、選ぶだけでパディング等の数値が設定できるので、
設定自体はちょっと面倒でも、設定しておくだけでサクサク感がUPします。
数値の入力時に、いくつか考えなくて良くなるのも、地味に使いやすくなります。
また、他のメリットとしては、
UIフレームワークで定義された数値を使うとき、
実装が多少スムーズになる点や、
共同でデザインを作るとき、
定義されている数値が使われやすいようにする点、もあります。
さらに、このバリアブルというものは奥が深くて、
ダークモードとライトモードでデザインをパッと切り替えて制作できるよう、色を定義したり、
プロトタイプで簡単な計算をさせたりなど、高度な応用もできます。
なかなか実案件でそこまで使う機会はありませんが、
これが使えるとかなり幅が広がります♪
★ Figmaの使い方に迷ってしまう方、
★ Figmaを一から学んでみたいという方
は、
たった5回でマスターできる、マンツーマンレッスンも行っています!
実案件を進めながらのレッスンもOKです🙆♀️
👉 月4回セット(1回1時間)の単発プラン
👉 じっくり学びたい方への 毎月定期購入プラン【2ヶ月目から20%OFF!】
のほか、
お試し用に1回だけの単発プランもあります◎
どのプランが合うか迷った際は、お気軽にメッセージください♪