Figma Learning

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

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

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

はじめにこんにちは！i3DESIGNデザイナーチームです。今回は、チームでFigmaを使ってデザインしている方に向けた実務で活かせるFigmaのノウハウをお届けします！ポイントを押さえて、作業のスピードをアップしましょう！ 1. ComponentVariant properties と Component propertiesの使い分け FigmaのComponentには「Variant properties」と「Component properties」の2種類のプロ

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】

こんにちは、ほぼフルタイムのフリーランスとして株式会社mikanでデザイナーをしています、三上蒼太(@sota_mikami)です。英語アプリmikanは、もうすぐ10歳になる長寿アプリです。アプリ自体はシンプルさを保ち続けていますが、多くの実験が積み重ねられてきた歴史があります。ただその歴史ゆえに古い画面のデザインデータが一部なかったり、設計意図や当時の背景がわからず評価の難しい画面があったりと、デザインデータと意図を管理するための標準化が一つの重要な課題となっていま

ファイルが重くなりがちな長期プロジェクトでの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]デザイナーもエンジニアもちょっと幸せになる"無理しすぎない"Variablesの使い方

こんにちは、@kiiita です。 2023年6月頃にFigmaの新機能Variablesが登場し、それから複数のプロジェクトでVariablesを導入し、運用してみました。 Variablesの登場した時に以下のような記事を公開しました。ありたがいことに現在も多くの方に読んでいただいてまして、記事の公開から半年が経過しているので、改めて実務に取り入れやすい塩梅でのVariablesの使い方をまとめてみます。私自身Figmaでデザインをしますし、エンジニアとしてF

Variants と Variables を組み合わせて色々モード切り替えできるようにする

昨日ワクワク機能である Variables がリリースされました。 https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma Variables では標準で色、数字、文字列、真偽値の4種類の値が指定できますが、Variants と組み合わせることでより色々なものをモードと共に切り替えられるようになります。下記は画像を切り替えている例です。が、まあこれが中々

フォローしませんか？

#figma