マガジンのカバー画像

Figma のまとめ

292
デザインツール Figma の使い方、良い紹介などをまとめたマガジンです。
運営しているクリエイター

#figma入門

【Figma講座】デザインスピードが上がるショートカット5選!

【Figma講座】デザインスピードが上がるショートカット5選!

こんにちは!and factoryマンガアプリの担当デザイナーのリリです。
Figmaのデザイン作業を効率よくする為に欠かせないのが、ショートカットの活用。
今回は、Figmaのデザインスピードが上がるショートカットを5つ紹介します。

1.複数画像をまとめて差し替える【Command/Ctrl+Shift+K】複数の画像をシェイプ内に挿入する際、一枚ずつ追加していませんか?
Figmaでは複数画

もっとみる
デザイン作業をもっと快適にするFigmaのテクニック集

デザイン作業をもっと快適にするFigmaのテクニック集

はじめにこんにちは!i3DESIGNデザイナーチームです。 今回は、チームでFigmaを使ってデザインしている方に向けた実務で活かせるFigmaのノウハウをお届けします!ポイントを押さえて、作業のスピードをアップしましょう!

1. ComponentVariant properties と Component propertiesの使い分け
FigmaのComponentには「Variant p

もっとみる
XDユーザーのお困りごと6選 - Figmaを使えるようになろう! vol.2

XDユーザーのお困りごと6選 - Figmaを使えるようになろう! vol.2

こんにちは。デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage(くらげ)株式会社のデザインチーム、Figmaをバリバリ使ってきたガッキー🙋‍♀️と、XDからFigmaに乗り換えたナンシー🙋🏻‍♀️ です。

crageでは今までメインツールとしてXDを利用してきました。今は徐々にFigmaに移行中です。

そんなcrageでは、Fig

もっとみる
Figma Organization Planはじめました

Figma Organization Planはじめました

タイトル通りではありますが、2022年8月にFigmaのプランをProからOrganization に変更しました。その過程で検討したこと・今も模索してることを書き記したメモです。
いろいろ漁ってみたもののなかなか契約してる会社さんが少なかったりしたので、どこかのだれかに役立てば幸いですし、検討してる会社さんとかで聞きたいことあればぜひお話しましょー!

あと、使いこなしてる会社さんいらっしゃった

もっとみる
Figma の Component Properties を学ぶ

Figma の Component Properties を学ぶ

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。

この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。

もっとみる
Figma Config 2022 で便利になった機能のおさらい

Figma Config 2022 で便利になった機能のおさらい

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で大きめのアップデートが来て、何がどう機能が変わったのか追いきれなかったのでざっくりまとめたいと思います。

ダークモードの切り替えFigma でデザインするときのサイドバーなど、画面全体をダークモードにする機能が追加されました。白い画面の面積が大きいと少し目がつらかったので普通に嬉しいですね。

画面左上のメ

もっとみる
Figmaを初めて触るエンジニアへ

Figmaを初めて触るエンジニアへ

Qiitaからのお引越し記事です。(元記事)

私MonoのFigmaファイルを初めて触るエンジニアに最低限の機能を教える記事。

他のFigmaファイルに対しても8割くらいは応用が効く内容になっていると思います。

心構え開発 >> デザイン

特にハッカソンでは、技術がメインで評価されます。

デザインに時間がかかって動かないプロダクトを作るよりは、全てデフォルトコンポネントでダサいけれど動く

もっとみる
【Figma】レイヤー検索を追加してコマンド+Fで呼び出せるようにした

【Figma】レイヤー検索を追加してコマンド+Fで呼び出せるようにした

こんにちは!しいのきです(@ShinokiDesign)

仕事でFigmaを使うようになり、分からないことだらけで、
色々調べたことを忘れないようnoteに書くことにしました。

今回#01は、Figmaにレイヤー検索機能がないため、
検索のプラグインを入れて、Macにショートカットキーを設定し、
「コマンド+F」で検索ができるようにした話です。

00_現状現在ブランドのECサイトをFigma

もっとみる
はじめから丁寧に! ノンデザイナーのためのFigma説明書

はじめから丁寧に! ノンデザイナーのためのFigma説明書

Figmaでできることを、はじめから丁寧にご紹介したいnoteです。

私界隈でFigma需要が高まりつつある昨今、勉強手段があまり多くなくまとまった情報も少ないので、なにか取っ掛かりになればと思い立ちました。

簡単な図を作成したいだけなんだけど使い方がわからない、デザイナーじゃないけどある程度Figmaを使えるようになりたい、という方の参考になればうれしいです。

画面の見方まずは画面の見方に

もっとみる
非デザイナー向け
Figmaの便利機能10選

非デザイナー向け Figmaの便利機能10選

こんにちは、VACANデザイナーのnicchiです。

今回は、弊社の画面開発ではもはや必須のツール「Figma」について。
知っておくと便利なことを非デザイナー向けにまとめてみました。

【今回の記事がオススメの方💡】
・普段の業務でFigmaを少しだけ使っている人
・周りのデザイナーがFigmaを使っているよ、という人
・プロジェクトメンバーにFigmaを啓蒙したいデザイナー

Figmaは

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

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

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

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

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

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

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

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

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

もっとみる

【使わないと損!!】figmaおすすめプラグイン Part1

はじめに今回は私が実際に使用しているfigmaのプラグインの紹介をしていこうと思います。

おすすめプラグイン
1. Font Preview
手持ちのフォントをリアルタイムでプレビューできます。フォント選びに困っている人にオススメです。

2. Blush
デザインにイラストを手軽に追加できます。お好みのイラストを選び、構図するだけの簡単操作で、イラストのバリエーションの変更、カスタマイズも可能

もっとみる
Figmaを使った謎解き風練習ファイル!Figma World 第1章 旅に出よう

Figmaを使った謎解き風練習ファイル!Figma World 第1章 旅に出よう

久々投稿のタクトです!

今回の記事では
Figmaの練習ファイルについてご紹介しようと思います。

webデザインをするにあたって、いまは色んなツールが出てますね!
自分がいま勤めている会社でもPhotosohpやXdなどでやってきてましたが、
Figmaに徐々に移行することになり、新たに勉強しはじめました。

そんな折、Figmaは英語のUIだったりして
始めるまでのハードルが若干高いといった

もっとみる