Skip to main content
xiaoyu-shen
Helper ⭐️⭐️
Aug 21, 2020 1:10 PM UTC
Community design

Community Design Template (available in Figma)

  • Aug 5, 2024 12:25 PM UTC
  • 13 replies
  • 2403 views
  • Translate All

 Updated on Aug 2021 - The design templates are now available in Figma community: Figma.

The look and feel of your community matters. To help you to optimize your community design, we’d like to introduce the design templates to help kickstart your design process! It is a guide which will give you all the details you are looking for!

 

What’s in the templates exactly?

Get started with community design 

 A step by step guide for you to customise and style your community from scratch. 

 

Image dimensions

Find explanations of the most prominent images and their dimensions used in our platform. And you can try the image in the design file to make sure it looks perfect in your community. 

Design file with the specification of image dimensions

 

Platform page templates

Design for main pages in the community: homepage, community categories, and knowledge base categories. All templates are available in both desktop and mobile view. 

Template for homepage, community categories, and knowledge base categories

 

13 replies

timcavey
Helper ⭐️⭐️
Sep 15, 2020 8:56 AM UTC

This looks like a great tool, and it was super easy to sign up and have access to the Insided template!

 

So far I’ve been unable to find the right place to simply insert some custom CSS we’ve made, to test how it looks. Any tips or links to the right guide are welcome!

Translate
learning, sharing and repeat
xiaoyu-shen
Helper ⭐️⭐️
Sep 15, 2020 11:59 AM UTC

Hey @timcavey, glad to hear that you like the new template!

Here’s a guide about custom CSS: 

Please let me know if you have further questions, happy to help out. :)

Translate
timcavey
Helper ⭐️⭐️
Sep 15, 2020 3:48 PM UTC

Here’s a guide about custom CSS: 

Please let me know if you have further questions, happy to help out. :)

 

Thanks @xiaoyu-shen - my issue is that we have some custom CSS code written and ready for prod, but our dev wants to play it safe and test it first. 

 

I was hoping this Figma template would be the perfect place, but so far, I’ve been unable to C&P our lovely code onto the template. Any advice here would be appreciated! 

Translate
learning, sharing and repeat
xiaoyu-shen
Helper ⭐️⭐️
Sep 17, 2020 7:27 AM UTC

Hi @timcavey, Figma is purely a design tool. I’d recommend to test and try the changes on your staging environment first before applying them to your production community.

Translate
xiaoyu-shen
Helper ⭐️⭐️
Dec 21, 2020 1:23 PM UTC

Hi all, I’m happy to announce that the inSided Design Template is out of beta now. 
What’s new:

  1. A new ‘Design Tasks’ page is introduced to help your design team to prepare visual assets and style your community platform step by step. 
    Design Tasks

     

  2. ​​​​​​In the latest update, ‘badge’, ‘favicon’, ‘share image’ was added to the image dimension overview.
    Badge, Favicon, Share image

    Please leave a comment if you have any feedback or questions on the template, we are happy to help. :)

Translate
Contributor ⭐️
Mar 9, 2021 9:09 AM UTC

It’s not possible to duplicate it. how can I acess the file 

 

Translate
xiaoyu-shen
Helper ⭐️⭐️
Mar 18, 2021 1:33 PM UTC

Hey @nargesshab I’ve replied to your question in another post.

If you also have questions about how to download the design template, please check the last part ‘Need some help to download this template?’ for a step-by-step download guide. :) 

Translate
Contributor ⭐️
Mar 19, 2021 10:44 AM UTC

@xiaoyu-shen  Hi, thanks . I recieved the file through the Organization

Translate
xiaoyu-shen
Helper ⭐️⭐️
Mar 19, 2021 11:11 AM UTC

Hey all, recently I’ve heard questions about how to download the template file.

As Figma lately added an advanced option for permission control and by default it was turned off, you may not be able to see the dropdown arrow after you log in. The setting has been updated, and the problem should be solved now. Sorry for the confusion :pray_tone1: .

 

Translate
xiaoyu-shen
Helper ⭐️⭐️
Aug 3, 2021 9:20 AM UTC

Hey all, to make the templates easier to use, we’ve published the design templates in Figma community, please check it out here: http://figma.com/@insided

We are also curious to learn how you like these templates, or if there are any other design guidelines you’d like to see, please leave a reply and let us know.:wink:

Click on ‘Duplicate’ to make a copy in your draft

 

Translate