FigmaにPluginがついに来たのでよさそうなものをご紹介｜ふじけん / kenshir0f
こんにちは。 Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉 これを書いているのはプラグインローンチ時刻の深夜2時なので、朝起きて仕事でちょっと触ってみたいという方に向けて、いくつか良さそうなプラグインを紹介したいと思います。 Pluginのインストール方法Figmaのデスクトップアプリをアップデートし、画面左上のPluginsを選択します。 あとはPlugin一覧から入れたいプラグインの Install を押すだけです。 あまりにもインストールが速いし、簡単にアンインストールできるので気軽にトライできます。 Autoflow画面遷移図を自動で書き出してくれるプラグインです。 シンプルな一本の線のみで描画されますが、Frameを追従することはありません。よくFrameを移動するときに重宝され
Chapter 5: プロトタイピング｜ふじけん / kenshir0f
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第5章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はFigmaのプロトタイピングについて紹介します。 前回は記事はこちら プロトタイピングとはアプリやWebなどのUIデザインではプロトタイピングは非常に重要です。 プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移を体験したり、周りの人にデザインを共有してデザインを練り直したりするための素晴らしい方法です。 この記事ではFigmaのプロトタイピングのやり方と機能を紹介します。 準備1: 画面の用意まずはプロトタイピングする画面を用意します。 今回は↓の図のように2つの画面(Frame)を用意し、ボタンそれぞれ1つずつ置いたシンプルな画面で試してみます。 Frameの名前は分かりやすいよう「白い画面」「青い画面」
Chapter 4: コンポーネントとスタイル｜ふじけん / kenshir0f
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第4章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はコンポーネントとスタイルについて紹介します。 前回はこちら コンポーネントとはUIデザインにおけるコンポーネントとは、デザイン全体で再利用できるUIの要素のことをいいます。ボタンやアイコン、ヘッダー、フッターなど、同じデザインの要素を各ページで毎回つくるのではなく、再利用することで作業時間の短縮、プロジェクトで一貫したデザインの作成、また、メンテナンスしやすいデザインデータを作ることができます。 この章では具体的なUIを作りながら、コンポーネントのメリットを体感してみたいと思います。 コンポーネント化するUI要素を用意するまずはUIで最もよく使われる要素のひとつであるボタンをコンポーネント化していきましょう。 図のように、四角形の要素(Rectangle
Chapter 3: Figmaのレイヤーを扱う｜ふじけん / kenshir0f
はじめにこの記事は、UIデザインツール「Figma」の解説記事の第3章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はレイヤーの概念と扱い方について紹介します。 レイヤーの概念を知る下の画像のように、Frameの上に四角形のオブジェクト(Rectangle)とテキストで作られたボタンがある例で見ていきます。 (例は前回の第2章で作ったものをそのまま使います) 画面左のレイヤーパネルでは、 iPhone X の下にボタン(Text)とRectangleがやや右によって表示されているのが確認できます。これは、iPhone X というFrameの中に要素が入っている状態を表しており、この状態をFrameの中に要素がネストしているとも呼びます。 このレイヤーを横から見てみるとこのようなイメージです。 Frameの中にRectangleがあり、Rectangleの位置より上にTe
Chapter 2: Figmaの基本操作｜ふじけん / kenshir0f
はじめにこの記事は、これからFigmaを使おうと思っている方や効果的な使い方を知りたい方に向けた、Figmaの使い方の解説記事になります。 前回の記事では概要とセットアップの仕方を書きましたが、今回の第2章では「Figmaの基本操作」についてご紹介します。 noteをマガジンにまとめているので、よろしければこちらもどうぞ。 今回はUIを作りながらFigmaの操作に慣れていきたいと思います。 UIデザインする画面を開く前回の最後にダウンロードした「Figmaのデスクトップアプリ」を開き、自身のプロジェクトを選択して、ファイルをクリックします。 ↓の何もない画面が表示されると思います。 デザインはここからスタートです。頑張っていきましょう。 画面の見方を知るUIデザインをつくるこの画面は、主に4つの要素でできています。 ① Layer Panel (レイヤーパネル) ② Canvas (キャン
Chapter 1: Figmaの概要とセットアップ｜ふじけん / kenshir0f
はじめにSketchやAdobeXDなど、様々なUIデザインツールが業務の中に取り入れられている中で、Figmaの登場によってデザイン環境がガラッと変わりつつあります。 従来のデザイン製作フローとは異なる同期的なスピード感のある開発環境へと変化し、ディレクターやエンジニアによるUIデザインレビュー、デザインスプリントでの複数人によるプロトタイプ作成など、デザイナー以外の方や様々な状況で大きなメリットがあり、他のツールと一線を画する存在となっています。 この記事では、これからFigmaを使おうと思っている方やFigmaの効果的な使い方を知りたい方に向けて、アカウント登録から基本的な操作方法、コンポーネントの作り方やコミュニケーションでの工夫など、基本から応用まで幅広い内容をまとめてマガジンにしてお届けします。 第一章は主にFigmaを初めて目にする方向けの「Figmaの概要とセットアップ」に
Figmaを半年使って分かった便利なところ｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 この記事はDesign Tools Advent Calendar 2018の6日目の記事になります。忙しい年末ということで気軽に読める記事にしてみました。 さて、以前ブログでsketchからFigmaに移行した話をしたのですが、思っていたよりも反響が多く各所から参考にしましたと声をいただきました。 完全に予想外でしたが誰かの参考になったのなら嬉しい限りでございます...ともあれ、あれから時間も経ったので実際どうだったのか？運用してからの知見をご紹介したいと思います。 チームメンバーへの共有スピードが速いFigmaを使う理由はこれだけで十分では？と思えるくらい「共有」がしやすいです。 SlackにもGithubにもFigmaのURLを貼るだけでUIデザインとプロトタイプの共有ができてしまい、エンジニアとのコミュニケーションでは相手の画面を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
