Figma Learning

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

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

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

[Figma]デザイナーもエンジニアもちょっと幸せになる"無理しすぎない"Variablesの使い方

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

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

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

FigmaのLayout grid（レイアウトグリッド）を活用する

渋谷でデザイナーをしています。福田です。 FigmaのLayout gridを利用してデザインを作成するのが、便利だったので備忘録として記録します。 Responsive layout grid とはレスポンシブレイアウトグリッドでデザインを作成すると、画面のサイズや向きに左右されることなく、レイアウトを組むことができます。また、レイアウトグリッドのルールを決めてしまえば、そのルールに従ってレイアウトを組むだけなので、デザインの作成もスムーズになります。 gridの構成

FigmaのVariablesを実際にプロジェクトに導入してみるなら、どこから使うか

Figmaの新機能のVariablesは、これまでの機能に比べるとできることが多く、今運用しているプロジェクトに何から導入していったらよいか模索している方が多いと思います。 Flappy Birdが作れたり、ポケモンを進化させることができたりと、Variablesの活用事例は多岐に渡りますが、実際のWeb・アプリのUIデザインにおいて、自分ならまずどこから導入してみるかをご紹介します。一番手軽に導入でき、威力を発揮できるのはNumberのGapとRadius色々なことが

Figmaの生産性を高めるTips50選

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

Figma のVariants 機能でコンポーネントの管理を最適化する

こんにちは！　UIデザイナーのmarinです。 2020年10月末にFigma に搭載されたVariants 機能、便利ですね〜！　Figma はこんなことができたらいいのになぁと思うことをどんどん実現してくれるので大好きです。早速スペースマーケットでもVariants 機能を活用しているので、そもそもVariants 機能とは何か・何が便利なのかという簡単なおさらいと、実際の適用に至るまでを紹介します。 Variants 機能とは？複数のコンポーネントをひとつにまとめる

フォローしませんか？

#UIデザイン