Figma Learning

Figma の Dev Mode で UI の確認を楽にする

こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。公式のチュートリアルはこちら↓ Dev Mode とは？Dev Mode はデザインデータを実装担当者が見るときのモードです。

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

こんにちは、株式会社アトラエでデザイナーをしています三上蒼太です。この記事は、Atrae Advent Calendar 2019 の3日目です。本記事では、Figmaでのデザインファイルの運用方法について書きます。これが完成形という訳でもなく、まだ模索中の段階です。そしてチームのステージやメンバーの特性によって柔軟に変えていくものだと思っています。運用方法に迷われている方の一つの参考事例となれば幸いです。そもそもなぜ"運用"が大事？サービスは、公開して終わ

「このデザインデータどこにありますか？」からの卒業！Figmaデータ大整理物語

こんにちは！SHE株式会社デザインユニットプロダクトデザイングループの井斉花織（いおり）です。突然ですが、皆さんのデザインチームではどのようにプロダクトのFigmaデータを管理をしていますか？「めちゃくちゃ綺麗に運用できてます！」というところもあれば「助けてくださいカオスです！」というところもあると思います。何を隠そう、かつては私たちも決して綺麗に運用できているとは言えないような状況でした。チームの人数や管理対象のデータが増えていくにつれ、散在していく資産や場所

Figma信者なデザイナーが『Figma for UIデザイン』を読んだら新たな学びがあった話

こんにちは！NewsPicks プロダクトデザイナーのつづくです！今回は2022年6月10日に発売された『Figma for UIデザインアプリ開発のためのデザイン、プロトタイプ、ハンドオフ』を拝読しての新たな学びをまとめました。拝読しての感想拝読してのざっくりの印象は、全体的にFigmaビギナー寄りの内容としてわかりやすくまとまっている本だと思いました。 Figmaの名前を界隈でよく聞くようになってから3〜4年くらい経ちますが、その間、日本語で執筆されたFigmaの

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

自己紹介NewsPicksでUIデザイナーをしております。つづく（ひらい）ともこと申します！初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm 2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。そして今年の6月末でヤフーを退職し、株式会社ニューズピックスにUIデザイナーとして転職しました。現職ではN

実案件におけるFigmaでのデザインデータの作り方・運用方法

日々更新されるFigmaのデザインデータ。どのように作り、管理・運用するのが良いのか、まだこれがベストとは言えないが、現在やっている方法をまとめてみる。（※2024年1月に開催されたFoF Okinawa #3 Figma LT＆交流会で発表したものを記事化した）僕はいま株式会社バックムーンさんと地域の情報をシェアするSNS「Memii」というアプリのデザインをお手伝いしており、今回はこのアプリのデザインデータの運用方法を紹介する。ページ分けまずはページ分け。 F

Figma の裏技集

私がインターネッツを通じて知った「そんなん普通に使ってたら気付かへんよ…」と感じた Figma テクニックをまとめてみました。 Auto Layout の Frame 内で absolute な配置をする方法2022 5月の Config にて Absolute Positioning が発表されました！そちらを使いましょう！！ツールチップとかを作る時に便利なテクニックだと思います。ざっくり言うと 0.01 px の小さなフレームを作って、その中に absolute な

Figmaの使い方、全力でまとめました。

最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが

ファイルが重くなりがちな長期プロジェクトでのFigmaファイル管理

Japan Digital Designの久行です。三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（以下JDD）でExperience Design Div.（以下XDD）に所属し、体験設計やUI・ビジュアルデザインのリードを担当しています。この記事では、XDDが取り組むプロジェクトの中で発生した困りごとを基に取り組んだFigmaファイル管理の改善活動についてご紹介します。デジタルプロダクト開発でお馴染みのデザインツールであ

エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

こんにちは、@ShikiCheriです。現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。またこのプロジェク

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

こんにちは。最近の趣味はFigma、seyaと申します。本記事はFigmaのプロトタイプ機能をなるべく隅々まで調べて、触って見た内容をまとめたものです。慣れれば高い忠実度のプロトタイプを高速に作れる強力なツールだと感じたため、この記事を読んで同じ気分になってくれたら嬉しいです。想定読者 - Figma触りたての方 - プロトタイプ機能は使っているけど、簡単な画面遷移にしか使っていない方ゴール - 自分のワークフローの中で「Figmaのプロトタイプ機能はこの辺で

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

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

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

こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使う

Figmaの生産性を高めるTips50選

こんにちは、株式会社アトラエでデザイナーをしています、三上蒼太(@sota_mikami)です。この記事は、Atrae Advent Calendar 2020 の12日目の記事です。弊社ではデザインツールとしてFigmaを使っています。僕はこのFigmaが大好きで、社内でもFigma愛は随一だと自負しています。本記事では、Figmaを愛している僕が、Figmaをもっと快適に使いこなし生産性を高めるためのTipsを吐き出します。なお、こちらの記事ではTips

フォローしませんか？

#デザイン