figma

FigmaではじめるUI（Web）デザイン｜Part2

Part1ではUIデザインの下準備として簡易的にデザインシステムを作りました。ただ、前回作ったものはデザインシステムの空箱でしかありません。空箱という言葉が示すように、変数的に定義したカラーやタイポグラフィをどのように意味づけていくかが残りのPartの目的の1つでもあります。そして、そのデザインシステムを真に活用していくには横断的な組織が必要不可欠になってきます。どうすれば横断的な組織をデザイナーという立場から作り出せるのか。それは僕にはまだ上手く説明できません

Figma でざっくり作るプロトタイピング

こんにちは、スペースマーケットデザインチームの伊東です。現在スペースマーケットの UI デザインは Figma で行っています。以前は Adobe XD や Sketch を使っていたのですが、わりと最近になって移行しました（デザインツールに関して、導入を決めたきっかけやメリットに関しては改めて記事として投稿できれば幸いです）。私自身、スペースマーケットに入社してから初めて Figma を触ったのですが、あまりドキュメントを読み込まなくてもすぐに使える（≒ Ske

FigmaではじめるUI（Web）デザイン｜Part1

Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思

Figmaで困ったこととその解決策

最近のFigmaブームに乗じて、業務でもFigmaを使いはじめました。「figma [困ってる事象]」でGoogle検索しても、まだ日本語での情報が少なく、答えにたどり着きづらい状況だなぁと思い、Figmaを使う上で困ったことや気になったことをまとめてみました👐 自分用のまとめですが、誰かが困ったときにこの記事にたどり着いて役に立つことがあれば幸いです。 ※ 無料プランでやりくりしているため、ライブラリ機能とかは使っていないです。 ※ Macユーザーなのでショートカッ

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

最近よく聞かれるのと、ニーズがありそうだったので、Figmaのおすすめ記事をまとめました Figmaの概念、考え方の記事Figmaを使った『ペアデザイン』という革命 https://note.mu/oathkite/n/na255d4557fbc Figmaを使って開発チームの生産性をあげるプロダクトマネジメント https://blog.tsubotax.com/n/n58b33cceee9e 開発初期のチームでFigmaをおすすめする理由 https://not

Figmaの使い方、全力でまとめました。

最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが

Figmaにおけるコンポーネントとバージョンの管理について考える

まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変

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

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。（スマートキャンプでもまだまだ模索中......）スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet（ビスケット）」という新サービスを発表をしました。まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。上記のランディングページ（LP

XD→Figmaに変えた理由とその運営方法やメリットについて

こんにちは、COUNTERWORKSの駒ヶ嶺(@Koma_Studio)です。弊社では今までXDを用いたUI制作を行っていましたが、今年の3月に入ってからFigmaの試験運用を始め、現在は本格運用を始めました。今回はどのような背景がありXDからFigmaに移行したのかを紹介するとともに、どのように導入を進め、現在はどのように運営をしているのか書いていこうと思います。導入背景1. デザインシステムをアップデートした時の更新コストFigmaを導入する前の話ですが、弊社

【入門】Figmaのプロトタイプを一から極める

こんにちは。最近の趣味はFigma、seyaと申します。本記事はFigmaのプロトタイプ機能をなるべく隅々まで調べて、触って見た内容をまとめたものです。慣れれば高い忠実度のプロトタイプを高速に作れる強力なツールだと感じたため、この記事を読んで同じ気分になってくれたら嬉しいです。想定読者 - Figma触りたての方 - プロトタイプ機能は使っているけど、簡単な画面遷移にしか使っていない方ゴール - 自分のワークフローの中で「Figmaのプロトタイプ機能はこの辺で

Figmaを利用した資料デザインが便利！導入手順を解説します！

スマートキャンプデザインブログ、花岡です。「資料作成ツールといえばPowerPoint」は今も根強く、多くの企業が利用していると思います。私もそう思っていましたが、デザインツール「Figma」と出会ってから、「Figmaは資料作成に向いているのでは？」と思いはじめました。 Figmaを使って、きれいかつ効率的に資料を作成する方法ををご紹介します。 Figmaで資料作成するメリット PowerPointに負けないぐらい、Figmaには資料作成に向いた機能がたくさんあり

FigmaのコンポーネントをVariantsで状態管理する

こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使う

Figmaの生産性を高めるTips50選

こんにちは、株式会社アトラエでデザイナーをしています、三上蒼太(@sota_mikami)です。この記事は、Atrae Advent Calendar 2020 の12日目の記事です。弊社ではデザインツールとしてFigmaを使っています。僕はこのFigmaが大好きで、社内でもFigma愛は随一だと自負しています。本記事では、Figmaを愛している僕が、Figmaをもっと快適に使いこなし生産性を高めるためのTipsを吐き出します。なお、こちらの記事ではTips

【2020年版】リアルに作業を超効率化してくれたFigmaの必須プラグイン10選！！

今回は年末ということもあり、2020年に仕事でリアルに使い倒しまくったFigmaのプラグインを10個に絞ってまとめてみました！こちらの記事はデザインの制作スピードをあげたい人向けに書いています。そのため一見面白そうだし革新的だけど実際コレどこで使うの？みたいなプラグインは今回あえて紹介してません。全てリアルに仕事の中で使い倒しているスタメンのプラグインのみに絞っています。では早速紹介していきます！ 01：Unsplash もはや言わずもがな、有名なフリー写真素材サ

フォローしませんか？

#デザイン