March 29, 2018 Getting Started with Zeplin in Topcoder Frontend Challenges

Over the years at Topcoder we were using Adobe Photoshop and Adobe Illustrator based storyboard for frontend development challenges in the UI-Prototype track, iOS community track and the Code tracks. Recently we started using a new tool called Zeplin in our development challenges and that can be used to quickly export storyboard from Photoshop or Sketch.
As it’s new we decided to help our community by providing the basic workflow one should follow when launching a Zeplin based Topcoder challenge or when registering and competing in any of these challenge.
Why use Zeplin when the same work can be done using PhotoShop or Illustrator or Sketch?
PhotoShop, Illustrator and Sketch are good tools frontend developers can use when create the UI (User Interface) of a responsive or non-responsive website, or mobile apps, however it’s lot more time consuming to export icons, images and other resources from the storyboard. Extracting other details such as the dimensions of an element, typographic details, color information, spacing, position … takes much of the development time & competitors get lesser time to focus on other requirements listed in the specification for a topcoder development challenge. A topcoder development frontend challenge (UI-Prototype & iOS community) normally has 5 days submission period and every minute counts to complete all the specification requirements in time.
By using Zeplin these tasks become faster and more efficient. It enables a developer to code faster & efficiently. This way developer can get good score from the challenge reviewers that is very much important to win a challenge.
What are the basic things Topcoder Copilots, Specification reviewers should ensure before launching a Zeplin based Topcoder UI-prototype challenge, iOS community challenge or Code challenge?
When launching a Zeplin based challenge, the following workflows are recommended:

1. Make sure all the storyboard pages are exported to Zeplin account from the Photoshop or Sketch source.
2. Beside the Zeplin storyboard, attach the Sketch or Photoshop storyboard source in the challenge forums.
3. When challenge registration starts, invite members to join the Zeplin online project account by creating a new forum thread/post.
4. When registrants make request to join the Zeplin project account add them to the Zeplin project.
5. When a member is added for the first time they only have limited access to the Zeplin project. To grant full access add their account to the project organization, i.e. Topcoder organization unless the project/challenge has a dedicated client organization for the project.
6. Watch forums for any queries posted by the members. They might have some issues when joining.

What are the things a Topcoder member should ensure when participating in a Zeplin based Topcoder UI-prototype challenge, iOS community challenge or Code challenge?
To participate in a Topcoder frontend challenges sometimes it’s required to use the the Zeplin based storyboard. To quickly get started in such challenges one can follow these steps:

1. Create a Zeplin account if you haven’t any.
2. Visit the challenge specification page & register for the challenge. After registering, visit the challenge forum by clicking the challenge forum link. Look for a forum post that has Zeplin invitation request title. To get the Zeplin storyboard access make an access request by posting a comment containing your Zeplin account email.
3. The challenge copilot will use your email to grant access for the Zeplin project account.
4. Once you get the Zeplin storyboard access open the Zeplin project in the web browser or the desktop app. & ensure that you have full access to the storyboard.
5. In case you have a limited access, inform the challenge copilot by posting a comment in the challenge forum so that the copilot can grant you full access by adding your account to the Topcoder Organization.
6. If you have any other issues regarding this add comments in the challenge forum.

Once you have all the required access start working on the project & make your submission before the challenge submission phase ends.
I also asked two of our copilot about their experiences with Zeplin.
Q. What was the most confusing thing when you had launched your first Zeplin based Topcoder development challenge?
lunarkid: Sharing a Zeplin URL to our members. Public URLs will display nothing if you just share the Zeplin URL. So, you need to add each member to the organization on Zeplin to let them see the measurements and download the assets.
fajar.mln: Make images from storyboard to be downloadable, it’s not a simple drag n drop process. I need to mark and select each layer in the storyboard if I want to make them as image asset so it can be downloaded by developer.
Q. Which of these you would prefer when exporting storyboard to Zeplin:
Using Sketch format source storyboard and the Zeplin plugin or using the Photoshop format source storyboard and the Zeplin plugin?
lunarkid: Hm… exporting Zeplin assets on Photoshop or Sketch are easy. But easiest should be using Sketch, just via “Make Exportable” button.
fajar.mln: Both are the same thing for me.
Hope it helps in getting started started with Zeplin when in Topcoder challenges.
Happy coding!!