Fakultas Ilmu Komputer UI

Commit 4795d261 authored by Tirta Abimanyu Purnomo's avatar Tirta Abimanyu Purnomo
Browse files

Add post about figma

parent 4440d24b
---
layout: post
title: Figma for broke college student
date: 2019-03-20 22:13:34 +0700
author: abi
---
Adakah cara murah untuk kolaborasi membuat mockup? Ternyata bisa pakai Figma!
<!--more-->
Saat ingin membuat _mockup_ untuk SIMLOMANKEJAP, kami melihat bahwa tim lain banyak yang memakai aplikasi web bernama **Figma**. Tim kami yang tidak memiliki _hipster_ memutuskan kalau kami juga akan memakai aplikasi tersebut, karena kalau bingung banyak orang yang bisa ditanya.
Setelah Ragil membuat _project_, ia mulai mengundang kami untuk berkolaborasi. Sayangnya, versi gratis Figma hanya bisa memuat 2 orang untuk berkolaborasi dalam 1 _project_. Lalu bagaimana?
Yang kami lakukan selanjutnya adalah mengubah _password_ akun milik Ragil, dan membagikannya ke semua anggota tim. Dengan begitu, semua orang bisa berkolaborasi secara _real time_. Namun kelemahannya adalah ketika kami membuka _project_ bersamaan akan ada beberapa Ragil yang muncul dan tidak bisa dibedakan siapa yang melakukan pengubahan.
![ada banyak ragil](/assets/images/figma-multiple.png)
Lalu apa yang bisa dilakukan di Figma? Menurut saya, Figma sangat mirip dengan aplikasi image editor, namun khusus untuk membuat _mockup_.
Setiap halaman web dimulai dengan membuat sebuah _frame_, yang besarnya mengikuti besar layar yang ingin dibuat _mockup_ nya. Kami menyetarakan setiap _frame_ dibuat sebesar layar Macbook Pro (1440x930)
Di dalam sebuah _frame_ kita bisa menambahkan _component_ yang bisa ditranslasikan sebagai _component_ di kode Reactnya. Sekali lagi karena kita tidak punya _hipster_, maka tim kami memutuskan untuk menggunakan library (yang akan saya bahas di post selanjutnya) untuk membuat _component_ agar terlihat rapi dan sepadan.
_Frame_ yang sudah selesai bisa dibuat menjadi _clickable_ mockup dengan menambahkan _action_ pada _component_. Atau bisa juga dibuat menjadi PDF agar mudah didistribusikan.
Sekian _post_ dari saya, semoga bisa membantu kalian yang bingung cara membuat _mockup_!
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment