マガジンのカバー画像

UIまとめ

107
UIに絡んだ記事をまとめてます。
運営しているクリエイター

#figma

Figmaのプランを理解せずに契約すると多分困るので解説

Figmaのプランを理解せずに契約すると多分困るので解説

2019/02/26 追記
Figmaのプラン内容少しづつ更新されています。この記事の内容は現行プランとは少しズレている部分があるので、公式サイトでの内容の確認は必須です!
例えば、フリープランでは2メンバー以上招待できない(editor/viewer関係なく)とこの記事にはあるのですが、現行のプランだとeditorが2名以上招待できないだけで、viewerは制限なく招待できます。

こちらの記事

もっとみる
UIデザイン初心者がキュレーションメディアを1ヶ月間トレースしてみた!

UIデザイン初心者がキュレーションメディアを1ヶ月間トレースしてみた!

こんにちわ!現在大学3年でモスティープレイスという会社でデザイナーのインターンをしています、田島美鈴 @abcmisuzuです。

この記事では、デザイン初心者がキュレーションメディアのUIトレースをしてみてのどんな気づきがあったのかや、どんな成長が実感できたかを書いていきます。

UIトレースを始めたキッカケ現在デザイナーとしてお仕事を初めて3ヶ月が経ちましたが、これからの自分の将来像につい

もっとみる
Chapter 1: Figmaの概要とセットアップ

Chapter 1: Figmaの概要とセットアップ

はじめにSketchやAdobeXDなど、様々なUIデザインツールが業務の中に取り入れられている中で、Figmaの登場によってデザイン環境がガラッと変わりつつあります。
従来のデザイン製作フローとは異なる同期的なスピード感のある開発環境へと変化し、ディレクターやエンジニアによるUIデザインレビュー、デザインスプリントでの複数人によるプロトタイプ作成など、デザイナー以外の方や様々な状況で大きなメリッ

もっとみる
Chapter 2: Figmaの基本操作

Chapter 2: Figmaの基本操作

はじめにこの記事は、これからFigmaを使おうと思っている方や効果的な使い方を知りたい方に向けた、Figmaの使い方の解説記事になります。
前回の記事では概要とセットアップの仕方を書きましたが、今回の第2章では「Figmaの基本操作」についてご紹介します。
noteをマガジンにまとめているので、よろしければこちらもどうぞ。

今回はUIを作りながらFigmaの操作に慣れていきたいと思います。

U

もっとみる
Chapter 3: Figmaのレイヤーを扱う

Chapter 3: Figmaのレイヤーを扱う

はじめにこの記事は、UIデザインツール「Figma」の解説記事の第3章になります。
概要や過去の解説記事は下のマガジンからどうぞ。

今回はレイヤーの概念と扱い方について紹介します。

レイヤーの概念を知る下の画像のように、Frameの上に四角形のオブジェクト(Rectangle)とテキストで作られたボタンがある例で見ていきます。
(例は前回の第2章で作ったものをそのまま使います)

画面左のレイ

もっとみる
Chapter 4: コンポーネントとスタイル

Chapter 4: コンポーネントとスタイル

はじめにこの記事は、UIデザインツール「Figma」の解説記事の第4章になります。
概要や過去の解説記事は下のマガジンからどうぞ。

今回はコンポーネントとスタイルについて紹介します。
前回はこちら

コンポーネントとはUIデザインにおけるコンポーネントとは、デザイン全体で再利用できるUIの要素のことをいいます。ボタンやアイコン、ヘッダー、フッターなど、同じデザインの要素を各ページで毎回つくるので

もっとみる
Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。

ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。(スマートキャンプでもまだまだ模索中......)

スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet(ビスケット)」という新サービスを発表をしました。

まだ開発中のサービスですが、このBiscuet(ビスケット)

もっとみる
これからFigmaを始める人にオススメの記事まとめ

これからFigmaを始める人にオススメの記事まとめ

最近よく聞かれるのと、ニーズがありそうだったので、Figmaのおすすめ記事をまとめました

Figmaの概念、考え方の記事Figmaを使った 『ペアデザイン』 という革命
https://note.mu/oathkite/n/na255d4557fbc

Figmaを使って開発チームの生産性をあげるプロダクトマネジメント
https://blog.tsubotax.com/n/n58b33ccee

もっとみる
FigmaではじめるUI(Web)デザイン|Part1

FigmaではじめるUI(Web)デザイン|Part1

Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。

そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く(人のこと言えないですが......

もっとみる
FigmaではじめるUI(Web)デザイン|Part2

FigmaではじめるUI(Web)デザイン|Part2

Part1ではUIデザインの下準備として簡易的にデザインシステムを作りました。

ただ、前回作ったものはデザインシステムの空箱でしかありません。

空箱という言葉が示すように、変数的に定義したカラーやタイポグラフィをどのように意味づけていくかが残りのPartの目的の1つでもあります。

そして、そのデザインシステムを真に活用していくには横断的な組織が必要不可欠になってきます。
どうすれば横断的な組

もっとみる