Figma

103 bookmarks
Newest
Fluent Accessibility Notation | Figma Community
Fluent Accessibility Notation | Figma Community
This design toolkit provides notations that enable you to create accessible and inclusive experiences. It has support for keyboarding such as tabbing, landmarks and headings as well as screen reader output.
·figma.com·
Fluent Accessibility Notation | Figma Community
EightShapes Specs | Figma Community
EightShapes Specs | Figma Community
Documentation | Submit requests and defects | Slack community Automate production of page and component design specifications (“specs”) of selected components, instances and frames. Plugin output is useful for design-dev handoff, auditing in progress design work, and critiquing with teammates. ...
·figma.com·
EightShapes Specs | Figma Community
Web Accessibility Annotation Kit | Figma Community
Web Accessibility Annotation Kit | Figma Community
Accessibility annotations help capture design intent that cannot be conveyed through visual design alone. This can help prevent many accessibility issues earlier and create more usable digital experiences. After 2 years of testing with over 65 design teams at CVS Health®, we’re releasing our Web...
·figma.com·
Web Accessibility Annotation Kit | Figma Community
Organising Design Systems | Figma Community
Organising Design Systems | Figma Community
A free template on how to document your design system. This template helps you to document the system in a way so that it can act as a single source of truth for everyone (designers, developers, PMs, stakeholders)
·figma.com·
Organising Design Systems | Figma Community
How to organize your Figma files for your design system
How to organize your Figma files for your design system
Organizing your Figma files can be a daunting task, especially as your design system team and wider org grows. We've gathered some of the tips that we've picked up along the way, including ways you can make Figma work better with zeroheight.
·zeroheight.com·
How to organize your Figma files for your design system
A11y Annotation Kit | Figma Community
A11y Annotation Kit | Figma Community
Design and build experiences everyone can use. We use this library at Indeed to help designers document accessibility considerations to share with developers when handing off designs. It's quick and easy to add callouts for elements, indicate focus order, or specify keyboard interactions. We hop...
·figma.com·
A11y Annotation Kit | Figma Community
Design system structure for teams, projects and files | Figma Community
Design system structure for teams, projects and files | Figma Community
The Figma advocate team's recommendations for structuring your design system! Whether you're on the professional, organisation, or enterprise plan, you can get started with Figma libraries and build out your system. Within this file, there is advice on: The structural differences between each ...
·figma.com·
Design system structure for teams, projects and files | Figma Community
Pixel Icon Library | 120+ Pixelated Icons By HackerNoon – Figma
Pixel Icon Library | 120+ Pixelated Icons By HackerNoon – Figma
Figma Community file - Introducing HackerNoon’s Pixel Icon Library, an open-source collection of 120+ Pixelated Icons. Meticulously designed on a 24px grid, ensuring perfect alignment and consistency to enrich your web/app/product/page/life experience. Inspired by HackerNoon’s retro design vibe, these icons capture the...
·figma.com·
Pixel Icon Library | 120+ Pixelated Icons By HackerNoon – Figma
Axe for Designers (FREE)
Axe for Designers (FREE)
Figma Community plugin - As a designer, you’re all about creating inclusive digital experiences but you may not be an accessibility expert. You need an easy, intuitive approach to include it into your Figma designs and effectively communicate your intent to your developers. Craft more inclusive & accessible designs and ...
·figma.com·
Axe for Designers (FREE)
Resources for Getting Started with Advanced Prototyping
Resources for Getting Started with Advanced Prototyping
Figma Community file - Want to get started with Advanced Prototyping in Figma but don't know how? I mapped out resources to help you learn. Here you will find youtube tutorials, links to playground and community files, and best practice articles. This file will be continuously updated as we publish more resources!
·figma.com·
Resources for Getting Started with Advanced Prototyping
variables2css | Figma Community
variables2css | Figma Community
Figma Community plugin - Simplify your workflow – Effortlessly convert Figma design variables, including colors and numbers, into CSS variables to save time and ensure accuracy. Enhance your design process and increase productivity. How to use it: Select your collectionChoose between converting to PX or RemInclude all t...
·figma.com·
variables2css | Figma Community
Realtime Colors
Realtime Colors
Visualize your color palettes on a real website.
·realtimecolors.com·
Realtime Colors
Recreating Figma's Multi-Actions Prototype
Recreating Figma's Multi-Actions Prototype
Learn to build multi-action prototypes as we recreate Figma's example in their Config 2023 documentation. Explore the full range of courses at https://www.uicollective.co/ Download this design file: https://www.uicollective.co/course/recreating-figmas-multi-actions-prototype Download the token styles template shown: https://www.uicollective.co/course/getting-started-with-ui-collective 0:00 An Introduction 0:50 Prepping the Prototype 2:52 Building the Prototype
·youtube.com·
Recreating Figma's Multi-Actions Prototype
Figma tutorial: Intro to variables
Figma tutorial: Intro to variables
Figma is free to use. Sign up here: https://bit.ly/3msp0OV By definition, a variable is something that can vary in value or take on multiple values. Variables in Figma store reusable values, like color values and numbers, that can be applied to all kinds of design properties and even prototypes! A variable’s values can also reference other variables, making updating design systems a breeze. In this video, we’ll cover how variables work, and how to use them to represent design tokens and account for different modes and themes. * Update: When following along with the tutorial at 10:30, the variable called ".5" will no longer work. This is due to our alignment with the W3C spec which doesn't allow periods in names. Calling the variable "spacing/half" will work, instead. We are doing a follow-up in the next coming months where we’ll be separating out the “figma name” from the code syntax, which may let us loosen these restrictions. Keep an eye out for additional syntax support in the future. Follow along with the file: https://bit.ly/44bHgC2 Learn about prototyping with variables with our other tutorial: https://bit.ly/3pfKk1h Learn more about variables in Figma with our additional playground file: https://bit.ly/4490iJc Learn more about design systems in Figma: https://bit.ly/3os0Afc Help center articles: Guide to variables: https://bit.ly/3Nh7JaK Overview of variables: https://bit.ly/44bD2dG Create and manage variables: https://bit.ly/447B9im Apply variables to designs: https://bit.ly/3qVsnWo Modes for variables: https://bit.ly/3qS3GKk For more information on using variables with API and development, check out the links here: - REST API: https://www.figma.com/developers/api#variables - Plugin API docs: https://www.figma.com/plugin-docs/working-with-variables - Import/export variables code sample https://github.com/figma/plugin-samples/tree/master/variables-import-export - Styles to variables convert code sample https://github.com/figma/plugin-samples/tree/master/styles-to-variables Chapters: 00:00 - Intro 01:17 - Color variables 03:55 - Create tokens 06:00 - Apply variables 07:13 - Styles vs variables 08:17 - Modes 10:12 - Number variables 12:35 - Themes 14:11 - Wrap up ____________________________________________________ Find us on ⬇️ Twitter: https://twitter.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________ #Figma #Config #Config2023 #Variables #Designtokens #Tutorial #design #tips #DesignSystems
·youtube.com·
Figma tutorial: Intro to variables
An Introduction to Boolean Variables in Figma
An Introduction to Boolean Variables in Figma
Learn the basics of boolean variables, and how to use booleans to create an interactive prototype. Explore our full range of free courses at https://www.uicollective.co/ Build an Alert: https://www.youtube.com/watch?v=lrdkr469Qbs 0:00 An Introduction 0:32 Using Boolean Variables
·youtube.com·
An Introduction to Boolean Variables in Figma
An Introduction to Figma Variables, Conditional Logic, and Prototyping
An Introduction to Figma Variables, Conditional Logic, and Prototyping
In this introductory video, we'll explore Figma's variables, conditional logic, and prototyping features. Download our free variable styles template: https://www.uicollective.co/course/getting-started-with-ui-collective In this introductory guide, we explore how variables and conditional logic can streamline your design process to create intuitive prototypes. Explore our full range of free video lessons at https://www.uicollective.co/ 0:00 An Introduction 0:44 Build the Wireframe 7:46 Redesigned Prototyping 9:08 Adding Variables 15:34 Adding Conditional Logic
·youtube.com·
An Introduction to Figma Variables, Conditional Logic, and Prototyping
Component properties
Component properties
In this Figma tip, we go over what component properties are and how to create them. Figma is free to use. Sign up here: https://bit.ly/3msp0OV ____________________________________________________ Find us on ⬇️ Twitter: https://twitter.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________ #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems
·youtube.com·
Component properties
Advanced Figma Components Tips & Tricks
Advanced Figma Components Tips & Tricks
Full course and working files: https://www.moonlearning.io/Figma-components Try Figma for free to follow along: https://bit.ly/moonlearningfreefigma Get Figma Professional: https://bit.ly/moonlearningprofessionalfigma Access all my premium UX/UI and Figma online courses from only 18€ a month: https://www.moonlearning.io learn more about syncing data in Figma: YouTube tutorial and free Figma file: https://www.youtube.com/watch?v=3nXbUH9YYgo Smashing Meets talk and free Figma file: https://www.youtube.com/watch?v=Njf_xX0mPWs Advanced Figma components and tricks: 00:00 - Introduction to moonlearning.io 00:23 - Quickly Select Matching Layers across Variants 01:01 - Using Overlay Comparison in Instances to Review Shared Library updates 01:23 - Use Nudge for Consistent Spacing and Padding in Components 02:05 - Overlay comparison on instances for library updates 02:45 - Link Figma Components to a Code Base Effortlessly 03:19 - EightShapes Specs Plugin: Faster Documentation for Your Designs 03:49 - Moving Figma Components Between Files While Maintaining Instance Connections 04:48 - Swap Figma Libraries to Create a Testing Environment 05:15 - Apply Styles and Auto Layout Settings to Your Main Component, Never Your Instance! 05:42 - Use Real Data in Your Figma Instances: Google Sync vs. Kernel 06:41 - Use Props and 'Preferred Values' When Creating Slot Components 07:31 - Easy Organizing and Naming with Sections 08:49 - Know when to Use Properties and When to Make Changes to the Main Component 09:43 - Creating Figma Components from Existing Pages via URLs in Seconds with the html.to.design Plugin 10:26 - Stay in touch! www.moonlearning.io
·youtube.com·
Advanced Figma Components Tips & Tricks
New Figma Components 101: Variants and Component Properties (Boolean, Instance Swap, and Text)
New Figma Components 101: Variants and Component Properties (Boolean, Instance Swap, and Text)
Today I'll walk you through the two two levels of Figma Components: 1) Variants 2) Component Properties (Boolean, Instance Swap, and Text) Try Figma: https://bit.ly/figma-cip While variants have been around for a while, component properties are new to Figma! --------------------------------------- 📹 Related Videos 📹 - Figma for Web Developers: https://www.youtube.com/watch?v=2liZ3uvO9bs - Figma Card Components: https://youtu.be/K9BXnBv7zU8 --------------------------------------- ⏲️ Timestamps ⏲️ 0:00 Introduction 0:50 Variants (Components Version 1) 11:35 Component Properties (Components Version 2) 12:12 Text Properties 15:16 Boolean Property 19:34 Instance Swap Property --------------------------------------- 🌐 Connect With Me 🌐 - Website: https://codinginpublic.dev - Blog: https://chrispennington.blog - Twitter: https://twitter.com/cpenned - Patreon: https://www.patreon.com/coding_in_public
·youtube.com·
New Figma Components 101: Variants and Component Properties (Boolean, Instance Swap, and Text)
How to Swap Icons in Figma
How to Swap Icons in Figma
The new-ish Instance swap component property in Figma is a great tool for making your components more succinct and useful. Here’s a quick overview.Try Figma:...
·youtube.com·
How to Swap Icons in Figma
LottieFiles for Figma - Bring motion to Figma
LottieFiles for Figma - Bring motion to Figma
Easily integrate Lottie animations into your Figma designs with LottieFiles for Figma. Access the world’s largest library of Lottie animations, create realistic prototypes and production-ready animations right within Figma.
·lottiefiles.com·
LottieFiles for Figma - Bring motion to Figma
Handoff Helpers | Figma Community
Handoff Helpers | Figma Community
Figma Community file - A free component library to help you effectively communicate your designs This file was created to help product designers become better communicators When it comes to building great products, communication almost always trumps pixel perfection. And now that product design is becoming an inc...
·figma.com·
Handoff Helpers | Figma Community