FigmaのデザインをコーディングせずにWordpress化する方法
この記事ではFigmaで作成したデザインをコーディングせずにWordpressに移植する方法を紹介します。 通常FigmaのデザインからWordpressでホームページを作る場合、ブロックテーマやク…
2024 / 02 / 20
FigmaはWebサイトやアプリのデザイン、プロトタイピングで最もよく使われているデザインツールです。このカテゴリでは、Figmaの基本的な操作方法からオートレイアウトの使い方、レスポンシブデザインの作り方などを、わかりやすく丁寧に解説しています。
この記事ではFigmaで作成したデザインをコーディングせずにWordpressに移植する方法を紹介します。 通常FigmaのデザインからWordpressでホームページを作る場合、ブロックテーマやク…
2024 / 02 / 20
この記事ではFigmaで使えるWebサイトやアプリのUI、LPなどのテンプレートを紹介します。 Figmaでテンプレートを使うにはダウンロードしたファイルをインポートするだけでOK。 Webサイトだ…
2024 / 02 / 13
この記事ではFigmaで作ったデザインからHTMLやCSSコードを出力する方法を紹介します。 Figmaからコードを生成するには? Figmaの開発モードでCSSコードを取得する Figmaのプラグ…
2024 / 02 / 07
この記事ではFigmaで作ったデザインをPhotoshop(PSD)のファイルに変換する方法を紹介します。 また、PSDファイルをFigmaで開く方法も合わせて紹介します。 FigmaからPSDに変…
2024 / 02 / 06
この記事ではFigmaで作成したデザインを画像やPDF、SVGなどの形式で書き出す方法を解説します。 画像は普通に書き出すと画質が悪くなったりするのでその回避方法に加えて、画像圧縮や高画質化などエク…
2024 / 02 / 05
Figmaでは作ったデザインをコンポーネント化して再利用することでき、Webサイトやアプリの共通パーツを作るのに向いています。 この記事ではコンポーネントの作成方法や便利な使い方について解説します。…
2024 / 01 / 31
この記事ではFigmaでレスポンシブデザインを作る方法を紹介します。プラグインやテンプレートを活用して効率よく作成する方法も合わせて紹介します。 Figmaでレスポンシブデザインを作るにはいくつか方…
2024 / 01 / 30
この記事ではFigmaの機能であるオートレイアウトの基本的な使い方から、よくあるつまづきの原因と解決方法までを解説しています。 オートレイアウトを使うことでレスポンシブに対応したコンポーネントを作っ…
2024 / 01 / 28
Figmaのレイアウトグリッド機能を使ってBootstrap5に対応したグリッドシステムを作る方法を解説します。 Figmaでは定規(ルーラー)を使ってガイドを作ることもできますが、レイアウトグリッ…
2024 / 01 / 12
Figmaで枠線を作ったりスタイルを調整する方法をまとめて紹介します。 Figmaでは四角の箱に線をつけたり画像に枠線をつけるだけでなく、線のスタイルを変えて破線(点線)にすることもできます。 この…
2024 / 01 / 11
Figmaでルーラー(定規)を表示する方法とガイド線を作る方法を紹介します。 FigmaでもPhotoshopのようにガイド線を引くことができるのでページのレイアウトなどに使用することができます。 …
2024 / 01 / 10
Figmaを使った画像のトリミングやマスクのやり方を紹介します。 Figmaを使うとものすごく簡単に画像の拡大縮小やマスクができるようになっているので一度理解すればPhotoshopより楽に作業でき…
2024 / 01 / 09
FigmaプラグインのUnsplashで画像を入れると自動的に配置が決まります。 今までは、一旦画像だけ取り込んでマスクしてから位置やサイズを調整していたのですが、XDのように選択するだけでも調整…
2023 / 02 / 05
Figmaのおすすめプラグインを、ホームページ作成、作業効率化、プロトタイピングなどカテゴリごとに集めました。 Figmaはデザインからそのままホームページを作成したり、HTMLコードを取得したり、…
2022 / 09 / 20