WebTraining.jpにてFigma基礎講座をスタート
FukuokaMiyako が運営する学習サイト WebTraining.jp にて、このたび新しく Figma 基礎講座 を公開しました。
WebTraining はこれまで、HTML / CSS / JavaScript / PHP を中心とした「コードに強いオンライン学習サイト」として運営してきました。訓練や企業研修の教材としても利用されており、実践的なコーディングスキルを身につけたい方に多くご活用いただいています。
今回、受講生の皆さんから「デザインツールに強くなりたい」「設計もできるの？」「Figma の基本から知りたい」
という声をいただくことが増えてきたこともあり、新たに Figma シリーズ をスタートしました。
■ Figma 講座を公開した理由
Web制作の現場では、「デザイン → コーディング（WP) → 公開」 という流れを一貫して理解していることがますます重要になっています。
特に Figma は、
- バナー作成
- LPデザイン
- WebサイトのUI設計
- ワイヤーフレーム作成
など、Webデザイナー・エンジニアにも必須のツールとなっています。
■ 今回の「Figma基礎講座」で学べること
今回公開した入門編では、Figma の基本操作を短いステップで確実に習得できる構成になっています。
- 新規ファイルの作り方
- フレーム作成とレイアウトガイドの設定
- 文字入力・タイポグラフィ設定
- 画像の配置や調整
- シンプルなバナー制作の流れ
- 20秒前後の操作動画つき解説
各ステップに操作動画を添えているので、初めて触る方でも感覚的に理解しながら進められます。
■ 受講はこちらから
Figma基礎カリキュラム一覧
Figmaを使い始めるときに、まず覚えておきたいのは 画面のどこに何があるか という基本構成です。
図形を自由に作れるようになると、ボタン・UIパーツなどほとんどのデザインが表現できる
長方形の角の半径を変えたり、円弧・多角形など自由な図形を作成。変形を覚えパーツを作成
Figmaの線やパスを使った自由なデザイン作成の練習。図形からのベクター操作を覚えましょう。
スマホ・タブレット・PC それぞれの幅を並べて、レイアウトガイドを作成。より正確な設計練習
図形やテキストを正しい位置に配置する“整列”の練習とテキストツールの基本操作練習
塗りの詳細設定と長方形を写真で塗り操作の練習。プラグインを使って写真を塗っていきます。
igma で UI デザインを行ううえで、最も重要な機能のひとつが オートレイアウト（Auto Layout）です。
基礎のトレーニングを踏まえてさまざまなアイコン作成に挑戦してみましょう。書き出し方法も覚えます。
この記事が気に入ったら
フォローしてね！