Help us understand the problem. What is going on with this article?

デザインを何もしらないエンジニアがDailyCocoda!を3ヶ月かけて完走したので、1日目の自分にアドバイスする その2 figma準備編

リンク

この記事について

  • マテリアルデザインに基づいてfigmaの設定をします。
  • sketchユーザーは、便利なUIKitを取得する から見てください。

私について

  • 個人開発者としてモバイルアプリをつくって、その収益で生計を立てたいエンジニア
  • Flutterで開発を始め、いくつかアプリを作ろうとするも、いづれのアプリもデザインが出来ずに断念
  • デザインを学ぶ必要に迫られて、DailyCocoda!でデザインを学び始める。
  • デザインは全くの初心者でセンス0
  • 7/23日から始めたDailyCocodaが10/15日に目出度く完走 <-- いまここ
  • アプリをリリースして生計を立てる <-- これから

figmaの登録

  • figma公式にアクセスしてください。
  • Try Figma For free から登録しましょう。
  • image.png
  • 必要事項を入力してCreate accountしましょう
  • image.png
  • 下記画面が出てくるので、名前と職業を入力し、同意してCreate Accountしましょう(なんでもいいです)
  • image.png
  • 登録完了!
  • image.png

figmaのチーム、プロジェクト設定

figmaのフォルダ構成は、

  • チーム
    • チーム配下のプロジェクト
      • プロジェクト配下のファイル( <-作業する場所)

となり、それとは別に

  • 直近のファイルが表示されるRecent
  • 個人、下書き用途のDrafts

の2ファイルが存在します。

今回は、自分用のチーム、プロジェクトをつくって、その配下のファイルに色々設定していきます。

チームの作成

  • ちょっとわかり辛いですが、左下の + New Team ...をクリックします。
  • image.png
  • 名前はなんでもいいです。私は個人開発としました。
  • image.png
  • ぼっちチームなので、skip for now
  • image.png
  • 当然Freeプラン
  • image.png
  • チームを作成し終えました!
  • image.png

プロジェクトの作成

  • 次にプロジェクトを作成します。右上のNew Projectをクリックしてください。
  • image.png
  • 名前を入力します。なんでもいいです。Create Projectをクリック
  • image.png
  • 終わり
  • ちなみに右上のNew Fileからファイルをつくることができます。

便利なUIKitを取得する

material design themeing kit

  • material design themeing kit を開いて、Open the Material Themeing kit in Figmaをクリックします。
  • image.png
  • 開けたら左上のメニューボタンからBack to Filesで戻ります。
  • image.png
  • このファイルはDraftsに存在しますので、ドラッグアンドドロップでマテリアルデザインプロジェクトに持ってきます。
  • image.png

Material Icons—Outline

  • Material Icons—Outlineも上記手順と同様にマテリアルデザインプロジェクトに持ってきます。

作業場ファイルを作る

  • ここらへんはもうお好みの領域なのですが、作業場所ファイルを作ると便利です。
  • material design themeing kitはあらかじめ必要な設定を一通りしてあるファイルなので、このファイルをベースに作業場ファイルを作っていきます。
  • 右クリックしてDuplicateします。
  • image.png
  • Duplicateしたファイルを開いて、まずはページを作ります。
  • Pages +をクリックして名前を入力します。適当に作業場と命名しました。
  • image.png
  • 作業場以外のページを右クリックからdelete pageで削除していきます。
  • ファイル名も適当に作業場としましょう
  • image.png
  • 作業場のColor Styleのprimaryとsecondaryを全部削除します。(それ以外は消さないで!)
  • なんでprimaryとsecondaryを全部削除するのかというと、UIごとに設定が変わるからです。UI作るたびに手動で設定しましょう。
  • image.png

次のステップ

  

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away