a Collaborative Design Tools

Figma is a collaborative tools to create and test a design. Imagine google spreadsheet which can be modified and viewed by dozens of people but for designer or developer.

Apart from figma, there are other collaborative tools for designer such as : invision, sketch, adobe XD and UxPin.

design modificaiton on figma is applied in realtime. Each person changes can directly be viewed by other person that opening the workspace at same time. It make figma a good fit for rapid prototyping solution which require collaboration between different stakeholder.

Product of Figma

Like microsoft 360 products, There are several product that available in figma. Each product serve different purposes and some of it are locked behind paywall (subscription).

In total, figma has five different products such as :

  1. FigJam: Collaborative Whiteboarding. Imagine a whiteboard where everyone can write any doodle(text, shapes, image, etc) on it. Best for ideation stage.
  2. FigmaSlides: Equivalent to Google Slides.
  3. DevMode: Sketch but for “developer eyes”. All the design that craeted on figma will now have the corresponding CSS/Styling. Developer can copy and paste the css to their codes. Really helpful to fast track the development phase especially when turning figma design into actual frontend codes.
  4. FigmaDraw: Equivalent to adobe illustrator (AI). Free draw using mosue or stylus.
  5. FigDesign: The core tools for prototyping: Create mockup, layouting, layering, version history, styling, etc.

Choosing Right Package

Each stage of the projects might require different sets of tools and will also depend on the project preferences. Sometime combining figma with other collaborative tools is also an option. For example: to create a slides, microsoft powerpoint is preffered. Prototyping will be done in figma. But whiteboarding is done in microsoft team’s whiteboard. Hence it really depend on the team preferences.

On current milestoneku.com project stages, only some product are required.

  • FigmaDesign to execute wireframe prototyping
  • FigmaDev to turn figma’s wireframe to actual applicable css.

Fortunately for personal project that doesnt require poeple to collaborate, figma gave those two products for free. Hence, Figma strater plan is enough. But once the product is going to be scaled where more people will be involved on the project, an upgrade will definitely needed.

Note that figmaDesign and figmaDev on free version has same sets of features with Pro/organization/enterprise plan. Its not an downgraded version. they just lock the collaborative tools and  number of project/files.

Installing figma

Register

before able to use figma, an account is needed.

go to figma.com and login using gmail

Figma Workspaces

postimage100Figma Workspaces

Once logged in, figma is ready to be used.

Done.

Figma on Desktop

Some people prefer to open figma in desktop mode for the performance reason. Web figma is great for its simplicity (no need to download additional apps). Login and good to go. But web version will require the browser to download the assets. Going desktop version will make all figma apps assets instantly available

https://www.figma.com/downloads/

Download and Choose the right installer platform.