figma｜megumi_s

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

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

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

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

FigmaのEffect〜FrameとObjectでエフェクト効果が違う件〜Spreadの罠

Figmaには色やテキストをデザインシステムとしてファイルごとに登録できる便利な機能があります。ガイドやEffectsも登録できるのがありがたい！例えばホバーした時の影をEffects Stylesに登録しておけばこのように一発でホバー状態を表現できます。が、この機能を使い出してハマったことがあるのでここで紹介しようと思います。このように、登録している同じEffect Stylesをかけても明らかに濃度が違うものができてしましました。ちなみに左はF

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

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

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

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

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

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

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

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

Chapter 5: プロトタイピング

はじめにこの記事は、UIデザインツール「Figma」の解説記事の第5章になります。概要や過去の解説記事は下のマガジンからどうぞ。今回はFigmaのプロトタイピングについて紹介します。前回は記事はこちらプロトタイピングとはアプリやWebなどのUIデザインではプロトタイピングは非常に重要です。プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移を体験したり、周りの人にデザインを共有してデザインを練り直したりするための素晴ら

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

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

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.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変

figma

記事一覧