Ready-to-code design: build your apps in record time with the Backpack Figma Template

We’re a software development company. And oftentimes, we use complex tech words with our clients. But some of them aren’t technical people. What does this lead to? Lots of confusion.

So we had an idea: a dictionary that lets non-technical people understand even the most complex dev terms. The real question was: how do we make it happen?

We called it the “Get IT Dictionary”. Get it? We gathered a series of dev terms - think programming languages, computer terms, dev processes - and created witty, detailed yet accessible definitions for them. Think Urban Dictionary, but for tech.

And we knew from the start what would be the fastest way to build it: using Backpack for Laravel. This way, our devs didn’t have to spend weeks building CRUDs and adjacent features from scratch - and they could freely customize everything. Luckily, using the soon-to-be-launched Backpack UI Kit, devs don’t need to get creative: designers can use it to quickly build ready-to-code admin panels. 

Putting the frontend pieces together - the custom design part

This was a user-centered app, so we chose to make our own design, from scratch. No templates, no nothing. So we began by building the homepage: we created a big headline and a search box right at the top of the page, and then brought a tetris-like pattern around them, to add some color. Next, we made a section that would feature 2 words - a word of the day and a random word - so that users can get a preview of what they can learn from this website. Below that, we made the ‘Browse by category’ and ‘Browse by letter’ sections, to show users the ways they can browse definitions on the website.

All of these sections let us know what the main pages should be (aside from the homepage): 

• A search results page, 
• A browse by letter (for a specific one) page, 
• A category page, and 
• A word definition page (for one or more definitions)

Plus, we added a few things into the header and footer - the header contained dropdowns to all the letters and categories, a Submit button and a newsletter button. Meanwhile, the footer contained legal things like a Privacy Policy and DMCA.

When it came to the logo, we wanted to make something fun. We already had some color on our homepage, so why not use it? We went for a highlighter concept and gave each portion of the logo its own background color: “get IT” got a shade of yellow and “dictionary” got a white-based mint. We also added a “?!” on the front, for the fun of it. This one got a pastel coral background. To keep with the tech concept, we used Source Code Pro for the font.

Tackling the nuts and bolts of the backend - the Backpack Figma Template

People often think about an app’s frontend side first, leaving the backend as an afterthought. But for apps or web platforms that need content management, having an admin panel is a given. And we knew the Get IT Dictionary needed one too - and we wanted to build it as quickly as possible.

The solution? Backpack for Laravel, plus its Figma template - a project we’d recently finished and which provided all the pages we needed to design CRUDs. 

What is Backpack for Laravel, you might ask? Backpack is a collection of admin panel packages. It uses Laravel, Bootstrap & jQuery and it comes with HTML building blocks, through which pages, dashboards or widgets can be built. In short, it’s a much faster way to build Laravel admin panels. 

The Figma template that we made for it helps both devs and designers: every page was recreated in Figma so designers can freely reuse them and edit them to match their projects. With this, the developers’ job is much easier: all these items are building blocks that are code-ready and easy to implement. Most of all, they’re fully responsive. In other words, designers can use it to quickly build screens, which can then be easily coded by the devs. 

So how did we use the Backpack Figma Template for the dictionary? Here’s the step-by-step process.

1. Figure out what you need CRUDs for

We’d already built the frontend to our dictionary website. So it was clear what we needed to include in the admin panel: words, categories, letters and ads. All of these needed their own CRUDs, which meant creating a list, create, and edit page for each of them. The delete option only prompts a pop-up, so we didn’t need multiples of it.

2. Make the list page/table view of the elements you need to manage

This one is a bit tougher - a lot of thinking goes into it. You have to know exactly what kind of info you need to see for each item. But once you’ve figured that out, the other pages (create and edit) will be done much quicker.

So here’s what we did: we went onto the Example - Manage Articles page within the Backpack Figma Template. We grabbed the first page, which is the Articles list-type page, and copy-pasted it into our document. 

We then grouped every column (to make it easier to move them around) and got to renaming things. Since we began with the Word List page, we had a series of columns, such as definition, part of speech or category.

3.Make the create and update pages

The hardest part is done: once you know what goes into the list page, you know what goes into the create and update pages.

We grabbed the Add Article screen from the Example - Manage Articles page and added it to our document. Then, we adapted the inputs to what we needed (basically, the columns on the list page). This one, technically, can get a bit more challenging. But to make your work easier, here are some tips:

• Group the inputs and everything they include (the title, required asterisk, any dropdown arrows). This will make moving them around easier
• Lock the background of the inputs so you don’t accidentally move it around
• If you need other types of inputs that this page doesn’t already come with, go to Backpack Components, head to Fields - Normal Container and look for the type of input you need. Alternatively, use the Assets tab and just search for what you need. Make sure to grab the ones with ‘XL’ in their name, so it fits the container perfectly.

What we did here wasn’t too complicated: the important part was knowing what kind of input each item was, and we either edited the existing ones, or added new ones from the Fields - Normal Container page within the template.

The Update page is pretty much the same thing, except all the inputs are filed: so while you’re on the Backpack Components page, slide over to Field States (zoom out as far as possible if you can’t find it) and grab the filled-out versions of the inputs you used. 

Alternatively, head back to Example - Manage Articles and use Edit Articles as a reference for text styles and positions.

What about the last step of a CRUD, the delete action? This will go through the actions section on the list page - which is already included in Articles (so feel free to take it as it is). And the only visual thing it needs is a pop-up, which you can freely take from, you guessed it, Example - Manage Articles.

4.Refine and add instructions

Your design is ready for the developer handover. So how can you make their work less difficult? Add notes where necessary - if you have dropdowns, tell them what goes into them. If you have some special features on the frontend side, let them know how they happen in the backend. 

For instance, in the Get IT Dictionary, we have a “word of the day” feature. Since Create Article already had a checkbox for “Featured item” we decided to leave that in and use it for the word of the day. Since the code for this feature already exists in Backpack, the devs can simply take it and add it into their code.

There you have it: this is how we designed the backend portion of the Get IT Dictionary. Overall, using the Backpack Figma Template sped things up a lot, not just for the design but also for the code part. Our devs built it quick and easy - in fact, the frontend custom design took much longer to code.

Curious about the Backpack Figma Template? Check it out here. But if you’re here looking for complex development services, contact us.

If you liked this article subscribe and get an email when we publish new, juicy stuff. We hate spammers, so we don’t spam.