#UIデザイナー
Figmaでここまで！？ゼロからはじめるUIアニメーションデザイン
クックパッド デザイナーのよーた（@yotaszk）です。突然ですが、あなたは「Figma」にどんなイメージをもっていますか？
UIデザインツール？、プロトタイプングツール？・・・もしそのイメージだけに留まっているなら、めっちゃ勿体無い。めっちゃ勿体無いです（本当に勿体無いので2回）。
もちろん基本的な機能は、UIデザインやプロトタイピングです。ただし、Figma Communityのプラグイ
NewsPicks UIデザイナーのFigma利用フロー大公開！
自己紹介NewsPicksでUIデザイナーをしております。つづく（ひらい） ともこと申します！
初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm
2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。
ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。
そして今年の6月末でヤフーを退
知識で差をつけろ！Figmaがもっと便利になるTips集 〜便利機能・ショートカット編〜
こんにちは、i3DESIGN デザイナーチームです。
私たちi3DESIGNではFigmaの使用頻度が最も高くチームメンバー全員が愛用しています。そこで普段私たちがFigmaを使用する際に活用している便利機能やショートカットをご紹介したいと思います。
-便利機能Fill、Effects、Layout gridはコピーできる「ここで使ってるshadowを別のとこでも使いたいな🤔」と思うシーンは
SaaSデザイナーがすすめる、業務が効率化するFigmaプラグイン8選
こんにちは。アルプのデザイナーの大澤（@Tadaki）です。
サブスクリプションの契約や請求の管理を SaaS として提供する Scalebase というプロダクトのデザイナーをしています。
Scalebase もそうですが、SaaS プロダクトだと実データを用意するのが大変だったり、細かなデータの修正・整形が多くプラグインなしで作業するとかなり労力が必要かと思います。
もうすでに使っている
Figmaのブックマークプラグインを作ってみた
最近Figmaのプラグイン、figmarkを作ったので紹介させてください。
大規模になったFigmaのデータを触っていて、こんなことありませんか？
・ページの行き来が多くて迷子になる
・よく確認する場所をよく見失う
そうだ、コンポーネントをブックマークできるプラグインを作ろう。
figmarkを作りました。
使い方は簡単！1. 公式からfigmarkをインストール
2. Figmaの何もな
Auto layoutとVariantsの効果的な使い方
こんにちは。
株式会社アジケでUIアシスタントデザイナーをしている山本です。
Figmaをメインツールとして使い始めて半年経ち、基本的な操作に慣れてきました。
そんな中、1ヶ月前くらいにFigmaのAuto layoutとVariants機能を使うことになり、最初は「難しそう…できるかな…」と不安だったのですが、
やっていくうちに「こんなに便利なの…？使うの楽しい…！」となり
今では、この２つの
Figmaでつくるデザインシステム設計#4 Organisms〜Templates
はじめに
今回は、Organism〜Templateの作成について解説します。要素を集めて整形するフェーズとなります。また作成してきたコンポーネントに対して具体的な機能を付与することができるフェーズでもあります。UXデザインにおいても重要なポイントとなります。
Atom/Molecule/Organismについては前回の記事を参照していただければ幸いです。
Templateについて
Templ
Figmaでつくるデザインシステム設計#3 Molecules〜Organisms
はじめに今回はFigmaのアセット利用して、Molecules〜Organismまでを作成します。Atomic Designについて、また各要素について引き続き解説します。
#1 Figmaでつくるデザインシステム Atomsまでの解説はこちらから
#2 Atoms〜Moleculesまでの解説はこちら
MoleculeのおさらいMoleculeとはAtomとAtomを組み合わせたものです。
Figmaでつくるデザインシステム設計#2 Atoms〜Moleculesの作成
はじめに前回の記事で、デザイン設計に関しての準備や作り方の概念及び、Figmaのアセットを利用したAtomsの作り方を書きました。今回は、その続きとしてアセットの作り方の補足と、Atoms同士の組み合わせで生成されるMoleculesの概念、実際のFigmaでの作り方まで解説します。
前回の記事は下記からご覧いただけます。
Figmaでのアセット管理の特徴前回は、Atomsフレームを作り、At
Figmaでつくるデザインシステム設計#1 Atoms作成まで
まずは、figmaを開く前に要件整理を行います。
デザインシステムを作る目的デザインの一貫性を担保し、デザイナーがユーザーが期待する機能性やユーザビリティを素早く提供できるようする。また、デザインシステムを実行した結果として迅速にKPIを達成できるツールとして機能することを目指している。
メリットと留意点サービスをまたいで一貫したUXデザインを実行することができる。
コンポーネントが標準化され