【Figma(フィグマ)】ブラウザ上で簡単にデザインができるツール

この記事は約9分で読めます。

Figma(フィグマ)とは

Figmaは、ブラウザ上で簡単にデザインするためのツールです。Figmaは、場所を選ばず、ブラウザ上で簡単にインターフェースをデザインできるツールです。フリープランがあり無料で利用できます。

Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.

世界最先端のデザインコラボレーションツール「Figma」が日本へ本格進出

ブラウザベースの共同デザインプラットフォーム「Figma」を提供するFigma, Inc.(本社:米国サンフランシスコ)は、アジア初の子会社を日本に設立し、カントリーマネージャーに川延 浩彰(かわのべひろあき)を任命したことを発表します。同社は、「日本経済団体連合会」(JBF)に加盟しています。Figmaの製品が英語以外の言語で公式に提供されるのは、今回が初めてとなります。

世界でデザインコラボレーションツールをリードする「Figma」が日本へ本格進出
Figma Japan株式会社のプレスリリース(2022年3月16日 10時00分)世界でデザインコラボレーションツールをリードするが日本へ本格進出

Figma価格

  • スターター(無料)
    • 作成できるプロジェクト数に制限がありますが、デザイン機能やクラウドストレージに制限はありません。
    • 3つのプロジェクトが作成可能
    • クラウドストレージは無制限
    • レビュアー/エディターの招待は無制限
  • プロフェッショナル (月額12ドル)
    • 上記の制限がなくなり、より多くの機能を利用できるようになります。
    • チームライブラリの共有など
  • オーガニゼーション(45ドル/月)
    • 上記に加え、大規模な組織を管理するための機能、セキュリティ関連の機能が充実しています。

Figmaプラン一覧

Figmaの使い方

初心者向けFigmaの使い方:Webデザインをトレースしてみよう
最新版で比較するAdobe XDとFigmaの違い - デザイン機能編
近年、UI/UXデザインで活躍するデザインツールとしてAdobeXD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「AdobeXD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。UI/UXデザイ...

コンポーネント

【初心者】Figma講座#13:コンポーネント機能 – UIを部品として効率よく設計しよう

自動レイアウト

【初心者】Figma講座#12:オートレイアウト機能 – 繰り返しのUIレイアウトが抜群にラクになる方法を解説

プロトタイプ機能

Figma
Created with Figma

トリガーとアクション

【Figma】デザインを人に届けたいなら必須!プロトタイプ機能を徹底解説 #1

自動アニメーション

【初心者】Figma講座#14:アニメーション機能 – 本物かのように動くアニメーションをUIに付ける方法

Figma学習情報

公式YouTubeチャンネル

Figma
Figma is a free design tool for teams who build products together. Born on the Web, Figma helps the entire product team create, test, and ship better designs, f...

ヘルプページ

Security check

公式コミュニティ

Figma (@figma) | Figma Community
The latest files and plugins from Figma (@figma) — Figma is the design tool for teams who build products together. Claim your community profile here:

Figmaで使える無料UIテンプレート

Card Components Free Ui Kit for Figma

Card Components Free UI Kit for Figma - Download Free UI Kit
Download Card Components Free UI Kit for Figma free design resources. We collect free UI Kits for Adobe Illustrator, Adobe Photoshop, Adobe XD, Figma, Framer, I...

Figma iOS 15 Free Demo Version

Figma iOS 15 (Free Demo Version) - Download Free UI Kit
Download Figma iOS 15 (Free Demo Version) free design resources. We collect free UI Kits for Adobe Illustrator, Adobe Photoshop, Adobe XD, Figma, Framer, InVisi...

Atro Mobile UI Kit

Atro Mobile UI Kit (Freebie)
Whether you need a nudge to start work on your idea, find inspiration, or just want to add Atro Mobile UI kit to your freebie toolbox, go ahead and grab this aw...

Ticketapp Template

Free PSD for webdesigners!
Free PSD for webdesigners. Download awsome templates, Icons and Mockups for free!

Chat Dashboard Figma

Freebie — Chat Dashboard — Figma
Freebie — Chat Dashboard — Figma designed by Dmitry Starikov. Connect with them on Dribbble; the global community for designers and creative professionals.

Social Food App : Free Figma UI Kit

Web Design Tutorials by Envato Tuts+
Thousands of free tutorials and online courses to help you learn web design. Join our community of students and professionals to improve your design skills, cod...

JDD | JP + Ui Kit iOS]

Figma
Figma Community file — Mobile App UI kit optimized for Japanese fonts Click here for term of use 👉 JP + UI Kit Android 更新履歴 2021/10/08 Screen UIを追加 2021/10/08 ...

NFT Market App

NFT Market App (Community) - Download Free UI Kit
Download NFT Market App (Community) free design resources. We collect free UI Kits for Adobe Illustrator, Adobe Photoshop, Adobe XD, Figma, Framer, InVision Stu...

One Page Calendar Ui for 2022

One Page Calendar UI for 2022 - Freebiesbug
A one page 2022 calendar that you can use as a UI component, or print on A5 paper and keep it for a year. Available for Sketch and Figma.

Nucleus UI

Nucleus UI – Free UI component library for Figma
Create mockups or prototypes in Figma at speed.

Figma Web Design Kit – Call to Action Blocks

Figma Web Design Kit — Call To Action Blocks
Material Website Kit for Figma. Convert visitors into customers with confidence!

Neumorphic UI Kit – Tesla App

Neumorphic UI Kit - Tesla App - Freebiesbug
Free dark neumorphism UI Kit for Figma featuring Tesla cars, together with elements like buttons and navigation.

Grada – Free Figma UI Kit

Grada - Free Figma UI Kit
Grada - Free Figma UI Kit designed by Cosmin Negoita. Connect with them on Dribbble; the global community for designers and creative professionals.

Deca Kit for Figma

Deca Kit
Clean and clear UI Kit with all necessary stuff to create design projects. The simplest way to work with buttons, charts, inputs, and popups.

Material UI: React Components in Figma

Behance

Responsive Portfolio Template

Free Portfolio Responsive Template
FREE Responsive Portfolio Template for Agency, Personal and Webflow Expert. Perfectly organized and designed with latest design trends. Created for Sketch, Figm...

CreateX – Website Templates for Figma

All the Templates You Can Download
Design without limits. Inspiring and ready-to-use graphic & web templates, fonts & assets. Unlimited downloads for a single monthly fee.

Travel Agency Landing Page

Travel Agency Landing Page - Freebie by AR Shakir
Download this free travel agency landing page to speed up your workflow for your next project. Feel free to use this project for personal or commercial use. No ...

New Year Deal Web Page

Figma
Figma Community file — New year is here, check out my new design for a new year's eve party deal, Played with big n bold design here with "Adventure Time" look....

Brutalism UI Kit

Brutalism UI Kit - 70 Free Artboards - Figma.Store
70 free artboards for your next website. Get these free artboards before the brutalism trend goes out of style.

Marka Email Genearator

Figma
Figma Community plugin — Documentation How to use: Create a framePlace content inside the frameSelect the frameRun pluginExport HTML template Plugin supports: ...

Bookshop Website

Bookshop website
Here is my concept of Bookshop website with illustrated banner.

Agency Landing Page

All the Templates You Can Download
Design without limits. Inspiring and ready-to-use graphic & web templates, fonts & assets. Unlimited downloads for a single monthly fee.

Open – Tailwind CSS Landing Page Template

Figma
Figma Community file — Openis a free landing page template designed for developers/makers who want to create a quick and professional landing page for their ope...

Breakpoints

Figma
Figma Community plugin — Preview responsive layout inside a Figma frame and share animated prototype. Works even without the opened plugin window and anyone in...

Olson Brand Identity and Style Guide

Olson Brand Identity and Style Guide
Want to create better design deliverables for your clients?Use this guide to save time by creating a cohesive branding guide. Keep your company aligned and on-b...

Free Figma Design System | UI styleguide

Free Figma Design System | UI styleguide
Free Figma Design System | UI styleguide designed by Tyler Wain. Connect with them on Dribbble; the global community for designers and creative professionals.

Figma Starter Kit 1.4

Figma Starter Kit 1.4
Get a jump start on your Figma projects with this starter kit. Includes all basic components, it's a great way to get started without any clutter. What you get:...

Button UI / Design System

(FREE) Button UI / Design System
(FREE) Button UI / Design System designed by Sergey Arkhipov. Connect with them on Dribbble; the global community for designers and creative professionals.

Wireframe

Figma
Figma Community plugin — Free Popular Wireframes library for everyone, Wireframe plugin is the best Figma plugin for creating beautiful wireframes, user flow, p...

Paper Wireframe Kit

All the Templates You Can Download
Design without limits. Inspiring and ready-to-use graphic & web templates, fonts & assets. Unlimited downloads for a single monthly fee.

Wireframe in Figjam

Create simple wireframes in FigJam
Get a free library that adds missing wireframing components to the new Figma's online whiteboard.

iPhone 12 Clay Mockups for Sketch and Figma

iPhone 12 Clay Mockups for Sketch and Figma (FREE)
Hello friends! 👋Simple, minimal, super-clean set of iPhone 12 clay mockups from Hype4Academy. We've been asked a lot about our custom, clay mockups, so here the...

Material Design Icons

Figma
Figma Community plugin — Instant easy access to the entire Material Design Icons library: 35,000+ icons in PNG and SVG at your fingertips. Search icons by name...

Roundd – App Logo Icon Maker

Roundd - App Logo Icon Maker – Free Design Resources
Roundd – App Logo Icon Maker is here! Create a unique icon logo for your iOS or Android app, with over 6,800 original combinations. Pick a logo mark and backgro...

Website Page Builder Icons Set

All the Templates You Can Download
Design without limits. Inspiring and ready-to-use graphic & web templates, fonts & assets. Unlimited downloads for a single monthly fee.

3Dicons – Open SOurce 3D Icon library

Figma
Figma Community file — 3dicons is a set of beautifully crafted open-source 3D icons created in Blender and made available to the public for free. It has been re...

Social Network Icons 2022

Figma
Figma Community file — Hello everyone, you can use this icons for your needs 🙂 Please like and comment this post <3

Crypto Logos

Figma
Figma Community file — Over 55 protocol logos and counting, perfect for any crypto or blockchain project. These logos come as a flat icon or with a subtle shado...

Flow chart kit 2.0

FREE Flow chart kit 2.0 for Sketch/Figma
User flow kit ver. 2.0 for Sketch and Figma. The biggest FREE flow chart tool on the market!Ver. 2.0 combines the elements and simplicity of ver. 1.0 with the p...

Greyhound Flowcharts

Greyhound - Free Flowcharts for Figma & Sketch App
200+ cards and many other elements, such as arrows, actions and etc.

Design Presentation Guide

Behance

コメント