マガジンのカバー画像

figma

54
本
運営しているクリエイター
megumi_s

#UIデザイン

Figmaのローカルコンポーネントをライブラリに移動する方法（2023年1月版）

Figmaのヘルプ「公開済みコンポーネントの移動」ではタイトルの通り、あるライブラリのコンポーネントを別のライブラリへ移動する方法が説明されています。 この記事の内容をすこし応用するとライブラリではないファイルのローカルコンポーネントをライブラリへ移動して再リンクすることができます。 （この記事は2023年1月時点の情報です。Figmaはアップデートが頻繁なので試す前に最新のヘルプを確認することをお勧めします。） 大雑把な手順移動元ファイルを一度ライブラリとして公開する

Satoru Kawa…

ProtoPieで作る本格プロトタイプ作品７選！

以前、ProtoPieというプロトタイピングツールを紹介しました。 Figmaに関するnoteと比べて反響が弱かったので、今回は少し違ったアプローチでnoteを書いてみようと思います。 Figmaと比べて利用人口が少ない上に、ツールの特性上、Figmaより流行る可能性はほぼ０なので、ProtoPieの使い方を説明するより「こんなことできるんだぜ」っていう内容の方が良いのではと思いました。 と、ツイートすると結構いいねももらえたので、確かに需要ありそう。 それでは１つ目

UI/UXデザイナー …

【Tips】オススメ！Figma Communityのリソース5選

こんにちは！PLAY THE DESIGNERメンター兼SNS担当おかちゃん ( @okbchyk ) です🐧Twitterで紹介したTipsをnoteでもご紹介💁 今回は「オススメ！Figma Communityのリソース5選」です👀 Communityは便利なリソース共有の場！FigmaにあるCommunity機能はご存知ですか？ すでにFigmaを使っている方は見たことがあるかもしれません🤔 メニューを開いてみると、中には様々な人が作ったFigmaファイルが公開されて

PLAY THE DE…

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

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

Nao Komura

コンポーネントの使い方 - 応用編

前回の記事の続きです。 今回は、応用編なので「コンポーネントが使える」から「コンポーネントを使いこなせる」までレベルアップする人のための内容にしていきたいと思います。 それでは早速! インスタンスを切り離すコンポーネントを一度作ったら二度と変更しないと言うことはほぼあり得なくて、細かい変更を繰り返しながら実用的なコンポーネントを定義していくと言うのが基本的なワークフローになると思います。 そこで、「インスタンスを切り離す（Detach Instance）」と言う操作が

UI/UXデザイナー …

【動画で解説】Figmaの使い方

最近、Periscopeの生配信でFigmaなどツールの説明をするのにハマっています。 自分の場合、最初にツールをざっくり覚えるときは動画がわかりやすいので利用するのですが、英語の配信者が多いので日本語でやったら良いんじゃないかと思いやっています。 それらの生配信動画を集めておきます。 決定版長いですが、これだけ見れば基本は完璧というやつ Frameの使い方Auto Layoutの使い方AutoLayoutがかなり進化しました！！Auto Layout2.0（勝手に命

UI/UXデザイナー …

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

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

Nao Komura

これから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の公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが

hikaru-taka…

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

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

Nao Komura

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

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

スマートキャンプ　デザ…

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

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

駒ヶ嶺 亮一

【まずやること編】 #Sketch から #Figma にお引越し

すでにお引越しした方、もう少し深く知りたい方は 【チームライブラリ活用編】デザインシステムをFigmaでもっと強くする もあわせてドウゾ〜 ・・・ ノゾエ（@conoito）です。 今日は、みてねのデザインデータが移行されるまでをご紹介します。 移行完了までのイメージを掴むための参考にどうぞ！ ・・・ 今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。 あれから半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができて

nozoe | con…

【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【まずやること編】 デザインデータをSketchからFigmaにお引越ししよう もあわせてドウゾ ・・・ ノゾエ（@conoito）です。 今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。 約半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。 今日は、Figmaに移行してから行なった、 コンポーネントの整備からスタイルの最適化、 さらには、最適化したデザインシステムをアプリに適用するまでを、もりっとお話

nozoe | con…