[  Figma 101  ][  Figma components with props  ][  Figma for React code  ]

Paid princing plans VS Free features

Basic	Professional	Organization	Enterprise
$$$ Free! 3 pages only	Unlimited pages, Components, Dev mode, Basic admin.	Unlimited pages, Components, Dev mode with Code Connect, Centralized admin.	Unlimited pages, Components, Synchonized dev mode with Code Connect, Advanced centralized admin.

Detailed Figma pricing

1. ANIMATE / ANIMATION : Creating an interaction between two graphical elements. The interaction have a complete set of options to choose from.
2. ASSETS : A library of reusable elements.
3. CODE CONNECT : An npm package maintain by Figma.com to sync your React coded components, including all there parameters, within Figma so both designers and developers work using the same props.
4. ❖ COMPONENT : A reusable element saved in a library of assets.
5. COMPONENT SET : Two variation of a single component that differs based on his state.
6. DESIGN FIILES : Contains pages and/or frames.
7. FIGJAM BOARD : Ideation environment where fast drawing is required for brainstorming and/or presentations.
8. FRAMES : From main menu arrow, Frame is a designed element of a page or a file (if no pages are used).
9. LAYOUT GRIDS : From right sidebar, it gives us greater flexibility in implementing our designs since a pixel grid is precision and un-responsive.
10. PAGES : Contains frames within a file. These are optional but useful in complexe mockups.
11. PRESENTATION : When clicking the «Play» icon (located in the upper-right corner) opens a new tab to display the mockups in a «preview mode» where dimension are adjusted to viewport dimensions and animated events are clickable.
12. PROTOTYPE : An interactive presentation of a selected frame or component. These can be shared via an URL.
13. TEAMS : Teams is a set of users grouped by access rights.
14. TOKENS : Same as props in Ract.js, it is a method for managing design properties and values across a design system.

    Tokens contains Variables but not the other way around.

15. VARIABLES : Like JavaScript variables but managed via a GUI instead of a Terminal. Read this overview of variables, collections, and modes.

Figma
➥ FigJam board
➥ Design file
.. ➥ Page
.... ➥ Layout Grid
.... ➥ Frame
.... ➥ Section
...... ➥ Component
........ ➥ Component set
...... ➥ Frame
.. ➥ Token
.... ➥ Variables
➥ Presentation

1. Left sidebar is about navigating the file, page and its layers.
2. Bottom toolbar from where you toggle between Dev Mode or Design.
3. Right sidebar is, depending of your active mode in the bottom toolbar, about either Inspection when in Dev Mode or Design if not.

1. From DOM to Component to Props

   

   1. Figma file,
   2. Page nomenclature according to a Sitemap convention,
   3. Frame name is also matching a Sitemap convention,
   4. Component location in the DOM,
   5. Component details from the Design view,
   6. List of available Props for this component from which you can edit the displayed text.

2. From the Typography text string to Property value

   

   1. Click on the text string from the Artwork,
   2. From the Design view, Mouse Hover the bottom field of the Typography block,
   3. Click on the tiny target icon button to « Go to property » to edit this text string.
   4. Scroll up to Component’s details at the top of the Design view. From there you can edit the text strings set as Component's Props.

Keys reference are all (en-US)

• Tokens Studio for Figma (Figma Tokens) : Generate Tokens with the UI or with your own JSON. Create or update Type, Color or Shadow Styles based on tokens. Reference tokens in each other to create type scales, container paddings or semantic colors.

• Anima, by AnimaApp.com, is a paid solution to export from Figma to HTML for React or Vue code.
• bulder.io
  • Figma to React: Convert designs to clean React code in a click

• Batch Styler : Change multiple text and color styles at once.
• GitHub : Links files from GitHub Enterprise Server (required), issues, and pull requests to Figma component and designs.
• MUI (Material Design Component Figma Library For React) ($ free)
• MUI Connect : Exports complete Material UI themes directly from the Material UI Design Kit to code.
• Font Awesome Official Icon Component, by Font Awesome ($ free) : An official FontAwesome 5 + 6 icon component that uses OTF files and ligatures to make adding icons (and swapping styles) simple and easy.
• Material Symbols, by Google Fonts ($ free).
• Material Design Icons, by icons8.
• Material Theme Builder, by Material Design ($ free) : Built to assist in exploring the possibilities of dynamic color, harmonizing brand colors, and providing a type scale
  • Material Theme Switcher, by ThingOS, helps you to switch seamlessly between Light and Dark mode themes of your design library.
• Streamline Icons, Illustrations, Elements, Emoji, by Streamline.
• Table or Table Creator, both by Gavin McFarland ($ free) : Helps with creating HTML data-table templates.

• MUI for Figma 79$/year : Large UI kit coded for React with over 600 handcrafted MUI symbols for Figma.
• Android App Icons, by Material Design, easily create all the system assets needed for your Android app, including the new adaptive color icons.
• Material 3 Design Kit, by Material Design, provides a comprehensive introduction to the Material 3 Design system, with styles and components to help you get started.

• Figma for VS Code : Bring Figma into the text editor. Inspect designs, receive notifications, and get code suggestions.

Useful if you have a 4K monitor

• Mac OS desktop app: [⌥Option]+[⌘Command]+ꜛSHIFT] + either [=/+] or [-/_]
• Windows desktop app: [Ctrl]+[Alt]+[ꜛSHIFT] + either [=/+] or [-/_]

• CREATE DESIGNS

IMPORTANT: You can NOT use any characters when naming a variant!

1. Select the shapes,
2. If you want to merge them by grouping them as idividual items, choose from :
   1. Group selection (Ctrl/⌘+G)
   2. Flatten selection (Ctrl/⌘+E)
   3. Boolean groups from the center top-bar of the window choose between
      • Union selection
      • Substract selection
      • Interact selection
      • Exclude selection

1. Select an object,
2. From the top-left menu, under the arrow icon, select Scale (K)
3. Find the Scape options in the right aside bar.

1. Material UI (MUI) for Figma 5.16 — Getting Started
2. DesignCourse
   1. The UI/UX of Designing Effective Search Bars
3. From Figma to Tailwind CSS

1. Auto layout: Learn to create flexible designs and components (playlist)
2. Building blocks (playlist)
   1. Crafting components
   2. Polishing your components to publishing a v1
   3. Diving into documentation
   4. Architecture, branching and contributions
   5. Evolving design system assets
   6. Asking questions
3. My First Variable (playlist)
   1. The basics
   2. The 3 levels of variables
   3. Creating my first variable
   4. Creating decorative (styling) variables
   5. Aliasing variables
   6. Naming primitives
   7. Publishing variables
   8. Using branches to manage changes
   9. Typography variables
4. Build your first plugin (playlist)
   1. Introduction to plugins and API
   2. Plugin environment setup
   3. Building your plugin
   4. Publishing (your plugin) to the community

• Level=1st Level List
• Variant=Filled, Size=Medium, State=Enabled, Has Value=True