{"id":16347991,"url":"https://github.com/ismamz/areas.framerfx","last_synced_at":"2026-05-07T13:33:06.731Z","repository":{"id":47962577,"uuid":"209106738","full_name":"ismamz/Areas.framerfx","owner":"ismamz","description":"A Framer X package to create complex grid layouts with template areas","archived":false,"fork":false,"pushed_at":"2021-08-11T13:09:06.000Z","size":643,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T09:20:51.873Z","etag":null,"topics":["css","framer","framerx","grid","grid-layout","package","ui"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ismamz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-17T16:42:22.000Z","updated_at":"2023-07-27T12:05:52.000Z","dependencies_parsed_at":"2022-08-12T15:20:33.354Z","dependency_job_id":null,"html_url":"https://github.com/ismamz/Areas.framerfx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2FAreas.framerfx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2FAreas.framerfx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2FAreas.framerfx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2FAreas.framerfx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ismamz","download_url":"https://codeload.github.com/ismamz/Areas.framerfx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239576790,"owners_count":19662114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","framer","framerx","grid","grid-layout","package","ui"],"created_at":"2024-10-11T00:47:55.569Z","updated_at":"2026-05-07T13:33:06.701Z","avatar_url":"https://github.com/ismamz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Create complex grid layouts with [template areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).\n\nThis package use [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to build a grid layout in Framer X without writing code.\n\n\u003e A grid area is one or more grid cells that make up a rectangular area on the grid. Grid areas are created when you place an item using line-based placement or when defining areas using named grid areas.\n\n## Usage\n\n1. Drop the `Areas` component to your canvas\n2. Connect to multiple frames\n3. Define areas for each row like CSS\n4. Adjust gaps and border radius\n\nBy default each connected frame will take a letter name (a, b, c, ...). Each string input in the Rows controls should be defined using that letters or if you choose \"Names\" instead of \"Letters\" you will need to use the frame names as you see it in the layers panel.\n\nIf a frame name is repeated you will sea a warning message in console.\n\n![Screenshot 1](https://isma.uy/assets/screenshot-1.png)\n\nEach cell will cover the total space of an area and the content will be adjusted to the new dimensions. Images, Frames or whatever component you connect.\n\n## Changelog\n\n#### v1.1.0\n\n- Add [emotion](https://emotion.sh/docs/@emotion/styled) to fix re-render when gap props changes\n\n#### v1.0.0\n\n- Initial release\n\n---\n\n## See also\n\n- [Duotone](https://store.framer.com/package/ismael/duotone): apply duotone effect to an image\n- [Sticky](https://store.framer.com/package/ismael/sticky): set multiple sticky header frames in a scrollable area\n- [Google Maps](https://store.framer.com/package/ismael/google-maps): add a Google Map to your design\n- [Photo Filters](https://store.framer.com/package/ismael/photo-filters): add filters and effects to images like Instagram\n- [Get colors from images](https://store.framer.com/package/ismael/get-colors-from-images): extract colors from a selected image to form a color profile\n\n---\n\nBugs \u0026 help: [@ismamz](https://twitter.com/ismamz) and [Areas.framerfx repo on GitHub](https://github.com/ismamz/Areas.framerfx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismamz%2Fareas.framerfx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fismamz%2Fareas.framerfx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismamz%2Fareas.framerfx/lists"}