Please enable JavaScript.

Coggle requires JavaScript to display documents.

Figma Plugins Education (Form (Video (Pros (Show personality, make fun and…

- - - - Ideas
        
        Track and answer StackOverflow questions
        
        Be active on GitHub/GitLab
        
        Start social media groups
        
        Be active and help others
        
        Post valuables on Twitter, Dribbble, Behance
      - Telegram Chat
      - VK group
  - - - Bonus: do something creative
    - - API overview
      - Creating example projects
      - Deep dive into specific cases
      - Basics of plugin creation
  - - - No-code tool
      - Connect Figma to your API
      - Actions recording
    - - Write code, see results
      - Similar to Swift playgrounds
    - - Show all current commands & objects
      - Step-by-step execution
      - Console
      - Plugin to inspect
    - - Simple open-source plugins
      - Code snippets
    - - Interactive explanations (select node)
      - Translate to Russian
      - Create detailed explanations about specific cases
      - Create interactive examples
- - - - Copy-paste code
      - Easier to create
      - Update at any time
      - More universally accessible
      - Good searchability
  - - - Show personality, make fun and engaging
      - Deep connection with audience
      - Easy to watch and focus
      - Explain difficult concepts with motion
  - - - Extend this plugin to do X
      - Do an exercise –> Teacher checks
      - Find an error and fix it
      - Finish this code
      - Show video and code editor inside Figma
      - Sort/pick lines to create a program
    - - Text
        
        Headlines, descriptions, intros
        
        Tips
        
        After-video additions, clarifications
      - Video
        
        Explain and show
        
        Personality, connect deeply
      - Graphics
        
        Schemes and charts
        
        Decorations, information architecture
        
        Organization and identification
      - Code
        
        Show examples
        
        Copy & paste
  - - - Explain difficult concepts visually
      - Time-consuming creation
- - - - English language will be good
      - Basics of coding — nothing serious
    - - Change the way objects in Figma or Figma UI work or look, add new features — they can only automate user actions
    - - Everything a user can do
      - Everything a website can do
- - - - DB on Glitch to store
      - “Secret” keyword to access/share
      - Pre-made templates
        
        Ads sizes
        
        Social networks
        
        Print formats
      - Select default color
      - Add export options
      - Grid templates
      - Different units and resolutions
      - Export via slices
    - - Move top object above selected
      - Place object in a group below
      - Remove object from a group
    - - UI with constraints and keys
      - WASD or arrows
      - Shift to combine
  - - - Find & replace properties with style
      - Batch Styles rename
      - Generate styles from objects
      - Batch styles/attributes edit (replace font)
      - Find how many times a style is used and where
      - Find all objects with same properties without style
      - Styles organizer
      - Find and apply style using only keyboard
    - - Show hierarchy issues
      - Suggest to create components based on hierarchy
      - Check spacing between components
      - Show all colors and other styles, allowing to edit them
      - Show not styled objects with properties similar to styles
      - Remove multiple groups without extra layers
- - - - Repeat or just shuffle
      - Number of frames
    - - All frames duration
      - Individual frame duration
- - - - Grid
        
        With row offset
        
        Warped mesh
      - Vector network
      - Blend properties in 2D
    - - Text properties
      - Color, stroke and other appearance
      - Position and rotation
      - Randomization
      - Gradient-like control
      - Scale
        
        With/without constraints
        
        With/without stroke & font scaling
- - - - Take a photo -> Share -> Figma
      - Chose object -> Open plugin -> Insert
      - Edit currently selected image
    - - Copy image URL -> Paste -> Insert
- - - - Download from the official site
      - Drag plugin folder into it
      - Visual Studio Code, not Visual Studio
    - - Download and install Node (LTS)
      - Install TypeScript
        
        npm install -g typescript
        
        Command and more downloads here
      - tsconfig.json
        
        "esModuleInterop": true
        
        "target": "es5"
      - TypeScript compilation
        
        tsc: watch - tsconfig.json
        
        Open plugin folder in VSCode
  - - - Mixin model
        
        Interfaces/Protocols
        
        Add properties to objects
        
        Shows if object has certain behaviors
      - Types
        
        Working with types
        
        Specifying types
        
        Implicit/explicit types
        
        Checking types
        
        What?
        
        Static typing means that object cannot change type
        
        Types show what properties objects have
        
        Compiler throws an error if wrong type is used
        
        JS doesn't care about types
      - Valid JS is valid TS
      - TS has to be compiled to JS
    - - Share a list
      - Solve your own problem
      - Ask the community
    - - Interaction types
        
        Menu commands
        
        Don't make Start & Stop different menu commands
        
        Run last plugin activates last menu command
        
        User interface
        
        Keep in mind that it can be closed at any time
      - Time
        
        No UI, menu command only
        
        Menu command opens UI
      - Purpose
        
        One plugin should do one task or related
        
        Different tasks — different plugins
      - Consistency
        
        Use Figma UI patterns
        
        Inconsistent UI opening (conditional?)
    - - Automate task
      - Integrate with the internal/web API (read/write)
      - Process Figma data
      - Plugins are made to extend Figma's existing functionality
    - - Use CMD + F to quickly jump between sections
      - Old docs
  - - - Similar to a webpage
        
        Lifecycle
        
        Open
        
        From the menu/right click
        
        Search by Cmd + /
        
        Run last plugin
        
        Do work
        
        Modify Figma file
        
        Interact with user using UI
        
        Close
        
        By user
        
        Automatically
        
        When another plugin is opened
        
        No background tasks
        
        You can interact with Figma while plugin is open
        
        Plugin actions get priority
        
        Opening the plugin makes it start over
        
        Other users don't interact with your plugins
        
        Loads only after opened
      - Code is interacting with Figma
        
        Limitations
        
        No prototypes data & interactions
        
        Limited set of browser APIs
        
        Sandboxed environment =>
        
        Full Figma API
        
        Can only interact with nodes on the canvas
        
        Can do everything a user could do
        
        Everything in the right panel Design + more
      - Limitations
        
        Cannot work all the time
        
        Cannot define custom behaviors
        
        Only one plugin can be run at the same time
        
        You cannot detect when a user quits plugin
        
        Can be closed at any time
        
        Press Esc or cross, or bottom notification to quit
    - - UI <– –> Figma context
        
        Two parts: HTML in an iframe & code.js
        
        Messages to UI from Code:
        figma.ui.postMessage({ type: 'networkRequest' })
        
        Receiving messages in UI: window.onmessage = window.onmessage = async (event) => { event.data.pluginMessage.type === 'command' }
        
        Sending messages to Code: window.parent.postMessage({pluginMessage: request.response}, '*')
        
        Receiving messages from UI: figma.ui.onmessage = async (msg) => { msg.data }
        
        Backend & Frontend analogy
        
        Code interacts with Figma, user interacts with UI
        
        Can send: objects, arrays, numbers, strings, booleans, null, undefined, Date objects and Uint8Array
        
        Read the UI communication docs
      - Properties
        
        Most browser APIs are available
        
        Can open other webpages in iframe elements
        
        Create and open in the browser to test
        
        Style with CSS, add scripts with JS
        
        Plugin can have no UI
        
        Press the cross button or Esc to quit
        
        UI is a real webpage (iframe)
        
        Referred to as UI, <iframe>, plugin iframe
      - Process
        
        Add the file to manifest
        
        "ui": "ui.html"
        
        Path to UI
        
        Read the Manifest docs, ui section
        
        Create HTML file
        
        Inline/internal scripts and styles
        
        Provide template
        
        Open in browser to test
        
        No body, just inner contents
        
        Show HTML file
        
        figma.showUI(__html__)
        
        figma.showUI(__html__, { width: 350, height: 250 })
        
        figma.ui.resize(width, height)
        
        Show UI
        
        figma.showUI('text')
        
        Read the UI docs
      - Tip: add target="_blank" to links to open them in browser
    - - Getting current user info
        
        figma.root
        
        Get current document
        
        Has type, children, id, name
        
        Children — pages
        
        figma.currentPage
        
        Currently open page
        
        Change page
        
        figma.currentPage.selection
        
        Currently selected nodes
        
        No specific order (random)
        
        Note: selection is a property of a page
        
        Read the General figma object docs
      - Creating nodes
        
        Create Rectangle, Ellipse, Triangle
        
        Vector from SVG
        
        Frame
        
        Group
        
        Special: cannot exist without nodes
        
        Can only be created by grouping nodes
        
        Component and instance
        
        Read the creating nodes docs
        
        Wrong: “If you know how to create objects” — new keyword
      - Finding nodes
        
        frame.findAll(n => n.id === '15:1')
        
        figma.getNodeById('15:1')
        
        Shorthand loop for all children
        
        Find specific objects
        
        Analyze
        
        Color matches
        
        Name partially matches
        
        Modify
        
        Replace one color
        
        Find & Replace text
        
        frame.findAll()
        
        Transform all layer names
        
        Change all children with findAll()
        
        Looping over children
        
        Looping over all children
        
        Read the figma.getNodeById('id') docs
        
        Read the Children docs
      - Manipulating nodes
        
        Circle
        
        Change color
        
        Move
        
        Relative to center
        
        Change name
        
        Rectangle
        
        Change size
        
        Method, not property
        
        Because you may want to apply constraints
        
        Try changing readonly values, get error
        
        Put into Frame
        
        Method 1
        
        Append as child
        
        Create frame
        
        Method 2
        
        Group
        
        Turn group into frame
        
        Rotate
        
        Flatten
        
        Boolean operation + Flatten
        
        Flatten some nodes
        
        Multiple nodes
        
        Change color randomly
        
        Place one after another
        
        Put in frame with padding
        
        Create multiple copies with different parameters
        
        Increase sizes by specific amount
      - figma object
        
        Global constant object
        
        Properties
        
        Styles
        
        createPaintStyle
        
        createTextStyle
        
        createGridStyle
        
        createEffectStyle
        
        getStyleById
        
        User
        
        currentPage
        
        viewport
        
        clientStorage
        
        root
        
        Interface
        
        showUI
        
        ui
        
        command
        
        Utility
        
        mixed
        
        Create objects
        
        createPage
        
        createSlice
        
        createFrame
        
        createComponent
        
        createBooleanOperation
        
        createVector
        
        createStar
        
        createLine
        
        createEllipse
        
        createPolygon
        
        createText
        
        group
        
        flatten
        
        createImage
        
        createNodeFromSvg
        
        createRectangle
        
        Read the creating nodes docs
        
        Fonts
        
        loadFontAsync
        
        listAvailableFontsAsync
        
        getNodeById
        
        Team library
        
        importComponentByKeyAsync
        
        importStyleByKeyAsync
        
        closePlugin
        
        Explore with console
        
        Read the General figma object docs
        
        Entire API is accessible from it
      - Analyzing nodes
        
        Position
        
        Order on canvas different than layers
        
        Coordinate is upper left corner
        
        Get center of node (position relative to center)
        
        Read LayoutMixin docs
        
        Name
        
        Contains specific symbols
        
        Equals to something
        
        Color
        
        Check if black?
        
        RGBA
        
        0-1 values (intensity)
        
        Read GeometryMixin docs
        
        Size
        
        Rotation
        
        Type
        
        Most important
        
        Make sure if object has certain properties
    - - JSON format
      - Properties
        
        name [required]
        
        api [required]
        
        main [required]
        
        ui [optional]
        
        menu [optional]
        
        build [experimental]
        
        id [optional]
      - Manifest tells Figma where to get files to execute the plugin
    - - Manifest
        
        Array of menu items
        
        name, command — runs command
        
        name, menu — creates submenu
        
        separator: true — creates separator
        
        Can have infinite submenus
        
        menu property
        
        Read the Manifest docs
      - Code
        
        figma.command === 'command'
        
        Switch to check current command
        
        Read the General docs, figma.command section
  - - - Limitations
        
        No way to get info about current user
        
        No way to get current file link
      - Request
        
        Within UI
        
        Fetch
        
        XMLHttpRequest
        
        Send result to main script via postMessage
        
        Trigger by code
      - No UI? No problem!
        
        Making network request without UI
      - Use-cases
        
        Load an external image
        
        Access any web API
        
        Send info to server
      - Read network requests docs
    - - Read the Images docs
      - Read the ImagePaint docs
  - - - Functions
        
        Reusable block of code
      - Control flow
        
        Changes action based on condition
      - Objects
        
        Similar to Components
      - Loops
        
        Repeats action multiple times
      - Variables, arrays
      - Code execution
        
        Strict order unlike natural languages
      - Async processes
        
        Good to know
    - - Create and explore Glitch.com
      - Find JS basic courses?
      - Intro to TypeScript for those who know JS
      - Plugins
        
        Read Figma Plugins docs
        
        Watch the course
        
        Check out open source plugins and read the code
        
        Install and play with plugins (no need to refresh)
      - English
        
        Learn it
        
        I use heavily
        
        Google in English
        
        All docs are in English
      - Programming mindset
        
        Copy & Paste others' code a lot
        
        Think like a computer
        
        Learn to Google
    - - Programming myths
        
        You don't need maths
        
        You don't need to master it to make simple tools
        
        You will learn to think logically
      - Simple demo
        
        Examples
        
        Find/replace text
        
        Low contrast checker
        
        Insert stock photography
        
        Import/export translation data
        
        Plugin in 5 minutes
        
        Idea?
        
        Do something useful
        
        Do something to demonstrate how easy plugins are
        
        Show
        
        Manifest
        
        What is it for?
        
        What do these lines mean?
        
        code.js
        
        figma — main object that enables interaction with Figma
        
        Get selection
      - Can you create a webpage? (no frameworks)
      - Your knowledge
        
        Know other programming language? Cool as well
        
        Typescript — perfect
        
        JS + HTML — what we need
        
        Programming basics
        
        Google well
        
        English is important
    - - Use the editor of your choice (Sublime, Notepad)
      - But better use VSCode and TypeScript
      - Opening the console
      - Download Figma desktop app
    - - Plugins -> Development -> New Plugin...
      - Choose directory
      - Running the plugin
      - Play with the console
      - Tip: Right click empty space on canvas to run
      - Read the PluginAPI docs
    - - Automate tedious tasks, even small
      - Express yourself creatively
      - Help others; consequently earn money
      - Warning: may be too liberating
- - - - Text?
        
        Load font
        
        Change font
        
        Change text
    - - Viewport
        
        After plugin finished working
        
        Be careful with UX
        
        API
        
        figma.viewport.center = { x: 0, y: 0 }
        
        figma.viewport.zoom = 1 (100%)
        
        figma.viewport.scrollAndZoomIntoView(nodes)
        
        Center selection in viewport
        
        Read the Viewport docs
  - - - Executing commands from the console
- - - - Maintenance
        
        Update the plugin
        
        Others shouldn't submit it
        
        Accept contributions
        
        Review code, test code
      - Show if project welcomes contributions