マガジンのカバー画像

Figma のまとめ

320
デザインツール Figma の使い方、勉強になる記事などを独断と偏見でまとめたマガジンです。 (人力なので漏れてたらすみません🙏)
運営しているクリエイター

2021年8月の記事一覧

Figmaで既に作ってしまったフレーム(Frame)をコンポーネント(Component)に置き換える方法

Figmaで既に作ってしまったフレーム(Frame)をコンポーネント(Component)に置き換える方法

Figmaでデザインを作る際、例えばサイトの設計をしている場合、ワイヤーをどんどん作っていって、いざ形が決まったのでコンポーネント化(ライブラリ化)しようと思ったら後戻りがえらいことになっている!!

ちゃんと最初から設計して、最小限のコンポーネントを整理してから始めればこんなことにはならないかもしれませんが、プロジェクトやUIを考える際に適時適切なデザインで作り直しちゃうとこういう問題がよくでて

もっとみる
Figma製スライドテンプレ集「わぶんスライド」を公開しました

Figma製スライドテンプレ集「わぶんスライド」を公開しました

日本語でいい感じに見えるFigmaスライドテンプレ集を自分用に作成したので、「わぶんスライド」という名前でFigma Communityに公開しました。

きっかけは、講師を担当していたDesignship Doの講義資料作成にFigma Communityのスライドテンプレを使おうとしたところ、欧文前提で作成されたスライドテンプレしかなく和文を入力するとどうも間延びした印象になってしまう…と悩ま

もっとみる
【EVENTレポート】いろんな会社のFigma事情を覗き見できる「Figma見せ合いっこ」が神イベントだった

【EVENTレポート】いろんな会社のFigma事情を覗き見できる「Figma見せ合いっこ」が神イベントだった

去る7月15日、UIデザインなどの業務でFigmaを日常的に使っていて、他のチームの使い方やルールを参考にしたい方を対象としたイベント、「Figma見せ合いっこ」に参加したので、そこで得た気付きなどをまとめました。
(イベント後すぐに記事を書こうと思ってたのに、気付けばもう1ヶ月前になってる…!😭 反省…)

イベント開催趣旨イベント趣旨は以下のとおり。

UIデザインツール「Figma」は自由

もっとみる
Auto layoutとVariantsの効果的な使い方

Auto layoutとVariantsの効果的な使い方

こんにちは。
株式会社アジケでUIアシスタントデザイナーをしている山本です。

Figmaをメインツールとして使い始めて半年経ち、基本的な操作に慣れてきました。
そんな中、1ヶ月前くらいにFigmaのAuto layoutとVariants機能を使うことになり、最初は「難しそう…できるかな…」と不安だったのですが、
やっていくうちに「こんなに便利なの…?使うの楽しい…!」となり
今では、この2つの

もっとみる
【Figma】デザインファイルの整理方法を考える

【Figma】デザインファイルの整理方法を考える

こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。

Figma のデザインファイルの整理はどのようにされていますか?

画面一覧、条件分岐、遷移の整理…。これまで案件ごとにどんな整理が良いのか模索してきたのですが、ようやく「この整理ならイケるのでは?」と落ち着いてきたのでその整理方法を考えてみたいと思います。

まだ完全な運用までには至っておらず、お試し

もっとみる
Figma操作でムダな時間を費やしていませんか?Figmaの生産性up術6選

Figma操作でムダな時間を費やしていませんか?Figmaの生産性up術6選

寒気がするタイトルですみません。

1年以上前からFigmaでバナー作成していましたが、UIデザインを学ぶ上でFigmaの使い方を再学習しました。再学習するまで無駄な動きをしていたことを認識し、過去の自分に悔やんでいました(心情としてはスラムダンクの三井寿のような気持ちです)。

そこでこの記事では、before→afterの流れで、ムダな動きをしていないか問いかけながら、生産性向上のために動きを

もっとみる
Figma Design System(デザインシステム)参考テンプレートURL集

Figma Design System(デザインシステム)参考テンプレートURL集

今回はFigmaの公開ファイルの中からDesign System(デザインシステム)が綺麗にまとまっているものを紹介します。

Design System(デザインシステム)とは?UIデザインを制作する前に、このサイト・サービスで使うカラースタイルやフォントサイズ、コンポーネント(ボタンやフォームなどよく使うものをライブラリ化したもの)をまとめて、担当デザイナー以外の人でもパッと見てすぐにデザイン

もっとみる
UIデザイン実務でFigJamを使ってみた

UIデザイン実務でFigJamを使ってみた

皆さん、こんにちは!Design Switchです🐠 。前回は「Figmaの新機能 FigJamはもう使った?」について紹介しました。

まだ前の記事を読んでいない方はこちらからどうぞ。

2021年4月に新たなFigmaの機能であるFigJamがリリースされ、先週の投稿でFigJamについての概要をシェアしましたね。私は普段の業務でFigmaを愛用していますが、Figmaを使用する仕事の一部を

もっとみる
【Figma】コンポーネントの命名規則とオススメ運用ルール①(Icon, Image編)

【Figma】コンポーネントの命名規則とオススメ運用ルール①(Icon, Image編)

こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。

Component の命名規則について、何回かに分けて note を執筆しようと思います。
プロダクトの内容やデザインチームの運用方法によって、各チームでやりやすい方法を決めていくのが良いと思いますが、今回は私のやり方をまとめることでがどなたかのヒントになればと思いまとめます。

今回は、アイコン、イメ

もっとみる