app • Figma - martindubenet/wed-dev-design GitHub Wiki
- ANIMATE / ANIMATION : Creating an interaction between two graphical elements. The interaction have a complete set of options to choose from.
- ASSETS : A library of reusable elements.
- 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.
- COMPONENT : A reusable element saved in a library of assets.
- COMPONENT SET : Two variation of a single component that differs based on his state.
- FILES : Contains pages and/or frames.
- FRAMES : From main menu arrow, Frame is a designed element of a page or a file (if no pages are used).
- LAYOUT GRIDS : From right sidebar, it gives us greater flexibility in implementing our designs since a pixel grid is precision and un-responsive.
- PAGES : Contains frames within a file. These are optional but useful in complexe mockups.
- 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.
- PROTOTYPE : An interactive presentation of a selected frame or component. These can be shared via an URL.
- TEAMS : Teams is a set of users grouped by access rights.
- VARIABLES : Like JavaScript variables but managed via a GUI instead of a Terminal. Read this overview of variables, collections, and modes.
Keys reference are all (en-US)
| Description | Windows keys | MacOS keys | Menu |
|---|---|---|---|
| 🏠 Go to Figma Dashbaord or 1st tab if in browser |
Ctrl+1 | ⌘Command+1 | |
| Show Quick actions dialog | Ctrl+/ | ⌘Command+/ |
Main menu➥Quick actions …
|
| Toggle app Ui menus | Ctrl+\ | ⌘Command+\ |
Main menu➥View➥Show/Hide UI
|
| Switch to Dev Mode | ꜛSHIFT+D | ꜛSHIFT+D |
Main menu➥View➥Open Dev Mode
|
| Toggle vector view | Ctrl+ꜛSHIFT+O | ⌘Command+ꜛSHIFT+O |
Main menu➥View➥Outlines➥Show outlines
|
| Zoom reset (100%) | Ctrl+0 | ⌘Command+0 |
Main menu➥View➥Zoom to 100%
|
| Zoom out to view all frames | ꜛSHIFT+1 | ꜛSHIFT+1 |
Main menu➥View➥Zoom to fit
|
| Zoom in to the active element | ꜛSHIFT+2 | ꜛSHIFT+2 |
Main menu➥View➥Zoom to selection
|
| Make a component from selection ◆ | Ctrl+Alt+K | - |
Main menu➥Object➥Create component
|
| ⇑ Bring selection to Front | ] | - |
Main menu➥Object➥Bring to front
|
| ↑ Bring selection Forward | Ctrl+] | - |
Main menu➥Object➥Bring forward
|
| ↓ Send selection Backward | Ctrl+[ | - |
Main menu➥Object➥Send backward
|
| ⇓ Send selection to Back | [ | - |
Main menu➥Object➥Send to back
|
| Show/Hide selection 👁 | Ctrl+ꜛSHIFT+H | - |
Main menu➥Object➥Show/Hide selection
|
| Lock/Unlock selection 🔒/🔓 | Ctrl+ꜛSHIFT+L | - |
Main menu➥Object➥Lock/Unlock selection
|
| Create/Add Auto-Layout | ꜛSHIFT+A | - |
- 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
- 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 [-/_]
Combine multiple shapes as one object (youtube)
- Select the shapes,
- If you want to merge them by grouping them as idividual items, choose from :
- Group selection (Ctrl/⌘+G)
- Flatten selection (Ctrl/⌘+E)
-
Boolean groups from the center top-bar of the window choose between
- Union selection
- Substract selection
- Interact selection
- Exclude selection
- Select an object,
- From the top-left menu, under the arrow icon, select Scale (K)
- Find the Scape options in the right aside bar.