Posts

Style Guide exported to Zeplin from Figma

  If the design of Figma frames are based on a style guide and a component library, the style guide and component library will be exported to Zeplin as well when the Figma frames are exported to Zeplin. Check out the  Design Delivery with Zeplin  file for a guided walkthrough, plus tips and tricks to optimize your workflow. https://www.figma.com/community/plugin/745330164019088593/Zeplin

Accidentally created a Component? You can turn this back into an Instance.

  This allows you to keep the object(s) you created, without having them as Components. If you just created the Component you can undo it right away using the shortcut: mac:  ⌘ Command   Z Windows:  Control  +  Z If you want to revert something that's been a Component for a while: Create an Instance of the new Component. Detach the Instance from the Component. Delete the original Component. (https://help.figma.com/hc/en-us/articles/360038665754-Detach-an-instance-from-the-component#Keyboard_shortcuts)

Data visualization notes

 Line graph start from 0 on y axis bar chart, except histogram, start from largest to the smallest. Pie chart contains 5 slices at most Try not to use pie chart as much as I can! There are better ways to present data, such as bar charts than pie charts. Why? A pie chart is only good for presenting a part to a whole while it is hard to compare 2 parts in the pie chart. For showing the comparison clearly, using bar charts will be more useful and sensible. Pie chart is good for composition of slices made up to 100% Quantagram is made up of many identical pictogram.  Quantagrams are great for small numbers that are less than 100. Read this article: How to Master Data Visualization

Create and use variants

Image
Variants reduce the complexity of your design system, makes it easier to find components, and maps your design components more closely to code. In this video we'll teach you how to create and use variants and component sets. https://youtu.be/y29Xwt9dET0 Combine components as variants, using the slash naming convention to name the components to be included as variants For example, the name of the button component can be:

Design System & Component Library

Image
Good practice to set up a component library is to create a separate component page from regular design page to store all newly-created components on that component page. These components  will become local components. So it becomes the component library. On that page, once a component is created, it will be listed on the Assets tab on the right hand panel.  It then can be dragged from Assets tab into any page in the same file.  Publishing component sets to a library is only supported  Professional and Education teams, or Figma Organizations . Click the Team Library button highlighted in blue to publish the component sets to T eam Library , where team member can access to the library. See in this tutorial in which it shows how to create a component on Component page then it can be used in Design page: Figma For Beginners: Create designs (2/4) 16:38 Create a navigation bar

Figma - Data and File Structure

 Home Community User (Me) Team under a user Project (folder) under a Team Project files in a Project folder Pages in a project Layers on a canvas  in each page

Figma: Create and use variants of components

 https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants As you create components and build out your design system, you'll find the need for components that are similar to each other, with only slight differences. Variants allow you to group and organize similar components into a single container. This simplifies your component library and makes it easier for everyone to find what they need.