Web制作実務役立ち

Figmaデザインカンプからのコーディング方法【デザインモードと開発モード】

Figmaデザインカンプからのコーディング方法【とても簡単】
本ページにはプロモーションが含まれています。

こんにちは、現在Web制作歴6年のしょーごです。

今回は『Figmaからのコーディング方法』を解説していきます。

Figmaはとても直感的に操作できるので、Photoshopからのコーディングなどに比べて格段に簡単だと思います。

既に世界で一番使われているデザインツールです。

日本では謎に制作会社がまだPhotoshop、イラレでUI作ってたりしますが,,,

今後日本でもどんどん主流になっていくと思われるので、しっかり学習しておきましょう。

しょーご

今回は私が無料配布しているFIgmaのコーディング練習課題を参考に見ていこうと思います。

Figmaデザインカンプからのコーディング方法【とても簡単】

極力シンプルにするために、「コーダーがFigmaデザインからコーディングする時に使う機能」に特化した内容になっています。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

今回使用する無料Figmaデザインカンプはこちら

\Figmaからのコーディングを練習してみる/

Figmaはソフトいらず!Webで見れる

これまでのデザインカンプはソフト(アプリケーション)をダウンロードして、自分のPCに入れて初めて、デザインデータが開けるというものでした。

Adobe XDでもXDデータが送られてきたら、XDを持っていないと開けません。

XDはURLカンプならアプリケーションが無くても開けます。

しかし、FigmaならURLを知っていれば、誰でもデザインを見ることができます。

しょーご

逆に、誰でも見れてしまうので、デザインのURLは外に共有してはいけません。

Figmaについての重要な前提事項

❶Figmaでは他の人のカーソルの動きが見えます

Figmaでは、他の人の名前やカーソルが表示され、びっくりされるかもしれませんが、これは正常なので問題ありません。

Figmaはチームでデザインすることを思想としているので、みんなでコーディングをしている気分を味わえると思います。

❷通常モードと開発モード(2024年より有料)があります

Figmaの右上にはトグルがあり、通常モード(デザインモード)開発モード(デベロップモード)を切り替えることができます。

使いやすいのは開発モードですが、開発モードは有料です(2024年1月31日より)

開発モードは、Figmaのプロフェッショナルプランでないと使うことができなくなりました。

開発モードのために、毎月1,800円を払う選択肢は、多くのコーダーは取れないのではないかと思います。

開発モードについて注意

デザイン制作者がFigma有料プランだとしても、デザイン閲覧者分も支払わないと開発モードは使えないため、通常モード(デザインモード)で開発を行えるようにしておくといいかと思います。

開発モードは便利ですが、多くのクライアントはお金を払えないかも。。。

❸「編集を依頼」はコーダーは押さないのがおすすめ

めちゃくちゃ押しやすい場所に「編集を依頼」ボタンがありますが、依頼しても権限を渡せる場合はほぼありません。

なので、「うまくFigmaが使えないから編集を依頼する」みたいなムーブは避けたいですね^^;

Figma 編集を依頼

「編集を依頼」は基本的に押さないようにお願いします(共同編集を依頼された場合を除く)

デザインデータから取得するもの

  • 画像、アイコンなど
  • フォント情報
  • 余白
  • 影や丸み、色など

Figmaからのコーディング手法

①画像の取得

まずは取得したい画像を選択してください。

その後は、右側の「エクスポート」から画像を書き出します。

Figmaデザインカンプからのコーディング方法【とても簡単】

通常モードの場合、以下の画面になります。

画像を選択してから、エクスポートを探して下さい。

  • PNGは『アイコンや透過画像など。容量が重くなりやすい』
  • SVGは『アイコンなどで、pngより画質が荒くならない、軽いなど特徴。ただしXFREEなど無料サーバーだと表示に対応してなかったり』
  • PDFは基本コーディングには使わない
  • JPGは『写真』。『写真=JPG』で基本問題ないはず。

②余白の確認

余白を測りたい要素を選択した後、

Macの場合optionをクリック

Windowsの場合Altをクリック

すると距離が表示されます。カーソル位置によって測定される箇所が変わります。

via GIPHY

【重要】Figma開発モードについて

ちなみに、まだリリースしたばかりですが、「開発モード」にするとクリックするだけで余白が取得できるようになります。

画面右上のトグルをクリックして開発モードにできます。

Figma開発モード
Figma開発モード

また、画像のダウンロードは以下の場所より行なえます。

しょーご

これは鬼便利というか、元から欲しかった…

③フォント周りの確認

Figma通常モード開発モードのときで画面が異なるので、順に解説します。

Figmaデザインカンプからのコーディング方法【とても簡単】
  1. font-family
  2. font-weight
  3. font-size
  4. line-height(この場合22.4 / 16 = 1.4になる)
  1. color
  2. font-family
  3. font-size
  4. font-style
  5. font-weight
  6. line-height

もし、line-height150%などとなっていたら、line-height: 1.5;とします。

Figmaデザインカンプからのコーディング方法【とても簡単】
しょーご

確認箇所が多いですが、フォント周りはミスが多いので、綿密に確認しましょう。

④影や丸みの確認

Figmaデザインカンプからのコーディング方法【とても簡単】
  1. border-radius
  2. box-shadow(ドロップシャドウ)

通常モードではborder-radiusの位置がややこしいです。

Figmaデザインカンプからのコーディング方法【とても簡単】

box-shasow(ドロップシャドウ)は、RGBで見ることをおすすめします。

もし使われてるフォントがGoogle Fontsの場合

Noto Sans JPを例に、実際のフォントの読み込み方を解説しています。

Figmaは直感的で難しくない

実際に触ってみるとすぐに慣れることができます。

デザインデータの数値に厳密にコーディングを行うためにも、しっかりと使い方を練習しておきましょう!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!