[ Training ] Figmaでコンポーネントをデザインしてみよう！

[uchida189]

開発概要

【こんな人におすすめ!!】

• デザインに興味がある人
• フロントエンドに興味がある人（デザインまで手を伸ばしたい人）
• Figmaに興味がある人

目的

• NUTMEGでデザイナーたちが使っているFigmaに親しみましょう！
• デザインの基礎を体験してみましょう！
  • ページの構成要素である「コンポーネント」のデザインをできるようになりましょう！

開発期間

• 開始日：
• 締切日：

カテゴリ/スキル

• Training
• Design / Figma

難易度・規模

• M（10時間くらい）

担当者

• @

考えられる開発内容

• Figmaに自分のファイルを作成（すでにある場合はスキップ）
• 練習用のページを作成
• 要件を見ながら、デザインを作成しましょう
• オートレイアウトを使おう！
• グリッドを出してみよう！
• コンポーネント化してみよう！
• インスタンスを使ってみよう！
• ファイル構成を意識してみよう！
• 開発者モードを使って動きを作ってみよう！
• issueのチェックボックスをぽちぽちしよう
• コメントで学びをメモっていこう！先輩に見てもらいたいところにコメントをつけておくのも有効！
• レビューしてもらおう

備考

• わからないことがあったらわこやうっちーに聞こう！延々と教えてくれるよ！
• オートレイアウト
• グリッド
• コンポーネント
• インスタンス
• ファイル構成について
• 開発者モードについて

参考

開発の流れ

1. PMにIssue（タスク）をもらう
2. 開発をする（↓の「リンク」の『開発のやり方』を見よう！）
3. チェックボックスを押していこう
4. ヤバい状況になったらIssueの右側にあるStatusを「Help」にしてPMにSlackで連絡しよう
5. チェックボックスが全部押せたらプルリクを作ろう
6. レビューを待とう
7. 修正点があれば修正しよう。なければPMがマージします！お疲れ様！

SeeFTのタスク管理のルール

1. タスクは全てGit-Hub Projectで管理する
2. 全てのタスクに期日を決める
3. 毎週タスクの進捗を確認する（MTに出られない人はSlackで報告）
4. 毎週忙しさ（消化できるタスク量）を共有する
5. Helpは余裕のある人がいれば巻き取る。いなければ期日を変更する

リンク

• 開発のやり方
• SeeFTのタスク管理のルール
• 環境構築
• GitとGitHubの使い方（SeeFT）
• SeeFT Projects
• SeeFT Wiki
• Figma