- 運営しているクリエイター
#figma入門
Chapter 1: Figmaの概要とセットアップ
はじめにSketchやAdobeXDなど、様々なUIデザインツールが業務の中に取り入れられている中で、Figmaの登場によってデザイン環境がガラッと変わりつつあります。
従来のデザイン製作フローとは異なる同期的なスピード感のある開発環境へと変化し、ディレクターやエンジニアによるUIデザインレビュー、デザインスプリントでの複数人によるプロトタイプ作成など、デザイナー以外の方や様々な状況で大きなメリッ
Chapter 2: Figmaの基本操作
はじめにこの記事は、これからFigmaを使おうと思っている方や効果的な使い方を知りたい方に向けた、Figmaの使い方の解説記事になります。
前回の記事では概要とセットアップの仕方を書きましたが、今回の第2章では「Figmaの基本操作」についてご紹介します。
noteをマガジンにまとめているので、よろしければこちらもどうぞ。
今回はUIを作りながらFigmaの操作に慣れていきたいと思います。
U
Chapter 3: Figmaのレイヤーを扱う
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第3章になります。
概要や過去の解説記事は下のマガジンからどうぞ。
今回はレイヤーの概念と扱い方について紹介します。
レイヤーの概念を知る下の画像のように、Frameの上に四角形のオブジェクト(Rectangle)とテキストで作られたボタンがある例で見ていきます。
(例は前回の第2章で作ったものをそのまま使います)
画面左のレイ
Chapter 4: コンポーネントとスタイル
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第4章になります。
概要や過去の解説記事は下のマガジンからどうぞ。
今回はコンポーネントとスタイルについて紹介します。
前回はこちら
コンポーネントとはUIデザインにおけるコンポーネントとは、デザイン全体で再利用できるUIの要素のことをいいます。ボタンやアイコン、ヘッダー、フッターなど、同じデザインの要素を各ページで毎回つくるので
Chapter 5: プロトタイピング
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第5章になります。
概要や過去の解説記事は下のマガジンからどうぞ。
今回はFigmaのプロトタイピングについて紹介します。
前回は記事はこちら
プロトタイピングとはアプリやWebなどのUIデザインではプロトタイピングは非常に重要です。
プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移
Chapter 6: 開発フローに組み込む
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第6章になります。
概要や過去の解説記事は下のマガジンからどうぞ。
今回は作成したUIデザインをエンジニアと共有し、実装に組み込む話について紹介します。
前回の記事はこちら。
UIデザインを共有するモバイルアプリやウェブのUIをデザインし、プロトタイプで価値の検証を行ったら、次は実際に動くものをユーザーさんに届けるため開発のフェー
FigmaにAuto Layoutが来た！
こんにちは、ふじけん(@kenshir0f)です。
FigmaにAuto Layoutが来て早速触ってみたので、その機能をご紹介します。
今回は、チュートリアル読む前にさっと機能だけを知りたい方向けに書きました。
Auto Layoutとは？テキストの長さや要素の数によって、自動的にそのオブジェクトのサイズが変わる便利な機能です。
テキストの長さを変えるたびに、その背景やボタンの位置を変えていた
【2019年】私的ベストFigma Plugins
こんにちは！
Figma Advent Calendar 2019 11日目担当のデザイナーをしているトリバコです。
もう今年も残りあとわずかとなりましたね。
そんな年末ということで、使ってきたツールの整理も兼ね、私の仕事に大きく影響を与えてくれた「Figma」のお気に入りプラグインを利用頻度が高かったものから順に今回ご紹介していきたいと思います！
Nisa Text Splitter
テキス
【学割】「Figma」のプロライセンスを無料でゲットする方法
本記事は、2018.12.16に個人ブログで公開したものを移行してきたものです
UIデザインツールといえば「Sketch」や「Adobe XD」などがあるが、最近の僕のお気に入りは「Figma（フィグマ）」。クリエイター間のコラボレーションを活発にできるように、複数人での同時編集やプロトタイピング、コメントなどが一つのアプリででできる。
「Sketch」にも学生向けのディスカウントが存在するが