Figmaの基本機能で簡単につくる、テキスト&あしらい表現TIPS - ICS MEDIA
リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現 マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画像をテキストでマスクする マスク機能を使用して、画像をテキストの形に切り抜きます。 以下の手順で切り抜きます。 画像とテキストレイヤーを用意 画像が前面になるようにして、画像とテキストレイヤーを重ねる 両方のレイヤーを選択状態にして、右クリックメニューから［マスクとして使用］を選択（ショートカットキーは、Mac：control + command + M、Windows：Ctrl + Alt + M） マスクした後も、テキストレイヤーは編集可能です。 さらに画像をレイヤーブラー
Figmaで複数ページPDF資料を制作する際に役立つかもしれない、3つのTips - Qiita
こんにちは。あさマック @mixplace です。主にWebアプリケーションのフロントエンド開発をしているエンジニアですが、ここ最近はUIデザイン領域にも重きを置きています。デザイニングとエンジニアリングの狭間にいる民として、サービスの体験をデザインする難しさを楽しさと噛みしめている今日この頃です。 ここ最近、いくつかの案件を担当させていただいているなかで、Webサービスの紹介冊子（PDF）を制作する機会がありまして、Figmaを選定して制作を行いました。 いわゆる複数ページもののPDFファイルですね。 今回は、紹介資料をFigmaでデザインしていて、どうしたら良いかわからずハマったことを3点のTipsとして自身の備忘を兼ねてご紹介します。 この記事は、Figma Advent Calendar 2021 の10日目の記事としてお送りします。 1. 用紙サイズに合ったFrameを作成したい
FigmaでLottieアニメーションを作ってみよう！作成方法やメリット、注意点を解説 - necco note | necco inc.
こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 「ウェブサイトで使うアイコン・イラストを動かしたい」 「Lottieを作ってみたいけど、After Effectsはむずかしそう」 そう思っている方は多いのではないでしょうか？ これまでLottieといえばAfter Effectsで作るのが主流でしたが、いまはFigmaのプロトタイプとプラグインを使って作成できます！ この記事では、Figmaを使ったLottieの作成方法を解説します。プロトタイプ機能を使ったことがない人でも簡単に作れるので、ぜひチャレンジしてみてください。 FigmaでLottieを作るメリット Lottieは軽量かつ美しいアニメーションを手軽に実装できるライブラリです。FigmaでLottieを作成することで、次のようなメリットがあります。 After Effectsを使えなくて
アドビ、Figmaの買収を断念
米Adobeは12月18日（現地時間）、デザインコラボレーションツールを手掛ける米Figmaの買収を断念すると発表した。同買収については、欧州委員会や英国の競争・市場庁などが懸念を示しており、買収に必要な承認が得られないと判断したことから合併契約の終了を決めたとしている。 Figmaの買収は2022年9月に発表。買収額は200億ドル（当時のレートで約2.9兆円）で、23年内の完了を見込んでいた。この件についてAdobeのシャンタヌ・ナラヤンCEOは、「AdobeとFigmaは、規制上の調査結果に強く同意しませんが、独立して前進することがそれぞれの最善の利益になると信じています」とコメント。 Figmaのディラン・フィールドCEOは、同社の公式ブログを更新し「世界中の規制当局と何千時間も費やして当社の事業、製品、当社がサービスを提供する市場の違いを詳しく説明したにもかかわらず、この取引を規制
［レポ］Figma CPOが自身の体験をもとに語った、魔法のような製品を生み出すために必要なふたつのこと
Figma Japanは、企業のCDOやCXO、デザイン部門のトップを招いたラウンドテーブルを開催。本記事では、サンフランシスコより来日したFigma CPO 山下祐樹さんによる「魔法のような製品をいかにして生み出すか」と題したプレゼンテーションと、後半で行われたファイアサイドチャットより、Figma Japanカントリーマネージャー 川延浩彰さんとの対話を中心にお届けする。 魔法のような体験提供のために最初に行った「OKRの廃止」 マイクロソフト、YouTube、Uberなどを経て、4年前にFigmaにジョインした山下さんは、それらの共通点を「素晴らしいデザインカルチャーがあること」と語り、セッションをスタート。そしてそれは具体的に「企業にとってさまざまなビジネスのプライオリティがあるなか、あえて超一流のユーザー体験にこだわって投資してくれる点」だと表現した。 英語圏ではこのような体験を
Figma によるデザインシステム入門
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
Adobe、Figmaを約2.9兆円で買収へ デザインコラボツール大手
米Adobeは9月15日（現地時間）、デザインコラボレーションツール大手のFigmaを200億ドル（約2.9兆円）で買収すると発表した。2023年内に買収を完了する予定としている。 Figmaは、Webサイトやアプリなどのデザイン制作全般をWebブラウザ上で完結できるコラボレーションツール。プロダクトマネジャー、エンジニア、マーケターなど、非デザイナー人材も参加して、一緒にデザインを作り上げられるのが特徴。チームでのプロダクト制作を支援する。 海外ではGoogle、Microsoft、vmware、Twitter、Uber、Block（旧Square）などテックジャイアントで導入されており、国内でもヤフー、LINE、楽天、富士通などがすでに採用している。2022年7月には日本進出を果たしたばかりだ。 買収後は、Figmaの共同創業者兼CEOのディラン・フィールド氏が引き続きFigmaチーム
デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える｜osanai / ui designer
カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページやコンポーネントにもっと素早くアクセスしたい」などです。 運用方法に関する課題に対して少しずつ改善に取り組み続け、徐々にですが Figma でのデザインシステムの管理が効率化されつつあります。今回はこれまでに実施した Figma の運用効率化の取り組みをご紹介します。 プラグインで解決編目的のページやコンポーネントに素早く
What's New in Figma
Downloads Get the desktop, mobile, and font installer apps
Figmaのデザインシステム UI2 を分析してみる - DESIGN JOURNAL - 株式会社モンスターラボ
今回はコミュニティの中でFigma開発チームが公開しているデザインシステム「UI2」を分析してみました。さすがFigmaの開発チームが作っているFigmaデータだけあってとてもよく作られており、観察すればするほど面白い発見があります。 ファイルのページ構成 まず最初にファイルのページ構成を確認しておきましょう。構成はとてもシンプルでわずか3ページ。1ページ目の「Main」にガイドラインとコンポーネント集などほぼ全ての情報が集約されています。あとは2ページ目の「Templates & Extras」にコンポーネントを組み合わせた画面全体の構成例があり、3ページ目の「Cover」にFigmaファイルのカバー写真という形です。
明日から使えたり使えなかったりするFigmaの豆知識20選 - Qiita
毎回このウィンドウを開いて1つずつ入力するよりも、この入力の方が少し早くなります。 ちなみに、角丸はこの書式で複数の値を指定しても受け付けてくれません。 widthやheightに0.001と入力すると幅や高さが0になる 正確に言うと0.006より小さければ0になり、0.006以上なら0.01になります。 親Frameの幅や高さを0にしてClip contentのチェックを外すと、地味に使い勝手が良いときがあります。 例えば、Auto layoutだけど枠からはみ出したような表現も出来るようになります。 ※何を寝ぼけているのかカンマの位置が間違っています。記事の本筋とは関係ない場所なので目を瞑ってください……。 画像に書き出さずともpngとしてコピーできる 要素を選択した上で⇧ + ⌘ + Cを押すと、pngとしてコピーできます。 Figma上で貼り付けるのはもちろん、Slackにも持って
The Online Collaborative Whiteboard for Teams
Downloads Get the desktop, mobile, and font installer apps
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UXデザインに役立つテンプレート集
Figmaの思想と新機能
Magician for Figma
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
NEWTのFigma運用方法 2023
Material 3 Design Kit | Figma
The Figma Store
Open design systems from the Figma Community
