Figma

簡介

Figma原本只是個雛型工具，在FigJam還沒推出之前，就很多人把Figma當白板工具使用了。後來(04/21/2021)推出FigJam，讓白板跟設計分開。也讓Figma成為UX的最佳工具，從UX研究一直到UX設計都可以透過Figma完成了，為了避免混淆，也將原本的Figma稱為Figma Design。

• Figma (官方文件) Get Started

  • Create an account

  • Figma design basics

  • FigJam basics

  • 撥放清單

    • Figma for Education (5部影片)

    • Tutorials: Explore design features in Figma (20部影片)

    • Tutorials: Prototype while you design (9部影片)

    • Tutorials: Create your design system in Figma (8部影片)

    • Auto layout: Learn to create flexible designs and components (8部影片)

    • Figma Tips (51部影片)

    • Build it in Figma (16部影片)

      • Design System (5部影片)

      • Responsive Web Site (3部影片)

    • Get started with FigJam (5部影片)

FigJam

FigJam是個白板工具，也是個畫圖表(Diagram)的工具，事實上，過去就有人利用原本的Figma來作為白板及畫圖表的工具，然而，FigJam提供了一些新的功能，讓我們更容易透過FigJam來完成雛型之前的準備工作。

• FigJam (官方文件)

  • Explore FigJam files

  • Guide to FigJam

  • Welcome to FigJam (1:05) (2021)

• Step-by-Step Introduction to Figjam AI for Better Design Collaboration

  • Generating boards and diagrams

  • Sorting sticky notes

  • Summarizing sticky notes

• FigJam — 2021 年值得期待的數位白板工具 (2021)

• FigJam 線上白板高效率討論流程圖，來自熱門設計協作工具 Figma (2021)

• FigJam by Figma (9:55) (2021)

• Get started with FigJam (撥放清單) (15部影片)

  • How to collaborate in FigJam (2:48) (2024)

  • How to run effective team meetings in FigJam (3:51) (2024)

  • How to start jamming in FigJam (12:06) (2024)

    • Ideating and prioritizing

    • Diagramming & concepting

    • Planning for alignment and strategy

  • FigJam for User Research Card Sorting (7:14) (2024)

  • Welcome to FigJam (1:05) (2021)

  • FigJam tips

    • How to swap FigJam stickies (0:32) (2024)

    • How to add washi tape and placeholder stickies (0:45) (2024)

    • How to play FigJam music (0:22) (2024)

• 常用的templates

  • 12 UX Templates 

    • Persona

    • Customer Journey Map

    • Value Proposition Canvas

    • User story mapping

  • Value Proposition Canvas 

  • Empathy Map with Open Peeps 

  • Service Blueprinting Kit

Figma design

• Figma for Education

  • 教育版可免費使用Figma Professional (含: Dev Mode)

• Figma Help Center (官方文件) (2024/04/01更新)

  • Best Practices

    • Best Practice Guides (15篇文章)

    • Tips and tricks (8篇文章)

  • Tour the interface (5篇文章)

  • Tools, shapes, and layers

    • Create layers (12篇文章)

      • Frames in Figma 

    • Work with layers (19篇文章)

    • Use auto layout (3篇文章)

      • Using auto layout 

    • File utilities (7篇文章)

  • Styling elements

    • Paints (color, gradients, and images) (9篇文章)

      • Paints in Figma 

    • Typography (13篇文章)

      • Guide to text

      • Add text in Chinese, Japanese, and Korean 

    • Strokes

      • Apply and adjust stroke properties 

    • Blurs and shadows

      • Apply shadow or blur effects 

    • Corner radius

      • Adjust corner radius and smoothing 

  • Styles

    • Styles in Figma

    • Create color, text, effect and layout grid styles

    • Manage and share styles 

  • Components

    • Guide to components in Figma

    • Create components to reuse in designs

    • Explore component properties

    • Create and manage component properties

    • Name and organize components

    • Variants

      • Prepare for variants

      • Create and use variants

      • Create interactive components with variants

  • Variables (Beta，6篇文章) (付費功能)

    • Guide to variables in Figma

      • Variables for Designs and Design Systems

        • Figma tutorial: Intro to variables (14:51)

        • Overview of variables, collections, and modes

        • Create and manage variables 

        • Apply variables to designs 

        • Modes for variables 

        • The difference between variables and styles

        • Variables playground  (design file)

      • Variables for advanced prototyping

        • Video tutorial: Prototype with variables (13:22)

        • Use variables in prototypes 

        • Use expressions in prototypes 

        • Multiple actions and conditionals 

        • Variable modes in prototypes 

        • Advanced prototyping playground (design file)

  • Libraries (付費功能)

    • Guide to libraries in Figma 

    • Create and share libraries (6篇文章)

    • Use libraries (7篇文章)

    • Manage your libraries (5篇文章)

  • Course: Introduction to design systems (6篇文章)

    • Overview: Introduction to design systems

    • Lesson 1: Welcome to design systems

    • Lesson 2: Define your design system

    • Lesson 3: Build your design system

    • Lesson 4: Document and manage your system

    • Update 1: Tokens, variables, and styles

  • Prototypes

    • Guides (8篇文章)

      • Guide to prototyping in Figma 

    • Create prototypes (7篇文章)

      • Create overlays in your prototypes

    • Advanced prototyping (6篇文章)

      • Advanced prototyping examples

      • Smart animate layers between frames  

      • Video tutorial: Prototype with variables (13:22)

      • Use variables in prototypes

      • Use expressions in prototypes 

      • Multiple actions and conditionals 

      • Variable modes in prototypes 

      • Advanced prototyping playground (design file)

    • View prototypes (5篇文章)

  • Dev Mode (付費功能)

    • Overview (4篇文章)

      • Guide to Dev Mode

    • Inspect designs (6篇文章)

      • Guide to inspecting

  • Comments (6篇文章)

    • Guide to comments in Figma

  • Multiplayer tools

    • Present to collaborators using spotlight

    • Use cursor chat in Figma design

    • Optimize design files for developer handoff  

  • Branching and merging (Figma Organization付費功能，8篇文章)

    • Guide to branching

  • Import and export (6篇文章)

    • Guide to imports in Figma design

    • Export from Figma 

• Figma offical Youtube channel

  • What's Figma? (1:35) (2019)

  • Figma For Beginners: Explore ideas (1/4) (15:49)

  • Figma For Beginners: Create designs (2/4) (21:24) **

    • 加上圖 (2:33-)

    • 文字 (Typography) / Text Style (3:40-)

      • Getting started with text 

      • Styles in Figma 

    • 顏色

    • Auto Layout (7:23-)

      • Create dynamic designs with Auto layout 

    • 產生元件 (10:20-)

      • Guide to Components in Figma 

      • Vector Networks 

      • Boolean Operations

  • Figma For Beginners: Build prototypes (3/4) (7:45)

  • Figma For Beginners: Prepare for Handoff (4/4) (5:10)

補充資料

入門教學

• UI設計入門 李偉成學長 (43:49起) (2021)

  • 視覺設計基本概念

  • 設計通用原則與模式

  • Figma小教學 (檔案)

    • ICON

    • 布林群組

    • 元件 (Components)

    • 自動佈局 (Auto Layout)

• Figma設計體驗營 (六角學院) (2021)

  • 這個體驗營介紹了目前討論度很高的介面繪圖軟體「Figma」與它的核心功能：包含 Frame、Auto Layout、Component、Prototype、與 Plugins。最後會讓每個人用 Figma 做出一張自己的自介小卡來互相交流。

  • Figma 設計體驗營（上）：基本介面 / Frames (1:06:45)

  • Figma 設計體驗營（中）：Auto Layout / Components (1:04:20)

  • Figma 設計體驗營（下）：Prototype / Plugins / 自介小卡 (47:48)

• Figma 教學：讓技術開發人員都能輕鬆實作畫面設計 / Figma — How Tech Developer Pick Up the Skillset of UX/UI Design (2020)

• UI設計師之工具學習指南系列 (2020)

  • 【Day15】進入Figma篇 

  • 【Day16】Figma篇 : Components 

  • 【Day17】Figma篇 : Constraints 

  • 【Day18】Figma篇 : Smart Selection 

  • 【Day19】Figma篇 : Auto Layout 

  • 【Day20】Figma篇 : Auto Layout 小實做 

  • 【Day21】Figma篇 : 發現隱藏的小功能 

    • Scale

    • Rules

  • 【Day22】Figma篇 : 夢幻的鋼筆工具 

  • 【Day23】Figma篇 : 令人驚豔的Mask(遮罩) 

  • 【Day24】Figma篇 : Layout Grid 

  • 【Day25】Figma篇 : 常用快捷鍵小整理 

  • 【Day26】Figma篇 : 從手機預覽 

  • 【Day27】Figma篇 : 設計到切版 

  • 【Day28】Figma篇 : 實作 

  • 【Day29】UI設計軟體小比較 

• 凱瑞普拉斯-Figma教學

  • 為什麼Figma會成為新一代的設計神器？ 

    • Figma的4大優點和特色

      • 跨平台裝置

      • 共同協作

      • 原型製作Prototype

      • 插件＆社群

  • Figma基礎5大功能 

    • Frame的用法

    • 快速置入圖片，調整與編輯屬性

    • 管理文字以及顏色樣式

    • 圖形布林運算

    • 響應式設計Constraint

  • 快速了解Figma進階五大功能 

    • 自動排版Auto Layout

    • 元件Component

    • 元件變數Component Set Variants

    • 網格系統 Grid System

    • 打造設計系統 (Design System)

  • Figma 2021 Config年會

    • FigJam-獨特的線上工作坊

    • Branch- 版控功能更接近Git

    • Figma App- 更加完善的Mirror功能

    • 語音協作-追逐Clubhouse的潮流

    • 超多人協作-團隊協作專業化時代的來臨

    • Figma Community開放-人人都可以成為模板創作者

  • Figma10個實用外掛介紹

    • Design System Organizer圖層命名與組件整理

    • Font Preview字體預覽

    • Clean document清理文件

    • WebGradients漸層色彩

    • Blobs創建不規則向量色塊

    • Humaaans for Figma客製人物向量圖

    • LottieFiles置入Lottie動畫

    • Unsplash高品質免費圖庫

    • Content Reel 自動填充內容

    • Iconify圖示

  • Figma 2023 Config年會

    • Design System-Variables

    • Prototype高級原型設計

    • Auto Layout 自動佈局更新

    • Dev Mode：開發者模式

• Figma by Jesse Showalter (Playlist)

  • Figma Masterclass for Beginners (2023 Updated) (31:56) (2022) **

  • Figma Auto Layout | Getting Started with Auto Layout (13:15) (2021)

  • Figma Variants (5:23) (2021)

  • Intro to Figma - Beginners guide to Figma Basics (16:07) (2018)

• Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2021) (24:22) **

  • Figma resources (Food delivery app UI template) 

  • Evericons for Figma 

  • Unsplash 

• 1 Figma file type. 7 types of work. (2023)

• Closing the gap: creating better Figma components and layouts with the code in mind (2021) **

  • Rename your layers

  • Auto layout everything

  • Componentize your stuff

  • Flex it

• Designing with Dynamic Content in Figma (2021)

  • Component variants

  • Content Reel (plugin)

  • Google Sheets Sync (plugin)

  • Building your own Figma plugin

• Figma and its many uses beyond prototyping (2021)

使用技巧

• 11 steps to keep Figma clean (2022) **

  • Figma variants

  • Thumbnails / Cover Photos

  • Auto-layout

  • Process description and screen flow

  • Proper naming for the artboards

    • [Screen_Title] - [User Role] - [State of a screen]

  • Name your pages!

  • UX Specification for developers

  • Link between projects and pages

  • Notes on team

  • Divide your projects

  • Create a pitch deck

    • Pitchdeck presentation studio (plugin)

• Little Figma tricks that saved my time. (2022)

• A few lesser-known Figma tips (2022)

• 11 super-simple tips to help improve your Figma workflow (2022) 

• Figma features you’re not using (2022)

• Design dependencies & reusable flows in Figma : Modular flows that can be shared and reused across teams. (2022)

• Advanced Figma tips & tricks 2022

• Advanced Figma tips & tricks 2021

• 10 Figma Tricks I Wish I Knew Earlier (2021)

• 10 MORE Figma Tricks I Wish I Knew Earlier (2021)

• 40+ Figma tips that make you faster (2021)

• 10 Pro Figma Tips to work faster (2021)

• 10 Figma Best Practices to 10X Your Workflow (2021)

• 6 Figma rules to keep your work clean (2021) **

  • Add a cover photo to your Figma file

  • Give names to all Pages systematically

  • Use styles for everything

    • Install a plugin called called “Styler”

  • Use of Components

  • Create flow diagrams from your screens

  • Always create a copy file.

• Some Supercool Figma tools I wish I knew earlier (2021)

• Text Style: Figma series (2020)

• Color Styles: Figma series (2020)

• Figma tips and tricks you might not know about (2020)

• For the love of Figma (2019)

  • Nesting color styles

  • Custom frame presets

  • Dynamic components

  • Stick to surrounding layers

  • Multi-user login

• Developer / collaboration

  • Design to code: how to streamline design-to-dev handoff with Figma (2023)

    • First steps first: handoff document

    • Keeping the handoff structured

    • Dealing with frames

    • Going with the flow

    • Communicating responsive states

    • Working with the layers

    • Content management 101

    • Structure your communication

  • How to help bridge the gap between UX design and code (2022)

  • Tips for communicating better the information in Figma files to developers (2021) ** 

    • Make sure developers know how to use Figma

    • Add a cover thumbnail to the Figma file

    • Organize the page tree

    • Below the screens, write important information

    • Give the screens names and numbers

    • Build the screens with components

    • Use the hand emoji

    • Build a screen flow diagram

    • Ask the developer to use the comment tool.

    • Add the developer as a viewer and inform them

    • Clean the file/page from unnecessary information

    • Explain to the developers how you built the design system and your product design principles

  • Inspect Panel

    • Using the Figma Inspect panel to help engineers build your designs (2021)

• Auto Layout

  • New Figma auto-layout in 5 min (2022) **

    • Apply auto layout: same old

    • Auto-layout menu: Same features new look

    • New: on-canvas control

    • New: Negative Spacing

      • Figma quick trick: negative spacing in auto layout (2022)

    • Spacing mode: Same old but nice new shortcuts

    • New: Include exclude stroke

    • New: Change stacking order

    • New: Text baseline alignment

    • New: Absolute Positioning

    • Resizing menu: Same old, just moved + new shortcuts

  • Create Responsive Design in Figma (2022)

    • Understanding Auto Layout in Figma

    • How to Use Breakpoint Plugin

  • Figma Auto Layout | Getting Started with Auto Layout (13:15) (2021)

  • 10 Auto-Layout Tips in Figma (2021)

  • Figma: 5 simple guides to survive auto-layout and constraints  (2021)

  • Why did Figma decide to call its core feature Auto layout? (2021)

  • Hacks creating designs with Auto Layout and Variants in Figma (2021)

  • Figma Constraints & Auto Layout for web developers (2020)

  • Tips & Tricks for Auto Layout in Figma (2020)

• Using spacer components to drive consistency (in Figma) (2022)

  • Traditional auto-layout method

  • Spacer method

• Why designers should move from px to rem (and how to do that in Figma)-Update (2023)

  • NEW: Switching from px to rem in Figma’s Dev Mode

  • Why designers should move from px to rem — and how to do that in Figma (2021)

• A quick way to optimize design & prototyping workflow in Figma (2021)

  • Divide sections by using different Frames

  • Turn each section into a Component

  • Create an instance of each of those Components

  • Group each of those instances using Auto Layout to save time.

  • (Optional) Turn the Stack into a Component

  • Place the Stack inside a Prototype Frame

  • Set the Prototype Frame’s overflow behaviour to Vertical Scrolling in the Prototype tab menu.

• How to Set Your Figma Up for Easy Collaboration with Nondesigners (2021)

• Migration

  • How we migrated our design team to Figma (2021)

    • Tools, costs, and learnings from other design teams (part 1)

    • Creating a more collaborative and efficient process when migrating to Figma (part 2)

  • A Designer's Guide: Migrating Sketch to Figma (2021)

    • A Designer’s Guide: Migrating Sketch to Figma — The Setup 

    • A Designer’s Guide: Migrating Sketch to Figma — Components Rebuild

    • A Designer’s Guide: Migrating Sketch to Figma — Finishing Touches

  • Migrating to Figma: the business case, the process, and the libraries (2020)

    • The business case

      • Having run the numbers and been given a firm thumbs up from our UI and UX designer that Figma was indeed as powerful as we had hoped for, I pitched the idea and we started to consider a formal migration process.

    • The structure (process)

      • Project structure

      • File naming

      • File structure

    • The libraries

      • Our libraries

      • Component naming

      • Assets

      • Tokens

• Testing Figma Components

  • Testing Figma Components (2022)

  • Component Visual Test Cases : Like code, prove Figma shows what and changes as you expect (2022)

    • Visual Difference Figma plugin

  • The Figma Component Review (2022)

• Structure

  • From a local to global way of working: building a new Figma structure (2022)

    • Figma structure: from a local to a global way of working

    • From a local to global way of working: building a new Figma structure (Part 2) 

  • How to organize your Figma file (2022)

  • Improve your project structure in Figma (2022)

  • The Library + Flow approach to organizing Figma files (2021)

  • How to Stop Getting Lost Among Multiple Figma Mockups (2021)

    • semantic versioning

    • version history in Figma

    • branching, a new Figma tool (currently beta).

  • Figma files organization’s tips from the Doctolib team (2021)

• Figma vs. Sketch

  • Figma: All you need to know (for Sketch users) (2020)

  • 3 reasons why as a digital agency we switched from Sketch to Figma (可能是2019)

    • Enabling us to have one unified tool

    • Figma’s collaboration is unrivalled by Sketch

    • Figma trumps Sketch on pricing

  • Figma Vs. Sketch (2018)

Figma Config

• Figma Config 2021

  • Figma 2021 Config年會

  • Figma Config Recap in 3 minutes (Config 2021)

• Figma Config 2022

  • How Figma is changing its game— Config 2022 : Major Changes & What’s new in Figma

    • What are variable fonts? And how to use them : Figma introduced a new feature to support variable fonts at the Figma conference, Config 2022

    • Component Properties in Figma 

    • Input text with Figma component properties 

      • Previously, we had to create variations for each option, but now we can build a smart component that includes them all.

• Figma Config 2023

  • Figma 2023 Config年會

Components

• Components

  • Becoming a Figma ninja with base components (2022)

  • How to make your Figma components easier to use (2022)

  • “Predefined components” in Figma (2022)

  • Figma quick trick: components with customisable contents. (2022)

  • How to create large component sets in Figma (2021)

    • Variant

    • Component sets

  • 1-Hour Intro to Component Libraries : Figma training for product managers (2021)

    • Training Part 1: Component Libraries

    • Training Part 2: Variants

    • Training Part 3: Quick hacks

  • 10 Component Tips in Figma (2021)

  • Figma Master Component Quick Tip (2021)

  • Figma Components: The Frontify Way (2021)

• Interactive Components

  • Understanding Figma’s interactive components feature (2022)

  • Using Figma interactive components to create functional buttons (2021)

  • Controller menu prototyping with Figma’s new Interactive Components (2021)

  • Creating complex interactions with interactive components — Date Picker (2021)

  • Creating complex interactions with interactive components — Lists (2021)

• Variant

  • Content variants in Figma (2022)

  • Figma Variants (5:23) (2021)

  • How to create a variant-powered component in Figma (2021)

  • Building complex Figma variants (2021)

    • 建議有些Variant的使用可改用Component Properties

• Slot Component

  • Slot Components — How to create them in Figma (2022)

  • Figma Slot Components: why and how to use them (2022)

• Shell Component

  • Coining the “Shell” Component (2021)

  • Shell Components (2021)

    • Examples breed ideas

    • Doing solidifies new knowledge

Variables

• Using a single dimension scale for all numbers in your UI designs

  • When to use Styles vs. Variables in Figma

    • Raw primitive values should be created as Variables, such as color value, spacing values, font values, and dimensions.

    • Composite values, on the other hand, should be created as Styles, including gradients, typography, and effects. It’s worth noting that typography itself is not a primitive value; instead, it encompasses values like font size or font width.

• Has Figma gone too far (2023)

  • Figma’s recent introduction of prototyping variables has raised the question of whether the tool has gone too far. Some designers argue that using variables to create more realistic prototypes is a waste of time, while others believe that it is a valuable tool for creating more interactive and engaging experiences.

Design Systems

• Build it in Figma / Build it in Figma: Design Systems (2020)

  • Build it in Figma: Create a Design System — Foundations (55:26) **

    • 6:00 Typography 

      • The type system (Material Design)

      • The typographic scale 

      • More Meaningful Typography 

    • 35:30 Color

    • 44:30 Create color shade with gradient(tips)

  • Build it in Figma: Create a design system — Components (54:47)

  • Build it in Figma: Create a Design System — Components continued (54:37)

  • Build it in Figma: Create a Design System lV — Testing (56:38)

  • Build it in Figma: Create a Design System V: Documentation (1:00:38)

• Creating a design system in Figma: a practical guide : Getting started building your own system. (2021)

  • Why you should build a strong Colour palette before anything else.

  • Give yourself plenty of Typography options to cover both Desktop and Mobile usage.

  • And finally, don’t forget those Elevations and Shadows.

  • Icons. A good Design System needs Icons.

  • Choose your Main Components wisely.

    • Always start with those smaller Components first.

    • Your smaller Components will become part of a much larger Component.

• How to Build a Design System in Figma (2020)

  • Implement atomic design

  • Create nested components

  • Group using variants

  • Create responsiveness using autolayout

  • Name all layers

  • Organize into files and pages

• 9 Figma design system tips 

• Design systems in Figma: how to be more productive

  • Use semantic styles

  • Use design tokens

  • Align component anatomy with code

  • Document your design decisions

  • Use Figma Library Analytics

• A quick guide for setting up a design system: Figma edition  

• The world’s first design systems workbook for Figma : Figmaster.co

• Building a design system as a solo designer in a startup 

• Building a Design System Library 

• How the Avito design system library in Figma works 

• Figma & design thinking: Building a design system for an existing product 

  • Step One: Assess the situation (Discovery)

  • Step Two: Setting Goals (Define)

  • Step Three: Prototype

• How to Integrate your design system into your workflow on Figma 

• Introduction to Product Design Kit for Figma 

• Design systems 101: placeholder components in Figma 

• Figma Shared Libraries : Extend a design system with assets maintained by contributors

• Why designers don’t use your design system : Improve the adoption of your design system through components flexibility

• Tokens

  • Creating design systems with Figma Tokens 

  • How to manage space in Figma using tokens 

  • How we set up the FREE NOW Wave Component Library in Figma : Taking a design library to the next level with Figma & tokens

  • Typography in design tokens for Figma and code

  • Figma tokens automatically turned into code: how we kickstarted our design system 

    • Part 1: Down the rabbit hole 

    • Part 2: Using the Figma API 

    • Part 3: From Figma to our codebase

    • Part 4: Profits! 

• Version Control

  • In Figma, How do we maintain design version control with the least effort? 

  • UI/UX Design: Version Control : Version control in Figma **

Widgets

• What are Figma widgets, and why are they useful? (2023)

  • Interesting widgets to discover

    • Answers & Questions (Q&A)

    • Translate

    • Table

    • Approve

    • lil todo

    • Voice Memo

    • Navigate

• 11 Figma widgets to speed up your workflow (2023)

  • Simple Vote

  • DateStamp

  • lil notes

  • lil todo

  • Jira and Asana

  • Table

  • Button

  • lil chat

  • Voice Memo

  • Contrast Checker

  • Activity Tracker

Plugins

• Figma10個實用外掛介紹

• Figma plugins you need to try (2022)

• 8 Figma plugins every designer should have (2022)

• 5 cool Figma plugins for everyday work (2022)

  • Auto Layout Grid

  • Content Reel

  • Figma Measure

  • FlyOver

  • Unipaste

• 10 Figma Plugins to discover (2022)

• Use this Figma Plugin to 10x your design productivity : Figit (2022)

• Thinking colors: balancing between visual and abstract (2022)

  • Generator is a Figma plugin that helps designers better understand colors and work with them parametrically using a node-based interface.

• Storybook

  • Figma plugin sneak peek : Storybook Connect links your stories to Figma components (2022)

  • Figma plugin beta : Connect stories to design components (2022)

• These Figma Plugins will make your life a lot easier (2021)

  • Plugins that speed up workflow

    • Iconify

    • Convertify Figma to Sketch / XD

    • Autoflow

    • Figma Measure

  • Plugins that help with the aesthetic

    • Noise

    • Isometric

    • Ease Isometric

    • Blobs

    • Get Waves

• 20 awesome Figma plugins to improve your workflow (2021)

• 7 Figma Plugins that Save Your Time (2021)

  • RenameIt

  • Styler

  • Component Cloner

  • Component Replacer

  • Stark

  • Palette

  • Find and Replace

• Best (free) Figma Plugins 2021

• 20 Figma Plugins, Carefully Selected By Experienced Designers (2021)

• Work smarter, not harder in Figma with these 9 plugins for product designers (2021)

• A Figma plugin that automatically generates dark themes (2021)

• UI/UX Design: Flow Diagrams Made Easy with Tiles (2021)

• One Mighty Table Cell : Columns to Rows plugin (2021)

• Creative Coding with Figma: scripter plugin (2021)

  • Creative coding with figma — introduction. 

  • Creative coding with figma — part. 1: iteration. 

  • Creative coding with Figma — part. 2: Mandelbrot.

• Best Figma plugins for 2020 which deserve your attention

  • Coda for Figma

  • LilGrid

  • Table Paste

  • Design System Organizer

  • Movie Posters

  • Dot Grid

  • GiffyCanvas

  • BeatFlyer Lite

  • Color Kit

  • Material Palette

  • Wire Box

  • Vector Maps

  • Webgradients

  • LottieFiles

  • TinyImage Compressor

  • Design Lint

• Figma Plugins | Overview & Favorites (2019)

  • Autoflow

  • Content Reel

  • Maps Achill

  • Unsplash

  • Outro

Templates

• Top 5 free Figma UI kits to use in your projects (2021)

  • Landify

  • Material Baseline Design Kit

  • Webpixels Design System

  • Marvie IOS UI Kit Dark theme

  • iOS 15 UI Kit for Figma 

• A template for Figma wayfinding : How to set up your Figma projects to meet the needs of your whole team (2021)