マガジンのカバー画像

Figmaのお勉強

17
運営しているクリエイター

記事一覧

GitHubのようにFigmaを使う【デザインファイルの運用方法】

GitHubのようにFigmaを使う【デザインファイルの運用方法】

こんにちは、株式会社アトラエでデザイナーをしています三上蒼太です。
この記事は、Atrae Advent Calendar 2019 の3日目です。

本記事では、Figmaでのデザインファイルの運用方法について書きます。
これが完成形という訳でもなく、まだ模索中の段階です。そしてチームのステージやメンバーの特性によって柔軟に変えていくものだと思っています。

運用方法に迷われている方の一つの参考

もっとみる
【入門】Figmaのプロトタイプを一から極める

【入門】Figmaのプロトタイプを一から極める

こんにちは。最近の趣味はFigma、seyaと申します。

本記事はFigmaのプロトタイプ機能をなるべく隅々まで調べて、触って見た内容をまとめたものです。

慣れれば高い忠実度のプロトタイプを高速に作れる強力なツールだと感じたため、この記事を読んで同じ気分になってくれたら嬉しいです。

想定読者
- Figma触りたての方
- プロトタイプ機能は使っているけど、簡単な画面遷移にしか使っていない方

もっとみる
SmartHRのプロダクトデザイングループのFigmaの運用を大公開!第1弾:デザインデータに対する考え方

SmartHRのプロダクトデザイングループのFigmaの運用を大公開!第1弾:デザインデータに対する考え方

こんにちは。
SmartHRでプロダクトデザインをしている@wentz_designです。

入社して16ヶ月が過ぎ、そろそろ入社エントリなるものを書く機運か?と思い至り、これまで取り組んだことについて書いてみることにしました。

私は現在、メインでSmartHRの基本機能の開発に携わっています。
サブプロジェクトとしてユーザーリサーチ推進室の運営、SmartHR Design Systemの運営

もっとみる
Figmaのリファクタリングからはじめるデザインシステムの構築

Figmaのリファクタリングからはじめるデザインシステムの構築

こんにちは、GaudiyデザイナーのTORAJIRO(@jirosh1998)です。

『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。

このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋(mizoさんをはじめmikanのみなさん、具体

もっとみる
Figmaのconstraints徹底解説

Figmaのconstraints徹底解説

どうもーUI/UXデザイナーのうっくんです。

以前、Figmaのgroupとframeの違いについて書いた記事が評判でした。

そこではサラッとしか説明しなかったのですが、つまづく人も多そうなので、今回はconstraintsについて解説してみようと思います。

constraintsとは

「constraintsってなんやねん。日本語でおk」と思いますよね。安心してください。そういう方の為に

もっとみる
Figma でモーダルやポップアップ等の状態変化をプロトタイプする

Figma でモーダルやポップアップ等の状態変化をプロトタイプする

こんにちは! UIデザイナーのmarinです。
1年半前にメインデザインツールをFigma に移行した際の記事を書いたのですが、理由のひとつにプロトタイピングがしやすいことを挙げていました。
今回はその件についての深堀りを、Figma のプロトタイプを実際の業務でどのように用いているのか例を挙げて書きます。

※Figma のプロトタイプが初見の場合は、公式のFigma Tutorial: Pro

もっとみる
Figma のAuto Layout機能を適応して楽をする

Figma のAuto Layout機能を適応して楽をする

こんにちは! UIデザイナーのmarinです。

2019/12/6 にFigma がアップデートし、Auto Layoutという機能が搭載されました。このAuto LayoutをFigma ユーザーの皆様がどう活用しているか知りたくて、まずは自分から紹介してみようとこの記事を書いています。

Auto Layoutとはその名の通りなのですが、UI上のサイズ変更やオブジェクト等の入れ替えを自動的に

もっとみる
NewsPicks UIデザイナーのFigma利用フロー大公開!

NewsPicks UIデザイナーのFigma利用フロー大公開!

自己紹介NewsPicksでUIデザイナーをしております。つづく(ひらい) ともこと申します!

初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm

2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。
ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。

そして今年の6月末でヤフーを退

もっとみる
誰が見ても分かりやすく! Figmaデータを整理整頓した話

誰が見ても分かりやすく! Figmaデータを整理整頓した話

はじめまして!デザイナーのほまんです。
今年2月にマネーフォワードに入社し、福岡拠点で「クラウド経費」「クラウド債務支払」のUI/UXデザインを担当しています。

私が入社後、初めて担当させていただいたのは「クラウド経費」モバイルアプリの機能追加プロジェクトでした。
そこで「モバイルのデザインデータはこれです!」とFigmaデータを教えてもらったのですが、当初制作されたSketchデータを移行後、

もっとみる
小さな組織でのFigma活用 - Figma導入phase3

小さな組織でのFigma活用 - Figma導入phase3

「デザイナー組織が整っていない環境で、Figmaをどのように活用していこう?」
「そもそもデザインチームで働いたことないし、どこから始めたらわからない!」

弊社では半年ほど前にFigmaを導入して、こんな悩みを抱えながら少しずつ整備を進めてきました。まだまだ絶賛常時模索中ですが、今回その模索から一旦ここ数ヶ月色々と試してようやくある程度型ができてきました。

(これまでの模索)

今回これらの模

もっとみる
Figma Component Properties 、最強に噛み砕いてみた

Figma Component Properties 、最強に噛み砕いてみた

どうも Figmate のみなさん。アプデで便利になった Component Properties、不慣れなせいかイマイチ分かりづらかったので完全に理解するまでのメモを共有したいと思います。

2022.6.21追記
より良い記事を見つけたのでこちらのほうがオススメです🥳

そもそも Properties って?とかフロントエンドとの垣根やその意義については有識者におまかせしつつ、小難しい話を置

もっとみる
【Figma公式推奨】使い方ではなく、運用方法マニュアル2024年版

【Figma公式推奨】使い方ではなく、運用方法マニュアル2024年版

世の中のFigmaの日本語ドキュメントがショートカットや基本機能の解説に終始していることで、毎回チームに運用マニュアルをインストール必要が出てきて辛いのでこちらにオープンドキュメントとしてまとめておきます。

コピペしてアップデートしてもらって大丈夫です。各社のNotionページにPullしてあげてください。

あくまで現状のFigmaの仕様の前提で個人的な運用最適解としての見解です、こういったた

もっとみる
Figmaを導入して変わった5つのこと|使い方・事例・記事まとめ

Figmaを導入して変わった5つのこと|使い方・事例・記事まとめ

スマートキャンプデザインブログ、Designer / Engineer のhaguriです。

スマートキャンプでよく使用するデザインツールにFigma(フィグマ)というツールがあります。過去にも数回、Figmaに関する記事を書いてきました。

Figmaの導入後からしばらく経ち、会社全体で5つの変化が生まれました。
今回はFigmaによるコラボレーションやデザインワークの変化について、スマートキ

もっとみる
FigmaのコンポーネントをVariantsで状態管理する

FigmaのコンポーネントをVariantsで状態管理する

こんにちは、ふじけん(@kenshir0f)です。
Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。

Variantsとは?複数のコンポーネントの状態をひとつにまとめて管理する機能です。
例えば、Buttonの[Default, Hover, Focus, Disabled

もっとみる