ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Introduction to Figma

?
?
Edoardo Sportelli
Edoardo Sportelli

Figma is an online interface design and prototyping tool that allows for real-time collaboration. It offers features like components, styles, prototyping, and feedback in the browser and desktop app. Components are more flexible than Sketch symbols as their properties can be modified without detaching from the master. Users can edit the master component in context and find components as thumbnails. Figma is free for basic use while Sketch requires paid subscriptions.

1 of 37
Downloaded 352 times
Figma
Figma is the first interface design and prototyping tool based in the browser. Figma - What is it Sketch Off-line tool - Desktop App
It works in web browsers, but there is also a desktop app that let you work off- line. Figma - Desktop App Figma don¡¯t offer a full off-line experience. Any files you currently have open in the desktop app?can?be edited while you're offline. When you're back online the changes you made should sync. However, you?won't?be able to import any files if you are not currently online.?
Everything in one place? ? Design ? Prototyping ? Handoff ? Feedback ? Versioning Figma - Features
Sketch? ? Design ? Prototyping - InVision, Marvel etc ? Handoff - Plugin (Zeplin) ? Feedback - Plugin (Sketch Focus) ? Versioning - Abstract Figma - Figma VS Sketch
Real-time collaboration between the members of the team. They can work on the same file, share ideas instantly, test and make updates on the fly. Figma - Real-Time Collaboration Sketch You need other platforms, e.g. Abstract, to share files.
Introduction to Figma
Figma includes everyone in the process by sharing a single, live URL that works on any platform. It works on Windows, Mac and Linux. Figma - Availability Sketch It is available only for Mac users.
The Starter Plan is free: 3 projects, 2 members, unlimited file storage, unlimited free viewers and 30 days of version history. Figma - Pricing Sketch No free version.
Other features? ? Figma font installer: Figma uses Google fonts, but you can also add your own by installing an add-on. It is an incredibly smart move, since collaborators won¡¯t need to download extra fonts when they jump in. ? Figma is able to import Sketch files extremely accurately: artboards, groups and layers are left intact with their exact names, grouping and properties, including multiple borders, shadows and effects like Blending modes and Background Blur. ? Liveshare: if you click on someone¡¯s avatar, you get to see what they¡¯re seeing on their screen and follow their cursor around. This works just like InVision Liveshare. ? Dropbox Paper: you can embed Figma projects in Dropbox Paper. Figma - Features
The user interface is almost an exact replica of Sketch. This is a good thing for users, it just means that Sketch has set such a powerful standard that both Adobe XD and Figma have no hesitation following. Figma - User Interface
Styles The Styles feature allows you to define a set of properties of an object. Whenever you make a change to a Style's property, like updating the text color from red to blue, any objects using that Style will be instantly updated. You can use Styles to determinate: ? Color ? Text ? Effects ? Layout Grid Figma - Styles
In Figma, you can apply multiple styles to the same text box, simply by highlighting a portion of the text. Figma - Text Styles Sketch You can¡¯t apply multiple styles to the same text box.
Styles can be shared by publishing them to your Team Library. This allows you to easily establish and maintain consistent styles across your team projects. Figma - Team Library Team Library You can share and update collections of components across projects. This feature is not included in the Starter Plan.
Group / Frame / Artboard? ? Group: it is merely a group of things - ?a group is not an object itself, meaning that a group doesn¡¯t affect constraints or has explicit bounds. ? Frame: it is a container - ?it has its own size, it manages constraints and can clip (or mask) its contents. ? Artboard: it is a specific way of working?¡ª?you can simply draw a rectangle and call it an ¡°artboard¡±, or you can make a frame and call that an ¡°artboard¡±. Figma - Frame
Sketch has Symbols and Figma has Components. The difference is that components are more flexible than symbols, which means we can do more with less of them. Every component has a description field. Components
1/4 Perch¨¦ sono pi¨´ flessibili? Le propriet¨¤ di ogni layer in un componente possono essere modificate, senza doverlo rompere. Nasce il significato di istanza e di master component. Figma - Components Sketch Si pu¨° sostituire un simbolo con un altro, ma non si possono modificare le sue caratteristiche (ad es. il colore di bg, lo spessore del bordo etc). Quindi bisogna creare n variazioni di un simbolo o romperlo per poterlo modificare.
Istanza Le propriet¨¤ modificabili di un¡¯istanza ? Testo ? Riempimento ? Bordo ? Effetti Figma - Istanza I vincoli e la dimensione non possono essere modificati.
2/4 Perch¨¦ sono pi¨´ flessibili? Gli elementi della stessa categoria vengono raggrupparti in un frame, il quale viene nominato col nome della categoria stessa. Pi¨´ semplice e immediata la categorizzazione degli elementi e una successiva modifica/riorganizzazione se necessario. Figma - Components Sketch Importante il naming di ogni singolo simbolo, perch¨¦ ti permette di creare categorie di simboli.
3/4 Perch¨¦ sono pi¨´ flessibili? I componenti sono mostrati come una lista di thumbnails e vengono inseriti/sostituiti con un drag & drop. Figma - Components Sketch I simboli si inseriscono da un menu innestato composto da una lista dei nomi dei simboli.
4/4 Perch¨¦ sono pi¨´ flessibili? I master components vengono editati all¡¯interno della vista in cui si ¨¨. Figma - Components Sketch Si viene rimandati a una pagina separata.
1/4 How are components more flexible than symbols?? You can access and modify the properties of any layer in a component without detaching it from the master. Figma introduces the idea of master component and instance. Figma - Components Sketch You can replace a symbol with another one, but you can¡¯t change a property without breaking it or starting from scratch.
Instance You can edit these properties: ? Text ? Fill ? Stroke ? Effects Figma - Istanza Constraints and Size can¡¯t be modified in order to preserve consistency.
2/4 How are components more flexible than symbols?? You don¡¯t have to worry about a naming structure (i.e. Icons/ Search) as you¡¯re creating components. To create a category of components, just group them in a frame and name that frame whatever the category is. That means it¡¯s easy to reorganize things later just by dragging components around. Figma - Components Sketch Importance of the naming structure (i.e. Icons/Search) in order to organize categories of symbols.
3/4 How are components more flexible than symbols?? You can find (and see!) components as a list of thumbnails. To add a component to a screen or to swap an instance, just drag and drop to the canvas. Figma - Components Sketch You have to think about a naming structure to navigate a nested menu of symbol names.
4/4 How are components more flexible than symbols?? You can edit the master component in context of the larger view. Figma - Components Sketch You have to go to a separate page to make edits.
Constraints You can set up the constraints by pinning against the borders, or setting the element to center. It¡¯s essentially like Sketch¡¯s Pin to corner and Resize object but more visual and intuitive. Figma - Constraints
But ¡­ No Stacks in Figma!
Prototyping There is a clickable prototyping feature that¡¯s similar to Craft + InVision. Figma prototypes are living documents: when you make changes to the original design, they¡¯ll be reflected instantly in your prototype. Figma - Prototyping
Prototyping ? Transitions: add common transitional animations as you move between frames. ? Device frames: add a range of containers - from iPhone to Android to Apple Watch - on your designs. ? Fixed objects: you can attach objects like status bars or buttons to the top, bottom or even sides of a frame with constraints. ? Vertical and horizontal scrolling: you can enable scrolling through individual shapes within a parent frame, which can itself be scrollable. Figma - Prototyping
Feedback Anyone with the link can add comments anywhere on the design, similar to how commenting works in InVision. You can tag people in comments, mark comments as resolved, and even integrate with Slack. Figma - Feedback Sketch Only using Sketch Focus or Zeplin.
Coding Engineers can inspect, export, and copy CSS, iOS, and Android code. They can get: ? Colors ? Typography ? Dimensions ? Assets Figma - Coding Sketch You can use Zeplin.
Pro ? ? Google fonts and Figma font installer ? Real-time collaboration ? Instances ? Layout grid styles ? Team libraries ? Description field for every component ? Feedback ? Prototyping
Contro ? ? Instances ? Plugin ? Real data ? Subscription
Grazie
Thanks
Tangible ¨¨ un marchio di GNV & Partners S.R.L. ? Viale Emilia, 3009 ? 47822 Santarcangelo di Romagna RN ? Italy ? P.IVA 03130760246 ? R.E.A. 296354

More Related Content

Introduction to Figma

  • 2. Figma is the first interface design and prototyping tool based in the browser. Figma - What is it Sketch Off-line tool - Desktop App
  • 3. It works in web browsers, but there is also a desktop app that let you work off- line. Figma - Desktop App Figma don¡¯t offer a full off-line experience. Any files you currently have open in the desktop app?can?be edited while you're offline. When you're back online the changes you made should sync. However, you?won't?be able to import any files if you are not currently online.?
  • 4. Everything in one place? ? Design ? Prototyping ? Handoff ? Feedback ? Versioning Figma - Features
  • 5. Sketch? ? Design ? Prototyping - InVision, Marvel etc ? Handoff - Plugin (Zeplin) ? Feedback - Plugin (Sketch Focus) ? Versioning - Abstract Figma - Figma VS Sketch
  • 6. Real-time collaboration between the members of the team. They can work on the same file, share ideas instantly, test and make updates on the fly. Figma - Real-Time Collaboration Sketch You need other platforms, e.g. Abstract, to share files.
  • 8. Figma includes everyone in the process by sharing a single, live URL that works on any platform. It works on Windows, Mac and Linux. Figma - Availability Sketch It is available only for Mac users.
  • 9. The Starter Plan is free: 3 projects, 2 members, unlimited file storage, unlimited free viewers and 30 days of version history. Figma - Pricing Sketch No free version.
  • 10. Other features? ? Figma font installer: Figma uses Google fonts, but you can also add your own by installing an add-on. It is an incredibly smart move, since collaborators won¡¯t need to download extra fonts when they jump in. ? Figma is able to import Sketch files extremely accurately: artboards, groups and layers are left intact with their exact names, grouping and properties, including multiple borders, shadows and effects like Blending modes and Background Blur. ? Liveshare: if you click on someone¡¯s avatar, you get to see what they¡¯re seeing on their screen and follow their cursor around. This works just like InVision Liveshare. ? Dropbox Paper: you can embed Figma projects in Dropbox Paper. Figma - Features
  • 11. The user interface is almost an exact replica of Sketch. This is a good thing for users, it just means that Sketch has set such a powerful standard that both Adobe XD and Figma have no hesitation following. Figma - User Interface
  • 12. Styles The Styles feature allows you to define a set of properties of an object. Whenever you make a change to a Style's property, like updating the text color from red to blue, any objects using that Style will be instantly updated. You can use Styles to determinate: ? Color ? Text ? Effects ? Layout Grid Figma - Styles
  • 13. In Figma, you can apply multiple styles to the same text box, simply by highlighting a portion of the text. Figma - Text Styles Sketch You can¡¯t apply multiple styles to the same text box.
  • 14. Styles can be shared by publishing them to your Team Library. This allows you to easily establish and maintain consistent styles across your team projects. Figma - Team Library Team Library You can share and update collections of components across projects. This feature is not included in the Starter Plan.
  • 15. Group / Frame / Artboard? ? Group: it is merely a group of things - ?a group is not an object itself, meaning that a group doesn¡¯t affect constraints or has explicit bounds. ? Frame: it is a container - ?it has its own size, it manages constraints and can clip (or mask) its contents. ? Artboard: it is a specific way of working?¡ª?you can simply draw a rectangle and call it an ¡°artboard¡±, or you can make a frame and call that an ¡°artboard¡±. Figma - Frame
  • 16. Sketch has Symbols and Figma has Components. The difference is that components are more flexible than symbols, which means we can do more with less of them. Every component has a description field. Components
  • 17. 1/4 Perch¨¦ sono pi¨´ flessibili? Le propriet¨¤ di ogni layer in un componente possono essere modificate, senza doverlo rompere. Nasce il significato di istanza e di master component. Figma - Components Sketch Si pu¨° sostituire un simbolo con un altro, ma non si possono modificare le sue caratteristiche (ad es. il colore di bg, lo spessore del bordo etc). Quindi bisogna creare n variazioni di un simbolo o romperlo per poterlo modificare.
  • 18. Istanza Le propriet¨¤ modificabili di un¡¯istanza ? Testo ? Riempimento ? Bordo ? Effetti Figma - Istanza I vincoli e la dimensione non possono essere modificati.
  • 19. 2/4 Perch¨¦ sono pi¨´ flessibili? Gli elementi della stessa categoria vengono raggrupparti in un frame, il quale viene nominato col nome della categoria stessa. Pi¨´ semplice e immediata la categorizzazione degli elementi e una successiva modifica/riorganizzazione se necessario. Figma - Components Sketch Importante il naming di ogni singolo simbolo, perch¨¦ ti permette di creare categorie di simboli.
  • 20. 3/4 Perch¨¦ sono pi¨´ flessibili? I componenti sono mostrati come una lista di thumbnails e vengono inseriti/sostituiti con un drag & drop. Figma - Components Sketch I simboli si inseriscono da un menu innestato composto da una lista dei nomi dei simboli.
  • 21. 4/4 Perch¨¦ sono pi¨´ flessibili? I master components vengono editati all¡¯interno della vista in cui si ¨¨. Figma - Components Sketch Si viene rimandati a una pagina separata.
  • 22. 1/4 How are components more flexible than symbols?? You can access and modify the properties of any layer in a component without detaching it from the master. Figma introduces the idea of master component and instance. Figma - Components Sketch You can replace a symbol with another one, but you can¡¯t change a property without breaking it or starting from scratch.
  • 23. Instance You can edit these properties: ? Text ? Fill ? Stroke ? Effects Figma - Istanza Constraints and Size can¡¯t be modified in order to preserve consistency.
  • 24. 2/4 How are components more flexible than symbols?? You don¡¯t have to worry about a naming structure (i.e. Icons/ Search) as you¡¯re creating components. To create a category of components, just group them in a frame and name that frame whatever the category is. That means it¡¯s easy to reorganize things later just by dragging components around. Figma - Components Sketch Importance of the naming structure (i.e. Icons/Search) in order to organize categories of symbols.
  • 25. 3/4 How are components more flexible than symbols?? You can find (and see!) components as a list of thumbnails. To add a component to a screen or to swap an instance, just drag and drop to the canvas. Figma - Components Sketch You have to think about a naming structure to navigate a nested menu of symbol names.
  • 26. 4/4 How are components more flexible than symbols?? You can edit the master component in context of the larger view. Figma - Components Sketch You have to go to a separate page to make edits.
  • 27. Constraints You can set up the constraints by pinning against the borders, or setting the element to center. It¡¯s essentially like Sketch¡¯s Pin to corner and Resize object but more visual and intuitive. Figma - Constraints
  • 28. But ¡­ No Stacks in Figma!
  • 29. Prototyping There is a clickable prototyping feature that¡¯s similar to Craft + InVision. Figma prototypes are living documents: when you make changes to the original design, they¡¯ll be reflected instantly in your prototype. Figma - Prototyping
  • 30. Prototyping ? Transitions: add common transitional animations as you move between frames. ? Device frames: add a range of containers - from iPhone to Android to Apple Watch - on your designs. ? Fixed objects: you can attach objects like status bars or buttons to the top, bottom or even sides of a frame with constraints. ? Vertical and horizontal scrolling: you can enable scrolling through individual shapes within a parent frame, which can itself be scrollable. Figma - Prototyping
  • 31. Feedback Anyone with the link can add comments anywhere on the design, similar to how commenting works in InVision. You can tag people in comments, mark comments as resolved, and even integrate with Slack. Figma - Feedback Sketch Only using Sketch Focus or Zeplin.
  • 32. Coding Engineers can inspect, export, and copy CSS, iOS, and Android code. They can get: ? Colors ? Typography ? Dimensions ? Assets Figma - Coding Sketch You can use Zeplin.
  • 33. Pro ? ? Google fonts and Figma font installer ? Real-time collaboration ? Instances ? Layout grid styles ? Team libraries ? Description field for every component ? Feedback ? Prototyping
  • 34. Contro ? ? Instances ? Plugin ? Real data ? Subscription
  • 37. Tangible ¨¨ un marchio di GNV & Partners S.R.L. ? Viale Emilia, 3009 ? 47822 Santarcangelo di Romagna RN ? Italy ? P.IVA 03130760246 ? R.E.A. 296354