Figma is a design tool similar to Sketch, that runs on web. Using their API, you can export a design as JSON and also export images from specific layers. The assignment is to build a web app using React with Typescript, that uses this API to display a screen from a Figma file.
Users should be able to select layers on this screen by clicking on them, which displays the layer’s name and coordinates on the right panel. Also, we want to give special attention to 2 types of layers.
If the layer is a text layer, we want to display some text properties on the right panel.
If the layer is exportable(see Notes for details), we also want to display 2 sizes of assets(1x and 2x) on the right panel. Image formats will be PNG.
You can also check out the designs in Zeplin to get a better idea:
You can use any of the endpoints that Figma provides to get the file as a JSON, and to export images from screen and layers. Here’s their API documentation: https://www.figma.com/developers/docs
To use the API, you can create a free Figma account and generate a personal Access Token from your profile, as explained in the docs.
The endpoints you possibly need are listed below.Â
If you want to play with the design file you can save the file to your local by using“File > Save as .fig” menu item and drag and drop the file to your figma welcome page to create an editable version of it.
Figma files might contain multiple screens. For this assignment, only the one named“Guide” should be used.
A screen in Figma is called a“frame”.
Â
Â
Â
Â
To set a layer exportable in Figma, you simply need to add an export setting to the layer. After selecting the layer, you can do that from the right panel:
Notes in General
Do not use any libraries other than React itself.
You can assume that it will work on the latest versions of Chrome and/or Firefox, and use any bleeding-edge Web API you want.
Screen image should be displayed in a scrollable area(if needed), to support screens that are too large to fit the browser window.
Make sure you read the notes in Zeplin project that we invited you.
Add a README.md file into your repository and make sure pointed out 2 main things:
How did you approach the project?
How can we run the project?
Submit the project as a private repo on a service of your choice(Github, Gitlab, Bitbucket, etc.)
API
Notes about Figma
Notes in General
Evaluation Criteria